JavaScript实现Ajax详解

Ajax

Ajax，是Asynchronous  JavaScript + XML 的简写，可以实现页面的局部刷新。虽然 Ajax 中的 x 代表的是 XML，但 Ajax 通信和数据格式无关，所以传输的数据格式不一定使用 XML。

XMLHttpRequest

Ajax 技术核心是XMLHttpRequest 对象(简称 XHR)。

IE7+、Firefox、Opera、Chrome 和 Safari 都支持原生的 XHR 对象，在这些浏览器中创建XHR 对象可以直接实例化 XMLHttpRequest 即可。

var xhr =new XMLHttpRequest();

         注意：通常在使用IE内核的浏览器时，我们通过以下代码创建XHR 对象。

var xhr;                 

if(window.XMLHttpRequest){

     xhr=newXMLHttpRequest();

}else{             //表示使用的是IE的老版本内核

     xhr=newActiveXObject("Microsoft.XMLHTTP");

}

open()方法

在使用 XHR 对象时，先必须调用open()方法，它接受三个参数：要发送的请求类型(get 、post)、请求的 URL 和表示是否异步。

xhr.open(‘post’, 'test.jsp’, false); //对于test.jsp 的 get 请求，false 同步

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

send()方法

通过 send()方法进行发送请求，send()方法接受一个参数，作为请求主体发送的数据。如果不需要则，必须填 null 。执行 send()方法之后，请求就会发送到服务器上。

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

服务器响应

当请求发送到服务器端，收到响应后，响应的数据会自动填充 XHR 对象的属性。那么一共有四个属性：

responseText ：作为响应主体被返回的文本

responseXML ：如果响应主体内容类型是"text/xml"或"application/xml"，则返回包含响应数据的 XML DOM 文档

status ：响应的 HTTP 状态

statusText ： HTTP 状态的说明

接受响应之后，第一步检查 status 属性，以确定响应已经成功返回。一般而已 HTTP 状态代码为200 作为成功的标志。当然了还有其他的状态码，如下：

HTTP状态码	状态字符串	说明
200	OK	服务器成功返回了页面
400	Bad Request	语法错误导致服务器不识别
401	Unauthorized	请求需要用户认证
404	Not found	指定的 URL 在服务器上找不到
500	Internal Server Error	服务器遇到意外错误，无法完成请求
503	ServiceUnavailable	由于服务器过载或维护导致无法完成请求

 

readystatechange 事件

同步的情况下，js会等待请求返回，获取status。不需要onreadystatechange事件处理函数。而异步则需要onreadystatechange事件处理，且值为4再正确处理下面的内容。

如：同步的情况下:

var xhr = new createXHR();

xhr.open('get', 'test.jsp?rand=' +Math.random(), false); //设置了同步

xhr.send(null);

if (xhr.status == 200) { //如果返回成功了

alert(xhr.responseText);//调出服务器返回的数据

} else {

alert('数据返回失败！状态代码：'+ xhr.status + '状态信息：' + xhr.statusText);

}

异步的情况下:

var xhr = new createXHR();

xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

alert(xhr.responseText);

} else {

alert('数据返回失败！状态代码：'+ xhr.status + '状态信息：'+ xhr.statusText);

}

}

};

xhr.open('get', 'test.jsp?rand=' +Math.random(), true);//设置异步传输

xhr.send(null);

注意：readyState属性除了可以是4，还可以是其它值，如下表：

值	状态	说明
0	未初始化	尚未调用 open()方法
1	启动	已经调用 open()方法，但尚未调用 send()方法
2	发送	已经调用 send()方法，但尚未接受响应
3	接受	已经接受到部分响应数据
4	完成	已经接受到全部响应数据，而且可以使用

头信息

1.使用 setRequestHeader()设置单个请求头信息

//放在 open 方法之后，send 方法之前

如：xhr.setRequestHeader("content-type","text/xml;charset=utf-8");

注意：POST 请求和 Web 表单提交是不同的，需要使用 XHR 来模仿表单提交。

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

2.使用 getResponseHeader()获取单个响应头信息

alert(xhr.getResponseHeader('Content-Type'));

3.使用 getAllResponseHeaders()获取整个响应头信息

alert(xhr.getAllResponseHeaders());

编码处理

特殊字符传参产生的问题可以使用 encodeURIComponent()进行编码处理，中文字符的返回及传参，可以讲页面保存和设置为 utf-8 格式即可。

//一个通用的 URL 提交函数

function addURLParam(url, name, value) {

url +=(url.indexOf('?') == -1 ? '?' : '&'); //判断的 url 是否有已有参数

url += encodeURIComponent(name) + '=' + encodeURIComponent(value);

alert(url);

return url;

}

封装Ajax

//名值对编码
function params(data) {
	var arr = [];
	for (var i in data) {
		arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
	}
	return arr.join('&');
}
//封装Ajax
function ajax(obj) {
	var xhr = new createXHR();//调用creatXHR创建XHR对象
	obj.url = obj.url + '?rand=' + Math.random();//为url连接添加随机值
	obj.data = params(obj.data);//调用params方法对数据进行编码处理
	if (obj.method === 'get')//如果是get请求传输
		//进行get请求连接的拼凑
		obj.url = obj.url.indexOf('?') == -1 ? obj.url + '?' + obj.data : obj.url + '&' + obj.data;
	if (obj.async === true) {//如果是异步传输
		xhr.onreadystatechange = function () {//异步传输后的响应
			if (xhr.readyState == 4) //正常返回数据
				callback(); //调用响应函数
			};
	}
	xhr.open(obj.method, obj.url, obj.async);//启动一个请求
	if (obj.method === 'post') {//如果是post请求传输
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//添加头文件
		xhr.send(obj.data);//发送数据
	} else {
		xhr.send(null);//如果不是post请求传输，发送空数据
	}
	if (obj.async === false) {//如果是同步传输
		callback();//调用响应函数
	}
	//想用函数
	function callback () {
		if (xhr.status == 200) {//服务器成功响应
			obj.success(xhr.responseText); //回调
		} else {
			alert('数据返回失败！状态代码：' + xhr.status + '，状态信息：' + xhr.statusText);
		}
	}
}


//调用 ajax
addEvent(document, 'click', function () { //IE6 需要重写 addEvent
		ajax({
			method : 'get',
			url : 'test.jsp',
			data : {
					'name' : 'chen',
					'age' : 22
				},
			success : function (text) {
					alert(text);//弹出响应内容
				},
			async : true //异步传输
		});
});