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

àì夳堔傛蜴生んèń 2022-05-12 00:28 141阅读 0赞

**一 发送请求**

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文档，并显示到页面中的代码如下：

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

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

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