AJAX的使用简述

Ajax（Asynchronous JavaScript and XML）并不是一项新技术，它只是一种解决客户端异步请求的综合了javascript、XML等的web应用技术。

先解释一下所谓的异步和同步，这个两个概念一直困扰着我，因为我学java多线程时是非常清楚的，后来看了某个大哥的例子之后我就弄晕了。

异步和同步，比如说有A和B两个任务。如果是异步的话，就相当于开了两个线程同时去处理A任务和B任务。而同步的话，则相当于只有一个线程，必须等任务A做完了，才能去处理任务B。使用同步的话，用户必须等待一个任务完成后，才能处理另外一个任务。

在AJAX中，AJAX本身是可以在客户端后台连接服务器，且AJAX可以通过属性设置，设置该AJAX操作是同步的还是异步的。如果是异步的，则AJAX在后台连接服务器的同时，用户可以在web页面上执行任何其他的操作。而如果是同步的话，当AJAX在后台连接服务器的时候，用户在web页面上不能执行任何操作，用户必须等待AJAX任务完成后才能进行操作。

Ajax的核心是XMLHttpRequest对象，该对象在IE5中首次引入，它能够通过HTTP协议与服务器建立连接。

Ajax能带来更好的客户体验，用户在浏览网页的同时，不必等待页面的刷新或跳转。Ajax可以在客户端以异步的方式请求服务器。

如何使用AJAX？

第一步：创建XMLHttpRequest对象。XMLHttpRequest并不支持W3S规范，所以对于不同的浏览器，创建XMLHttpRequest的方式也不一样。

对于Internet Explorer浏览器：

　　xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0,5.0

　　xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");

xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");

对于Mozilla﹑Netscape﹑Safari等浏览器：

创建XMLHttpRequest 方法如下：xmlhttp_request = new XMLHttpRequest();

 

如果服务器的响应没有XML mime-type header，某些Mozilla浏览器可能无法正常工作。为了解决这个问题，如果服务器响应的header不是text/xml，可以调用其它方法修改该header。   xmlhttp_request = new XMLHttpRequest();

xmlhttp_request.overrideMimeType('text/xml');

 

在实际应用中，为了兼容多种不同版本的浏览器，一般将创建XMLHttpRequest类的方法写成如下形式：

var xmlhttp_request = false;
　	try{
		if( window.ActiveXObject ){
		　　for( var i = 5; i; i-- ){
		　　	try{
				if( i == 2 ){
						xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" ); 
				}else{ 
					　	xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" ); 　　						xmlhttp_request.setRequestHeader("Content-Type","text/xml"); 
						xmlhttp_request.setRequestHeader("Charset","gb2312"); 
					} 　　
					break;
				}catch(e){
					xmlhttp_request = false; 
				} 
			} 
		}else if( window.XMLHttpRequest){
			xmlhttp_request = new XMLHttpRequest();
			if (xmlhttp_request.overrideMimeType){
				xmlhttp_request.overrideMimeType('text/xml');
			} 
		} 
	}catch(e){
		xmlhttp_request = false;
	}

第二步：为XMLHttpRequest对象指定一个返回结果处理函数，即回调函数。用于对服务器返回的结果进行处理。

具体代码如下：xmlhttp_request.onreadystatechange = getResult;     //getResult是指定的函数。

使用XMLHttpRequest的onreadystatechange属性指定回调函数时，不能指定要传递的参数，如果要指定传递的参数时，可以使用一下方法：

xmlhttp_request.onreadystatechange = function(){ getResult(str) };

 

第三步：建立和服务器的连接：

       建立连接时，需要指定请求路径url,发送请求的方式（GET或POST）以及是使用同步还是异步的方式发送请求。

       例如：使用异步方式发送GET方式的请求：

              xmlhttp_request.open(‘GET’,url,true);

              使用异步的方式发送POST方式的请求：

              xmlhttp_request.open(‘POST’,url,true);

在open()方法指定url时，最好在url后面加一个时间戳，这样就可以避免浏览器缓存结果而不能实时得到最新的结果。如：

              var url = “abc.jsp?nocache=” + new Date().getTime();

第四步：发送请求

       建立好连接后，可以使用XMLHttpRequest对象的send（）方法向服务器发送请求，该方法需要传入一个参数，该参数就是请求的内容。该参数可以是DOM对象的实例、输入流或者字符串。

       如果是以GET方式发送的请求，可以将send()方法中的参数设为null,如果是以POST方式发送请求，可以向send（）方法中传递要发送的内容。

       例如：GET方式发送：

              xmlhttp_request.send(null);  

              POST方式发送：

              var param = “name=”+form1.input1.value +”&sex = ” +form1.input2.value;

              xmlhttp_request.send(param);

如果是以异步的方式发送的请求，在请求发送完成后，该方法立即返回（return或结束）。

而如果是以同步的方式发送请求，则必须等待服务器响应后才返回。

有一点要注意的时，在使用POST方式发送请求时，应该设置正确的请求头，具体代码如下：       xmlhttp_request.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);

上面这段代码要放在xmlhttp_request.send(param);之前，且放在xmlhttp_request.open();之后。

第五步：处理服务器响应

       发送完请求后，就要处理服务器的响应了。对服务器的响应的处理就在上面第二步中指定的回调函数中完成，回调函数在第二步中通过XMLHttpRequest的onreadystatechange属性指定，xmlhttp_request.onreadystatechange = getResult;

所以第五步也就是完善回调函数。

回调函数的一般形式如下：

function getResult(){
	if(xmlhttp_request.readyState==4){ //判断请求状态
		if(xmlhttp_request.status==200){ //判断响应状态，200证明响应成功
			 …………                 ; //分析处理响应结果
		}else{ //响应错误
			alert("你所请求的页面错误！");
		}
	}
}		

其中XMLHttpRequest对象的readyState属性表示的是请求的状态，有五个取值：0未初始化，1正在加载，2已加载，3交互中，4完成。

XMLHttpRequest对象的status属性表示的是响应情况,200表示响应成功，202表示“请求被接受，但尚未成功”，400错误的请求，404未找到文件，500内部服务器错误。

XMLHttpRequest提供了两个用来访问服务器响应的属性：一个是responseText属性，返回字符串响应，一个是responseXML属性，返回XML响应。

例如：如果服务器返回的是一个字符串：

function getResult(){
	if(xmlhttp_request.readyState==4){ //判断请求状态
		if(xmlhttp_request.status==200){ //判断响应状态，200证明响应成功
			var str = xmlhttp_request.responseText  ; //分析处理响应结果
			document.getElementById(“myDiv”).innerHTML = str;
		}else{ //响应错误
			alert("你所请求的页面错误！");
		}
	}
}	

 

例如：如果服务器返回的是一个XML响应，XML内容如下：
	<?xml version="1.0" encoding="utf-8" ?>
	<mr>
		<books>
			<book>
				<title>asdfasdf</title>
				<autor>111</autor>
			</book>
			<book>
				<title>ccccc</title>
				<autor>2222</autor>
			</book>
		</books>
	</mr>

 

客户端通过responseXML获得XML响应后，可以直接解析该XML，获得数据。
function getResult(){
	if(xmlhttp_request.readyState==4){ //判断请求状态
		if(xmlhttp_request.status==200){ //判断响应状态，200证明响应成功
			var xmlDoc = xmlhttp_request.responseXML  ; //分析处理响应结果	
			var str = “”;
		for(var i=0;i<xmlDoc.getElementsByTagName(“book”).length;i++){
	var book = xmlDoc.getElementsByTagName(“book”).itme(i);
str = str + “《” +book.getElementByTagName(“title”)[0].firstChild.data
	+ “》由“” 
+ book.getElementByTagName(“autor”)[0].firstChild.data
+ “”编著<br>”;
}
document.getElementById(“myDiv”).innerHTML = str;
		}else{ //响应错误
			alert("你所请求的页面错误！");
		}
	}
}