Ajax初解(一)

做WEB开发的，多多少少都会涉及一些前端知识，比如JS、HTML、CSS等等。功能比较多的WEB应用交互相对来说复杂度都会高一些，为了提升用户体验，常常会用到Ajax技术进行数据通信。虽然在平时的工作中已经用到过很多次Ajax，但是都只是浅尝辄止，对于其实现机制没有一个系统的了解，因此准备整理资料，深入学习一下这部分内容。

今天主要整理一下如何发送一个Ajax请求。

XMLHttpRequest对象

这是一个JS的内置对象，也是Ajax的核心所在。通过该对象可以实现客户端与服务端的异步通信，在不阻塞用户的情况下，实现数据请求与处理。其处理依据为一个状态码readyState，其范围为[0,4]。

创建

创建一个XMLHttpRequest对象的过程因浏览器实现的不同而有所区别。如果浏览器支持XMLHttpRequest对象作为一个窗口属性(所有普通的浏览器都是这样的，除了IE 5和IE 6之外)，那么，代码可以调用XMLHttpRequest的构造器。如果浏览器把XMLHttpRequest对象实现为一个ActiveXObject对象(就象在IE 5和IE 6中一样)，那么，代码可以使用ActiveXObject的构造器。

var xmlHttpReq;
function createXMLHTTPRequest () {
	if(window.ActiveXObject){ 
		xmlHttpReq = new ActiveObject("Microsoft.XMLHTTP"); 
	} else if(window.XMLHTTPRequest){
		xmlHttpReq = new XMLHTTPRequest();
	}
};

发送请求

发送请求的时候，需要注意XMLHttpRequest对象的几个方法与属性：

open:初始化XMLHttpRequest对象

onreadystatechange:注册状态变更处理函数

send:发送请求

function sendRequest () {
	xmlHttpReq = createXMLHTTPRequest();
	xmlHttpReq.open("GET", "validateForm?catalogId=" + catalogId, true);
	// 注册状态值改变时的处理函数
	xmlHttpReq.onreadystatechange=processRequest;
	// 发送请求
	xmlHttpReq.send(null);
};

处理结果

在上一步中，我们注册了一个函数processRequest用于当状态值发生变更时调用，这个函数主要的作用就是通过状态值确认请求是否成功处理返回，然后解析返回结果，进行后续操作：

function processRequest () {
	if(xmlHttpReq.readyState == 4){
　　		if(xmlHttpReq.status == 200){
			var msg=xmlHttpReq.responseXML;
			var textt = xmlHttpReq.responseText;
			// TO DO		
		}
	}
};

至此，一个Ajax请求就完成了。

使用jQuery框架发送Ajax请求
上述方法发送Ajax请求是比较繁琐的，因此，目前大部分情况下，我们都是采用jQuery的Ajax支持来实现异步请求，代码相当简洁：

$.ajax(settings);

这里就不再赘述了，具体使用方法参考jQuery的API文档。