AJAX中XMLHttpRequest对象详解(3)

前端之家收集整理的这篇文章主要介绍了AJAX中XMLHttpRequest对象详解(3)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

三、发送请求

创建一个XMLHttpRequest对象

var xmlHttpReq =new XMLHttpRequest();

接下来,你需要使用Open()方法初始化XMLHttpRequest对象-指定HTTP方法和要使用的服务器URL。

xmlHttpReq.open("GET", "validateForm?catalogId=" + catalogId, true);

默认情况下,使用XMLHttpRequest发送的HTTP请求是异步进行的,但是你可以显式地把async参数设置为true,如上面所展示的。

因为你在作一个异步调用,所以你需要注册一个XMLHttpRequest对象将调用的回调事件处理器-当它的readyState值改变时调用。记住,readyState值的改变将会激发一个readystatechange事件。你可以使用onreadystatechange属性注册该回调事件处理器。

xmlHttpReq.onreadystatechange=processRequest;

然后,我们需要使用send()方法发送该请求。因为这个请求使用的是HTTP GET方法,所以,你可以在不指定参数或使用null参数的情况下调用send()方法

xmlHttpReq.send(null);


四、处理请求

在这个示例中,因为HTTP方法是GET,所以在服务器端的接收servlet将调用一个doGet()方法,这个servlet需要构造一个发送到客户端的响应;而且,这个示例返回的是XML类型,因此,它把响应的HTTP内容类型设置为text/xml并且把Cache-Control头部设置为no-cache。设置Cache-Control头部可以阻止浏览器简单地从缓存中重载页面

public voiddoGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException,IOException {
 ...
 ...
 response.setContentType("text/xml");
 response.setHeader("Cache-Control", "no-cache");
}

来自于服务器端的响应是一个XMLDOM对象,此对象将创建一个XML字符串-其中包含要在客户端进行处理的指令。另外,该XML字符串必须有一个根元素。

out.println("<catalogId>valid</catalogId>");

【注意】XMLHttpRequest对象的设计目的是为了处理由普通文本或XML组成的响应;但是,一个响应也可能是另外一种类型,如果用户代理(UA)支持这种内容类型的话。

当请求状态改变时,XMLHttpRequest对象调用使用onreadystatechange注册的事件处理器。因此,在处理该响应之前,你的事件处理器应该首先检查readyState的值和HTTP状态。当请求完成加载(readyState值为4)并且响应已经完成(HTTP状态为"OK")时,你就可以调用一个JavaScript函数来处理该响应内容。下列脚本负责在响应完成时检查相应的值并调用一个processResponse()方法

functionprocessRequest(){
 if(xmlHttpReq.readyState==4){
  if(xmlHttpReq.status==200){
    processResponse();
  }
 }
}

该processResponse()方法使用XMLHttpRequest对象的responseXML和responseText属性来检索HTTP响应。如上面所解释的,仅当在响应的媒体类型是text/xml,application/xml或以+xml结尾时,这个responseXML才可用。这个responseText属性将以普通文本形式返回响应。对于一个XML响应,你将按如下方式检索内容

varmsg=xmlHttpReq.responseXML;

借助于存储在msg变量中的XML,你可以使用DOM方法getElementsByTagName()来检索该元素的值:

varcatalogId=msg.getElementsByTagName("catalogId")[0].firstChild.nodeValue;

原文链接:https://www.f2er.com/ajax/162463.html

猜你在找的Ajax相关文章