Ajax

1. Ajax

XMLHttpRequest对象，开始使用xml数据格式，后来演变成json格式

function createXHR() {

if (typeof XMLHttpRequest != "undefined") {

return new XMLHttpRequest();

} else if (typeof ActiveXObject != "undefined") {

var version = [

"MSXML@XMLHttp6.0",

"MSXML@XMLHttp3.0",

"MSXML@XMLHttp",

]

for (var i=0; i < version.length; i++) {

try {

return new ActiveXObject(version[i]);

} catch (e) {

}

}  

} else {

throw new Error("浏览器不支持XHR!");

}

}

2. Ajax使用

var xhr = createXHR();

xhr.open("get", "http://server.com/rest/api", false);  //以get方式同步请求

xhr.send(null);  //发送请求, IE浏览器发送第二次将获取缓存数据

xhr.responseText;  //响应主体文本

xhr.status;  //http响应状态吗

xhr.statusText;  //状态说明

3. Ajax的异步使用

var xhr = createXHR();

readyState; // 0表示未初始化(尚未调用open), 1 启动(已经调用open，但未调用send), 2表示send(已经调用send), 3表示已经接受部分数据 4表示完成（接收全部数据）

xhr.onreadystatechange = function () {

if (xhr.readystate == 4) {

alert(xhr.responseText);

}

}

xhr.open("get", "http://server.com/rest/api", true);  //以get方式异步请求

xhr.send(null);

4. GET和POST请求

xhr.getResponseAllHeaders();   //获取响应头信息

xhr.getResponseHeader("Content-Type");  //获取响应头信息单一字段

xhr.setRequestHeader("myheader", "Lee");   //设置发送头信息

xhr.send(null);

//ajax返回的数据是utf-8编码的

//发送post请求，模拟表单提交

xhr.open("post", "http://server.com/rest/api", true);  //以post方式异步请求

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.send("name=lee&age=19");

5. 封装Ajax

function ajax( obj) {

var xhr = createXHR();

url = obj.url + "?rand="  + Math.random() + "&" + obj.data;

xhr.onreadystatechange = function () {

if (xhr.readystate == 4) {

obj.success(xhr.responseText);

}

}

xhr.open(obj.method, url, obj.async);

xhr.send(null);

}