ajax的使用

什么是ajax

Ajax是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。

常见运用场景有表单验证是否登入成功、百度搜索下拉框提示和快递单号查询等等。

Ajax的目的是提高用户体验，减少网络数据的传输量。同时，由于AJAX请求获取的是数据而不是HTML文档，因此它也节省了网络带宽，让互联网用户的网络冲浪体验变得更加顺畅。

ajax的使用

• 使用步骤
  1. 创建XmlHttpRequest对象
  2. 调用open方法设置基本请求信息
  3. 设置发送的数据，发送请求
  4. 注册监听的回调函数
  5. 拿到返回值，对页面进行更新

1. 创建XMLHttpRequest对象

Ajax 技术的核心是 XMLHttpRequest 对象（简称 XHR），这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。IE5 是第一款引入 XHR 对象的浏览器。在 IE5，IE6 中， XHR 对象是通过 MSXML 库中的一个 ActiveX对象实现的。 所以需要判断该浏览器是否支持XMLHttpRequest对象，如果支持则创建该对象，如果不支持则创建ActiveX对象。

var xhr;
if(window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
}else if(window.activeXObject) {
    // IE5、IE6
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2. 设置请求方式

xhr.open(method,url,async); 

• method：请求的类型，GET、POST等等
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

注意：post请求一定要设置请求头的格式内容

xhr.open("POST","test.html",true);  
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  
xhr.send("fname=Henry&lname=Ford");  //post请求参数放在send里面，即请求体

3. 服务器响应

responseText 获得字符串形式的响应数据。

responseXML 获得XML 形式的响应数据。

①同步处理

xhr.open("GET","info.txt",false);  
xhr.send();  
document.getElementById("myDiv").innerHTML=xhr.responseText; //获取数据直接显示在页面上

②异步处理

相对来说比较复杂，要在请求状态改变事件中处理。

readyState: 对象状态值

0 表示XmlHttpRequest对象已创建或者已经被abort()方法重置
1 表示对象已经初始化，但是请求还未发送（调用了open()方法，send()方法还没有调用）
2 表示请求已经发送，没有接收到响应信息（send()方法已经被调用）
3 表示已经接收到了所有的响应头，响应体开始接收但未完成
4 表示响应信息已经全部接收

xhr.onreadystatechange=function()  { 
    if (xhr.readyState===4)  {  
    	if(xhr.status>=200 && xhr < 300) {
            document.getElementById("myDiv").innerHTML=xhr.responseText;  
    	}
    }
} 

http状态码（status）和对象的状态值(readyState)有什么区别？

​ http状态码是指服务器接收到请求后返回的一个状态码，其中比较常见的是200（请求成功），404（请求失败），500（服务器发生错误）；而对象状态值，是针对XmlHttpRequest对象的；它们俩之间的联系就是只有当请求过程全部完成后，才可以根据服务器返回的状态码调用不同的函数。

注意:

1. 如果向一个代码片段发送请求，将返回XML，而不是静态XML文件，在IE浏览器上则必须要设置响应头才能正常工作。如果不设置响应头为Content-type:application/xml，IE浏览器会在你访问XML元素时抛出“Object Expected”错误。
2. 如果不设置响应头Cache-Control: no-cache，浏览器会把响应缓存下来而且再也无法重新提交请求。你也可以添加一个总是不同的GET参数，比如时间戳或者随机数。