一、功能简述

• 实现前后端或跨页面间的异步数据通信
• 用来改善用户体验的技术
• 使用XMLHttpRequest对象异步地向服务器发送请求
• 服务器返回部分数据，而不是一个完整的页面，以页面无刷新的效果更改页面的局面内容

二、XMLHttpRequest对象

• ajax的核心对象就是XMLHttpRequest对象，但是浏览器对其实现不同，在IE中xhr对象是通过MSXML库中的ActiveX对象实现的，在IE7+以及其他浏览器中采用XMLHttpRequest构造函数来创建xhr对象。
• 考虑到兼容性，最好是封装一个功能函数

function getXHR(){
    var xhr = null;
    if(window.XMLHttpRequest){  //其他浏览器
        xhr = new XMLHttpRequest();
    }else{                      //IE
        xhr = new ActiveXObject("Microsoft.XMLHttp")
    }
    return xhr;
}

1. 创建对象性能优化

   • 懒函数

   • 只判断一次 （一个页面多次用的AJAX请求时，只需要判断一次浏览器）

function getXHR(){
    var xhr = null;
    if(window.XMLHttpRequest){
        getXHR = function(){
            xhr new XMLHttpRequest();
            return xhr;
        }
    }else{
        getXHR = function(){
            xhr = new ActiveXObject("Microsoft.XMLHttp");
            return xhr;
        }
    }
}

三、ajax对象的常用属性和方法

1. open(method,url) 创建请求，method为get 或post
2. send() 发送请求
3. onreadystatechange() 发生任何状态变化时的事件控制对象

4. readystate：请求的状态

   • 0 尚未初始化
   • 1 正在发送请求
   • 2 请求完成
   • 3 请求成功，正在接收数据
   • 4 数据接收成功

5. responseText:服务器返回的文本,字符串形式

6. responseXML:服务器返回的xml，可以当做DOM处理
7. status：服务器返回的http响应值，常用的有：
   
   • 200 请求成功 OK
   • 202 请求被接受但处理未完成
   • 302 请求转发
   • 304 请求缓存
   • 400 错误的请求
   • 404 资源未找到
   • 500 内部服务器错误

四、ajax使用步骤

括号内是对应的readyState
1. open （1）
2. send（2）
3. 数据正在传输（3）
4. 响应完毕（4）

data.txt

hello world

ajax.js

function getXHR(){
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject("Microsoft.XMLHttp")
    }
    return xhr;
}
var xhr = getXHR();
xhr.onreadystatechange = function(data)
{
    console.log(xhr.responseText);
    console.log(xhr.readyState);
}
xhr.open("GET","data.txt");
xhr.send(null);

index.html

五、ajax请求

• GET 取数据

  如上面例子

• POST 提交数据
  比GET请求要多写一句

xhr.open("POST","login.php");
//设置相应头
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send("uname = zs& pwd = 123");

GET请求参数直接放在url后面
POST请求参数放在send中