AJAX

AJAX是异步JavaScript和XML（Asynchronous JavaScript And XML)，它是一种方法，允许网页在不重新加在整个页面的情况下更新一部分网页。

AJAX异步请求的过程

AJAX的核心是XMLHttpRequest对象，其中的方法可以用来在浏览器和服务器之间传输数据。

1.创建XMLHttpRequest对象

var xhr=new XMLHttpRequest();

2.连接服务器

xhr.open('GET',url,true);  //设置请求的参数（method，url，async）

method有get和post两种
URL是文件的路径，后面可以带参数
async为true（异步，默认）或false（同步）

3.向服务端发送请求

xhr.send();  //发送请求

4.监听服务器状态并对返回结果执行相应回调

if(xhr.readyState==4&&xhr.status==200||xhr.status==304){  //readyState==4说明请求已完成
            fn.call(this,xhr.responseText);
        }
    }
}

XMLHttpRequest取得的响应数据

responseText:获得字符串形式的响应数据
responseXML：获得xml形式的响应数据
status和statusText：以数字和文本形势返回http转态码
getAllResponseHeader():获得所有的相应
getResponseHeader()：查询相应中的某个字段的值
readState属性

readystate的五种返回值所代表的意义

0（未初始化）还没调用open()方法
1（载入）已经调用send(),正在发送请求
2（载入完成）send()方法已经完成，已收到响应
3（解析）正在解析响应内容
4（完成）响应内容解析完成，可在客户端调用。

完整代码实现

GET:
GET是直接在URL上传数据的。

function AJAX(url,fn){
    var xhr=new XMLHttpRequest();  //创建异步对象
    xhr.open('GET',url,true);  //设置请求的参数
    xhr.send();//发送请求
    xhr.onreadystatechange=function(){  //监听状态变化，执行相应的回调
        if(xhr.readyState==4&&xhr.status==200){  //readyState==4说明请求已完成
            fn.call(this,xhr.responseText);
        }
    }
}

POST：
POST需要添加请求头，数据通过send()来传输。

function post(url,data,fn){
    var xhr=new XMLHttpRequest();
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.open('post',url,true)；
    xhr.send(data);
    xhr.onreadystatechange=function(){  //监听状态变化，执行相应的回调
        if(xhr.readyState==4&&xhr.status==200||xhr.status==304){  //readyState==4说明请求已完成
            fn.call(this,xhr.responseText);
        }
    }
}

ajax异步请求的过程