ajax 通信,ajax通信

AJAX即Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)，可以在不重新加载整个网页的基础上，对网页的某部分进行更新。

XMLHttpRequest 是 AJAX 的基础，用于在后台与服务器交换数据。

想要创建一个AJAX请求，分为以下几个步骤：

创建XMLHttpRequest对象-> open -> send ->处理响应

//创建Ajax对象

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

//向服务器发送请求

xhr.open('GET', 'xxx.php', true); //async：true(异步)或 false(同步)

xhr.send();

/*post请求要先设置header再发送*/

xhr.open("POST", "ajax_test.asp", true);

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

xhr.send("fname=Bill&lname=Gates");

//服务器响应

xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {//readyState==4表示后台处理完成了

if (xhr.status == 200 || (xhr.status == 304)) {//状态码为0是本地响应成果，200表示处理的结果是ok的

//判断异步调用是否成功,如果成功开始局部更新数据

var res = xhr.responseText;

} else {

alert("出错状态码：" + xhr.status + "出错信息：" + xhr.statusText);

}

}

}

/*用promise实现的ajax*/

var getJSON = function (url) {

var promise=new Promise(function (resolve,reject) {

var xhr = window .XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

xhr.open('GET',url);

xhr.onreadystatechange =handler;

xhr.responseType = "json";

xhr.setRequestHeader("Accept","application/json");

xhr.send();

function handler() {

//readyState

// 0 = 未初始化。尚未调用open()方法

// 1 = 启动 已经调用open()方法，但尚未调用send()方法

// 2 = 已加载/发送，已经调用send()方法，但尚未接收到响应

// 3 = 交互中/接收，已经接收到部分响应数据

// 4 = 完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

if(this.readyState !== 4){

return;

}

if(this.status === 200 || this.status===304){

resolve(this.response);

}

else {

reject(new Error(this.statusText));

}

}

});

return promise;

};

getJSON('./test.json').then(function (data) {

console.log(JSON.stringify(data));

},function (error) {

console.log('出错了'+error);

});

XMLHttpRequest对象方法：

方    法

描    述

abort()

停止当前请求

getAllResponseHeaders()

把HTTP请求的所有响应首部作为键/值对返回

getResponseHeader("header")

返回指定首部的串值

open("method","URL",[asyncFlag],["userName"],["password"])

建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码

open方法并不会真正发送请求，只是会启动一个请求以备发送

send(content)

向服务器发送请求

setRequestHeader("header", "value")

把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 )

必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()

XMLHttpRequest 对象属性描述

属  性

描    述

onreadystatechange

状态改变的事件触发器，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数

readyState

请求的状态。有5个可取值：

0 = 未初始化。尚未调用open()方法

1 = 启动 已经调用open()方法，但尚未调用send()方法

2 = 已加载/发送，已经调用send()方法，但尚未接收到响应

3 = 交互中/接收，已经接收到部分响应数据

4 = 完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

responseText

服务器的响应，返回数据的文本。

responseXML

服务器的响应，返回数据的兼容DOM的XML文档对象 ，这个对象可以解析为一个DOM对象。

responseBody

服务器返回的主题(非文本格式)

responseStream

服务器返回的数据流

status

服务器的HTTP状态码(如：404 = "文件末找到" 、200 ="成功" ，等等)

statusText

服务器返回的状态文本信息 ，HTTP状态码的相应文本(OK或Not Found(未找到)等等)