与服务器通信——发送请求与处理响应

一 发送请求

Ajax可以通过XMLHttpRequest对象实现采用异步方式在后台发送请求。

通常情况下，Ajax发送请求有两种，一种是发送GET请求，另一种是发送POST请求。

但是无论发送哪种请求，都需要经过以下4个步骤。

1、初始化XMLHttpRequest对象。

为了提高程序的兼容性，需要创建一个跨浏览器的XMLHttpRequest对象，并且判断XMLHttpRequest对象的实例是否成功，如果不成功，则给予提示。

具体代码如下： 

http_request = false;
if (window.XMLHttpRequest) // 非IE浏览器
{                                                     
	http_request = new XMLHttpRequest();   //创建XMLHttpRequest对象
} 
else if (window.ActiveXObject)   // IE浏览器
{                                               
	try 
	{
		http_request = new ActiveXObject("Msxml2.XMLHTTP");   //创建XMLHttpRequest对象
    } 
    catch (e) 
    {
    	try 
    	{
        	http_request = new ActiveXObject("Microsoft.XMLHTTP");  //创建XMLHttpRequest对象
        } 
        catch (e) 
        {
        }
	}
}
if (!http_request) 
{
	alert("不能创建XMLHttpRequest对象实例！");
    return false;
}

 

2、为XMLHttpRequest对象指定一个返回结果处理函数（即回调函数），用于对返回结果进行处理。

具体代码如下： 

http_request.onreadystatechange = getResult;   //调用返回结果处理函数

使用XMLHttpRequest对象的onreadystatechange属性指定回调函数时，不能指定要传递的参数。

如果要指定传递的参数，可以应用以下方法：

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

3、创建一个与服务器的连接。

在创建时，需要指定发送请求的方式（即GET或POST），以及设置是否采用异步方式发送请求。

例如，采用异步方式发送GET方式的请求的具体代码如下： 

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

例如，采用异步方式发送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请求，可以通过该参数指定要发送的请求参数。

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

http_request.send(null);    //向服务器发送请求

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

var param="user="+form1.user.value+"&pwd="+form1.pwd.value+"&email="+form1.email.value; //组合参数

http_request.send(param);     //向服务器发送请求

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

if(method=="POST")  // 如果提交方式为POST

{                                                                                

http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  //设置请求的内容类型

http_request.setRequestHeader("x-requested-with", "ajax");     //设置请求的发出者

}

上面的这句代码，需要添加在http_request.send(param);语句之前。

 

二 处理服务器响应

当向服务器发送请求后，接下来就需要处理服务器响应了。

在向服务器发送请求时，需要通过XMLHttpRequest对象的onreadystatechange属性指定一个回调函数，用于处理服务器响应。

在这个回调函数中，首先需要判断服务器的请求状态，保证请求已完成，然后再根据服务器的HTTP状态码，判断服务器对请求的响应是否成功，如果成功，则获取服务器的响应，并反馈给客户端。

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

下面分别进行介绍。

1、处理字符串响应

字符串响应通常应用在响应不是特别复杂的情况下。

例如，将响应显示在提示对话框中，或者响应只是显示成功或失败的字符串。

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

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"?>
<ms>
      <books>
            <book>
                  <title>Java Web开发典型模块大全</title>
                  <publisher>人民邮电出版社</publisher>
            </book>
            <book>
                  <title>Java范例完全自学手册</title>
                  <publisher>人民邮电出版社</publisher>
            </book>
      </books>
</ms>

 

在回调函数中遍历保存图书信息的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].firstChild.data+"”出版<br>";
            }
            document.getElementById("book").innerHTML=str;             //显示图书信息
        } 
        else 	//请求页面有错误
        {                                                               
            alert("您所请求的页面有错误！");
        }
    }
}
<div id="book"></div>

 

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

《Java Web开发典型模块大全》由“人民邮电出版社”出版

《Java范例完全自学手册》由“人民邮电出版社”出版