JavaScript---Ajax

Ajax

Ajax这种技术能够向服务器请求额外的数据而无须卸载页面(即刷新).

实现步骤:

1、创建XMLHttpRequest对象

2、打开请求 open()

​ xhr.open(参数1,参数2,参数3);

​ 参数1：请求类型（GET/POST）

​ 参数2：请求的地址

​ 参数3：是否异步 true表示异步，false表示同步

​ 注：如果需要传参给后台，需要根据不同的请求类型来设置

​ 如果是Post请求，请求地址不变

​ 如果是Get请求，需要通过"?"将传递的参数拼接到请求地址后面

如果是Post请求，需要模拟表单提交

​ xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’);

3、发送请求 send()

​ xhr.send(参数);

​ 参数：

​ 如果是GET请求，参数直接设置在请求的路径之后，所以设置为null

​ 如果是POST请求，有参数则设置参数，无参数则设置为null

​ 当请求发送到服务器端，收到响应后，响应的数据会自动填充 XHR 对象的属性。

4、解析响应

​ xhr.responseText 响应的结果

​ 如果是同步请求:

​ 判断是否响应成功（status=200），得到响应结果

​ 如果数异步请求:

​ 需要通过onreadystatechange事件，监听readyState的值变化 ;如果数据已经完全响应（readyState=4），则判断是否响应成功（status=200），得到响应结果

status属性:

status：响应HTTP状态的状态码。

HTTP状态码 　　 状态字符串　　　　　 说明
200　　　　　　 OK 　　　 　 服务器成功返回了页面
400 　　　　　Bad Request 　　　 语法错误导致服务器不识别
401 　　　　　Unauthorized 　　 请求需要用户认证
404 　　　　　Not found 　　　　 指定的 URL 在服务器上找不到
500 　　　　 Internal Server Error 　　 服务器遇到意外错误，无法完成请求

readyState 属性:

使用异步调用的时候，检测 readyState 属性,每当 readyState 属性改变时，触发readystatechange 事件。这个属性有五个值：

值 　　　　状态 　　　　　　　说明
0 　　　未初始化 　　　尚未调用 open()方法

1 　　　　启动　　　　 已经调用 open()方法，但尚未调用 send()方法

2　　　　 发送 　　　　已经调用 send()方法，但尚未接受响应

3 　　　　接受 　　　　已经接受到部分响应数据

4 　　　　完成 　　　　已经接受到全部响应数据，而且可以使用

请求类型(get、post):

在提供服务器请求的过程中，有两种方式，分别是：GET 和 POST。在 Ajax 使用的过程中，GET 的使用频率要比 POST 高。

GET

GET 请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到 URL 的末尾，以便提交给服务器。

xhr.open(‘get’,‘diner/login?’+‘name=Lee&age=100’,true);

通过 URL 后的问号给服务器传递键值对数据，服务器接收到返回响应数据。特殊字符传参产生的问题可以使用 encodeURIComponent()进行编码处理，中文字符的返回及传参，可以将页面保存和设置为 utf-8 格式即可，AJAX 返回的数据为 UTF-8。

POST

POST 请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是使用的 POST 传输方式。xhr.open(‘post’, ‘diner/login’, true);

而发送 POST 请求的数据，不会跟在 URL 的尾巴上，而是通过 send()方法向服务器提交数据。xhr.send(‘name=Lee&age=100’);

一般来说，向服务器发送 POST 请求由于解析机制的原因，需要进行特别的处理。因为 POST 请求和 Web 表单提交是不同的，需要使用 XHR 来模仿表单提交。

xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’);

从性能上来讲 POST 请求比 GET 请求消耗更多一些，用相同数据比较，GET最多比 POST 快两倍。