Ajax基本知识 和封装

Ajax

XMLHttpRequest
创建 XHR 对象可以直接实例化 XMLHttpRequest
var xhr = new XMLHttpRequest();
在使用 XHR 对象时，先必须调用 open()方法，它接受三个参数：要发送的
请求类型(get、post)、请求的 URL 和表示是否异步。open()方法并不会真正
发送请求，而只是启动一个请求以备发送。

通过 send()方法进行发送请求，send()方法接受一个参数，作为请求主体
发送的数据。如果不需要则，必须填 null。执行 send()方法之后，请求就会发
送到服务器上。

响应后的数据会自动填XHR对象的属性:
responseText 作为响应主体被返回的文本
responseXML 如果响应主体内容类型是"text/xml"或"application/xml"，
则返回包含响应数据的 XML DOM 文档
status 响应的 HTTP 状态
statusText HTTP 状态的说明

接受响应之后，第一步检查 status 属性，以确定响应已经成功返回。一般
情况 HTTP 状态代码为 200 作为成功的标志

检测 readyState 属性,每当 readyState 属性改变时，触发
readystatechange 事件。

0 未初始化 尚未调用 open()方法
1 启动 已经调用 open()方法，但尚未调用 send()方法
2 发送 已经调用 send()方法，但尚未接受响应
3 接受 已经接受到部分响应数据
4 完成 已经接受到全部响应数据，而且可以

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

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

特殊字符传参产生的问题可以使用 encodeURIComponent()进行编码处理，中
文字符的返回及传参，可以将页面保存和设置为 utf-8 格式即可，AJAX 返回的
数据为 UTF-8

当没有 encodeURIComponent()方法时，在一些特殊字符比如“&”，会出现
错误导致无法获取

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-urle
ncoded’)

封装Ajax

1、创建XMLHttpRequest对象
2、打开请求 open()
xhr.open(参数1,参数2,参数3);
参数1：请求类型（GET/POST）
参数2：请求的地址
参数3：是否异步 true表示异步，false表示同步
注：如果需要传参给后台，需要根据不同的请求类型来设置
如果是Post请求，请求地址不变
如果是Get请求，需要通过"?"将传递的参数拼接到请求地址后面
3、如果是Post请求，需要模拟表单提交
xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’);
4、发送请求 send()
xhr.send(参数);
参数：
如果是GET请求，参数直接设置在请求的路径之后，所以设置为null
如果是POST请求，有参数则设置参数，无参数则设置为null
5、接收响应
如果是同步请求请求
判断是否响应成功（status=200），得到响应结果
如果数异步请求，需要通过onreadystatechange事件，监听readyState的值变化
如果数据已经完全响应（readyState=4），则判断是否响应成功（status=200），得到响应结果