Ajax技术之与服务器通信-发送请求与处理响应

通过上一讲的介绍，我们已经了解了Ajax和Ajax所使用的技术，下面我将介绍应用Ajax如何与服务器通信。

一、发送请求

Ajax可以通过XMLHttpRequest对象实现采用异步方式在后台发送请求。通常情况下，Ajax发送请求有两种，GET请求和POST请求。无论发送哪种请求，都需要经过一下4个步骤。

1)初始化XMLHttpRequest对象。为了提高程序的兼容性，需要创建一个跨浏览器的XMLHttpRequest对象，并且判断XMLHttpRequest对象的实例化是否成功，如果不成功，则给予提示。具体代码如下：

http_request = false;
if(window.XMLHttpRequest){
	http_request = new XMLHttpRequest();
}else if(window.ActiveXObject){
	try{
		http_request = new ActiveXObject("Msxml2.XMLHTTP");
	}catch(e){
		try{
			http_request = newActiveXObject("Microsoft.XMLHTTP");
		}catch(e){}
	}
}
if(http_request){
	alert("不能创建XMLHttpRequest实例！");
	return false;
}

2)为XMLHttpRequest对象指定一个返回结果处理函数(即回调函数)，用于对返回结果进行处理。具体代码如下：

http_request.onreadystatechange = getResult;

记住不能指定要传递的参数，如果要指定传递的参数，可以使用如下方法：

http_request.onreadystatechange = function(){
	getResult(param);
};

3）创建一个与服务器的连接。在创建时，需要指定发送请求的方式(即GET或POST)，以及设置是否采用异步方式发送请求。

例1：异步方式发送GET请求：

http_request.open('GET',url,true);

例2：异步方式发送POST请求：

http_request.open('POST',url,true);

open()方法中的url参数，可以使一个JSP页面的URL地址，也可以是Servlet的映射地址。也就是说，请求处理页，可以是一个JSP页面，也可以是一个Servlet。

小技巧：在指定URL参数时，最好讲一个时间戳追加到该URL参数的后面，这样可以防止因浏览器缓存结果而不能实时得到最新的结果。例如，可以指定URL参数为以下代码：

String url = "deal.jsp?nocache="+new Date().getTime();

4)向服务器发送请求。XMLHttpRequest对象的send()方法可以实现向服务器发送请求，该方法需要传递一个参数，如果发送的是一个GET请求，可以将该参数设置为null；如果发送的是POST请求，可以通过该参数指定要发送的请求参数。

例1：向服务器发送GET请求的代码如下：

http_request.send(null);

例2：向服务器发送POST请求的代码如下：

var param = "user="+form1.user.value + "&pwd="+form1.pwd.value;//组合参数
http_request.send(param);

需要注意的是，在发送POST请求前，还需要设置正确的请求头。具体代码如下：

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

上面这句代码，需要添加在send()语句之前。

二、处理服务器响应

当向服务器发送请求后，接下来就需要处理服务器响应。在向服务器发送请求时，需要通过XMLHttepRequest对象的onreadystatechange属性指定一个回调函数，用于处理服务器响应。在这个回调函数中，首先需要判断服务器的请求状态，保证请求已经完成；然后再根据服务器的HTTP状态码，判断服务器对请求的响应是否成功(具体数值表示的含义详见上一讲)，如果成功，则获取服务器的响应反馈给客户端。

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

1、处理字符串响应

字符串响应通常应用在响应不是特别复杂的情况下。例如，将响应显示在提示对话框中，或者响应只是显示成功或失败的字符串。现在流行的数据交互格式json，本质上也是字符串，后续为大家详细解读json。

例：将字符串响应显示到提示对话框中的回调函数的具体代码如下：

function getResult(){
	if(http_request.readyState==4){            //判断请求状态
		if(http_request.status==200){		   //请求成功，开始处理返回结果
			alert(http_request.responseText);
		}else{
			alert("您所请求的页面有错误！");
		}
	}
}

如果需要将响应结果显示到页面的指定位置，也可以在页面的合适位置添加一个<div>或<span>标记，设置该标记的id属性，如div_result，然后在回调函数中应用以下代码显示响应结果：

document.getElementById("div_result").innerHTML=http_request.responseText;

2、处理XML响应

如果在服务器端需要生成特别复杂的响应，那么就需要应用XML响应。应用XMLHttpRequest对象的responseXML属性，可以生成一个XML文档，而且当前浏览器已经提供了很好的解析XML文档对象的方法。

例：保存图书信息的XML文档。具体代码如下：

<?xml version="1.0" encoding="UTF-8"/>
<mr>
	<books>
		<book>
			<title>Java Web开发宝典</title>
			<publisher>人民邮电出版社</publisher>
		</book>
		<book>
			<title>Java开发宝典</title>
			<publisher>机械工业出版社</publisher>
		</book>
	</books>
</mr>

在回调函数中遍历保存图书信息的XML文档，并将其显示到页面中的代码如下：

function getResult(){
	if(http_request.readyState==4){            //判断请求状态
		if(http_request.status==200){		   //请求成功，开始处理返回结果
			var xmldoc = http_request.responseXML;
			var str = "";
			for(i=0;i<xmldoc.getElementsByTagName("book").length;i++){
				var book = xmldoc.getElementsByTagName("book").item(i);
				str=str+"《"+book.getElementsByTagName("title")[0].firstChild.data+"》由“"+book.getElementsByTagName("publisher")[0].data+"”出版<br>";
			}
			document.getElementById("book").innerHTML=str;        //显示图书信息
		}else{
			alert("您锁清秋的页面有错误！");
		}
	}
}
<div id="book"></div>

通过上面的代码获取的XML文档的信息如下：

《Java Web开发宝典》由“人民邮电出版社”出版
《Java开发宝典》由“机械工业出版社”出版