原生Ajax

1、Ajax全称：（Asynchronous JavaScript+XML）

特点：能够向服务器请求额外的数据而无需卸载页面。

技术核心：XHR（XMLHttpRequest）对象。使用XHR对象获取数据，通过DOM将数据插入到页面中。

1.1 XHR用法：（0）创建XHR对象

（1）xhr.open() 启动一个请求以备发送

（2）发送一个请求

（3）给服务器发送请求后，会受到服务器的响应码服务器响应码：statusstatus:200 //表示成功status:304 //表示请求资源没有更改，可直接用浏览器中缓存的版本，(优化，缓存)status:404 //请求失败status:500 //服务器错误

（4）我们可以根据服务器返回的状态码，判断发送是否成功检查状态码：

注意：前面是发送的同步请求，大多数情况下是异步请求，即open方法的第三个参数是true：

（5）利用xhr对象对服务器发送请求，我们可以检测XHR对象的readyState属性来监视当前请求/响应过程的阶段。

readyState有5个阶段，就readyState=4时是有用的，该阶段表示已经接收到全部响应数据，而且可以在客户端使用示例：注意：为保证浏览器兼容性，必须在open()之前指定onreadystatechange事件

（6）取消异步请求

1.2 HTTP头部信息（1）设置并发送自定义头部信息— —setRequestHeader

（2）获取某一头部信息— —getResponseHeader

（3）获取所有头部信息— —getAllResponseHeaders

1.3 GET请求get请求的一般url是这样的：http://xxxxxx?name1=value1&name2=value2注意：需要使用encodeURIComponent()对每个参数的key和value进行编码。（jQuery是封装好的，不需要手动编码）

1.4 POST请求1.4.1（1）post请求的数据是不包含在url上的，而是在request body上写上参数（key-value），当然你也可以在url上写一些东西。（2）如果用post的话，一般是要加上参数的，单纯查数据的话，可以写一个空的key-value，来达到查询的效果。

1.4.2用POST请求伪装成提交Web表单的请求：（1）将Content-Type头部信息设为application/x-www-form-urlencoded，即表单提交时的内容类型（2）将页面的表单数据进行序列化— —serialize()

1.5GET与POST之间的区别：（1）两个都是客户端向服务器提交访问请求（2）GET只允许ASCII字符，POST没有限制，可允许二进制数据、支持中文（3）Get数据包含在url中，不安全，post数据包含在报文中，不可见，安全（4）get数据容量有限制，post不限制（get，有一说是最大支持1024字节，其实也没有规定url的长度上限，post，PHP服务器最大限制一般是2MB）（5）对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）。而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。，这也是一般所说的get比post请求快一些的原因。

附：使用xhr请求的流程图（使用visio创建）

使用原生Ajax请求数据

（完）