Ajax

2018-06-24 01:10:57来源：未知阅读 ()

-------------------------------------------------------------------------get-----------------------------------------------------------------------------------
1.通过get来获取数据；
　　Js 部分：

// 2、准备发送
　　　　

// 3、执行发送动作

// 4、指定回调函数

php部分：
　　　　　　

--------------------------------------------------------------------------post-----------------------------------------------------------------------------------
2. 通过post来获取数据：

　　js部分：
　　　　

// 2、准备发送

// 3、执行发送动作

// 4、指定回调函数

php部分：

--------------------------------------------------------------------------Ajax--------------------------------------------------------------------------------
Ajax:
　　全称：Asynchronous JavaScript and XML（异步的js和XML）
　　用途：通过JS语言向服务器请求数据。
　　如何理解ajax?
　　回答：js向服务器请求数据，实现异步请求，局部刷新。

XMLHttpRequest对象的方法：
　　Ajax一旦用send方法发出HTTP请求之后，当readyState为4的时候，就会有一个属性产生 --- xhr.status

Xhr . readyState : 向服务器发送请求状态，就绪状态
　　　　存有 XMLHttpRequest 请求的当前状态。从 0 到 4 发生变化。
　　　　? 0: 请求未初始化
　　　　? 1: 服务器连接已建立 XMLHttpRequest对象正在加载
　　　　? 2: 请求已接收 XMLHttpRequest对象加载完毕
　　　　? 3: 请求解析处理中正在传输数据
　　　　? 4: 请求已完成，服务器的响应已就绪全部完成

Xhr . onreadystatechange : 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数;

xhr.status : 服务器对请求的反馈
　　　　　　? 200 数据相应正常
　　　　　　? 404 没有找到资源
　　　　　　? 500 服务器端错误

xhr . responseText : 服务器输出返回的数据；

xhr . responseXML：接受从服务器传进来的XML类型的数据；

get请求参数获取
　　　1. http协议的常用请求方式：（增删改查）
　　　　a、get 用来从服务器获取数据（参数一般作为查询条件）
　　　　b、post 用来添加数据
　　　　c、put 用来修改数据
　　　　d、delete 用来删除数据

　　 2. $_GET['abc']得到url地址中传递的参数的值

　　 3. $_GET是PHP内置好的专门用来接数据用的一个全局数组

4. 注意：绝不能使用 GET 来发送密码或其他敏感信息

post请求参数获取
　　1. form 默认请求方式就是get请求，get请求会把表单数据作为url的参数进行提交
　　2. 设置服务响应的文件类型：
　　　　1. header("Content-Type: text/plain; charset=utf-8");
　　　　　2. header("Content-Type: text/html; charset=utf-8");

　　3. $_POST也是PHP内置好的专门用来接数据用的一个全局数组
　　　　GET和POST请求方式的差异:
　　　　　　1. GET没有请求主体，使用xhr.send(null)
　　　　　　2. GET可以通过在请求URL上添加请求参数
　　　　　　3. POST有请求主体，可以通过xhr.send('name=itcast&age=10')
　　　　　　4. POST需要设置请求头
　　　　　　5. GET效率更好（应用多）
　　　　　　6. GET大小限制约4K，POST则没有限制
ajax请求：
　　$( document ).ajaxStart( ) ：在 AJAX 请求发送前执行函数。它是一个 Ajax 事件。

$( document ).ajaxStart(function () {
　　　　　　$( '.ajaxStart' ).append( 'start ' );
　　　　});

$( document ).ajaxSend( ) ：规定当请求开始时执行函数；
　　$( document ).ajaxSend(function () {
　　　　$( '.ajaxSend' ).append( 'send ' );
　　});

$( document ).ajaxSuccess（）：在 AJAX 请求成功时执行函数；
　　$( document ).ajaxSuccess(function () {
　　　　$( '.ajaxSuccess' ).append( 'success ' );
　　　});

$( document ).ajaxErro（）：在 AJAX 请求发生错误时执行函数；
　　$( document ).ajaxError(function () {
　　　　$( '.ajaxError' ).append( 'error ' );
　　});

$( document ).ajaxComplete（）：规定当请求完成时运行的函数；
　　$( document ).ajaxComplete(function () {
　　　　$( '.ajaxComplete' ).append( 'complete ' );
　　});

$( document ).ajaxStop（）：规定AJAX 请求结束时执行函数；
　　$( document ).ajaxStop(function () {
　　　　$( '.ajaxStop' ).append( 'stop ' );
　　});

Php-后台接口
　　如何更好的理解接口这个概念
　　接口说白了就是后台返回特定格式数据，而不是一个完整的页面，就是从后台到前台返回一些数据；

知识案例：
　　案例1：
判断数组中没有对应键【array_key_exists】：
　　　　　　　　

array_key_exists（要查找的键，数组）：判断数组中没有对应键

案例2：
　　　　　　

案例3：
　　　　

　　//attr指的是【键】username、password；
　　//defaults.data[attr]指的是【值】'张三'、'123'；

在服务器后台数据中，返回到前端的数据都是字符串，简单数据类型用echo输出，复杂数据类型例如数组，对象等用 json_encode( ) 来转换；
注意：服务器端返回的数据必须是字符串类型，而浏览器端接收的数据也是字符串类型。

　　服务器传到前端的数据转换为字符串：
　　　　json_encode( ) --- 将数组和对象转换为字符串的方法;
　　　　json_decode( )--- 将字符串转换为对象的方法；
　　前端接受服务器数据，将数据转换为对象，以便使用：
　　　　JSON_parse( ) --- 把json形式的字符串转成对象；
　　　　JSON_stringify( ) --- 把对象转成字符串；
　　　　eval( ) --- 把字符串解析成JS代码并执行；

---------------------------------------------------------------------------XML------------------------------------------------------------------------------------

什么是XML
　　1、XML指可扩展的标记语言
　　2、主要用来输出和存储数据 --- 注意：设置宗旨是【传输数据】，而非显示数据
　　3、XML标签没有预定义，需要自行定义标签 --- 就是说XML具有自我描述性

XML 数据格式的缺点
　　1、元数据占用的数据量比较大，不利于大量数据的网络传输
　　2、解析不太方便

XML和HTML的区别
　　1、XML是用来传输和存储数据的，而HTML被设计是用来显示数据的
　　2、XML旨在传输数据，HTML旨在显示信息
　　object后面的原型在不在前面的原型链上

XML的树结构
　　1、XML 文档形成了的也是一种“树结构”；
　　2、【XML文档必须包含根元素】该元素是所有其他元素的父元素。树结构从根部开始，扩展到最低端；

XML的语法
　　1、所有XML元素都必须都闭合标签
　　2、XML标签对大小写敏感，因此必须使用相同的大小写来编写打开标签和关闭标签
　　3、XML必须正确地嵌套
　　4、XML 文档必须有根元素
　　5、XML 的属性值须加引号
　　6、XML 中的注释 --- \
　　7、在 XML 中，空格会被保留
　　8、一些特殊符号需要用实体引用

---------------------------------------------------------------------------JSON-----------------------------------------------------------------------------------

什么是JSON
　　JavaScript 对象表示法
　　是存储和交换文本信息的语法
　　轻量级的文本数据交换格式

JSON数据和普通的JS兑现的区别
　　json 对象没有变量名
　　json 形式的数据结尾没有分号
　　json 数据中的键必须用双引号包括

JSON和XML对比
　　JSON 比 XML 更小、更快，更易解析

json数据解析:
　　把JSON文本转换为JavaScript对象

　　　 JSON 最常见的用法之一，是从 web 服务器上读取 JSON 数据（作为文件或作为 HttpRequest），将 JSON 数据转换为 JavaScript 对象，然后在网页中使用该数据。

　　为什么要转换

　　　　在数据传输过程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键;

　　转换的方法
　　　　JSON_parse( ) --- 把json形式的字符串转成对象
　　　　JSON_stringify( ) --- 把对象转成字符串
　　　　eval( ) --- 把字符串解析成JS代码并执行（有安全隐患） var d = eval("(" + data + ")"); 加双引号
　　　　xhr.responseXML：返回XML格式数据。（不常用）
　　　　xhr.responseText：返回字符串格式数据。

---------------------------------------------------------------------------jQuery-ajax--------------------------------------------------------------------------------

jQuery-ajax相关API基本使用：
　　　　　　

jQuery-ajax属性：
　　type：通过什么方式获取；
　　url ：数据请求地址；
　　data : 发送到服务器的数据。将自动转换为请求字符串格式；
　　dataType : 服务器返回的数据类型:
　　　　　　§ "xml": 返回 XML 文档，可用 jQuery 处理。
　　　　　　§ "html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
　　　　　　§ "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
　　　　　　§ "json": 返回 JSON 数据。
　　　　　　§ "jsonp": JSONP格式。使用JSONP形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
　　　　　　§ "text": 返回纯文本字符串
　　success : 请求成功后的回调函数。
　　error ： 请求失败时调用此函数。一般是获取后端数据出现错误就会调用此函数；