`
hjy2099
  • 浏览: 262567 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

[转自天极网]全面剖析XMLHttpRequest对象-4

    博客分类:
  • Ajax
阅读更多

五、 处理请求

  在这个示例中,因为HTTP方法是GET,所以在服务器端的接收servlet将调用一个doGet()方法,该方法将检索在URL中指定的catalogId参数值,并且从一个数据库中检查它的有效性。

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

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


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

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


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

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

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


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

var msg=xmlHttpReq.responseXML;


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

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


  最后,通过更新Web页面的validationMessage div中的HTML内容并借助于innerHTML属性,你可以测试该元素值以创建一个要显示的消息:

if(catalogId=="valid"){
 var validationMessage = document.getElementById("validationMessage");
 validationMessage.innerHTML = "Catalog Id is Valid";
}
else
{
 var validationMessage = document.getElementById("validationMessage");
 validationMessage.innerHTML = "Catalog Id is not Valid";
}


  六、 小结

  上面就是XMLHttpRequest对象使用的所有细节实现。通过不必把Web页面寄送到服务器而实现数据传送,XMLHttpRequest对象为客户端与服务器之间提供了一种动态的交互能力。你可以使用JavaScript启动一个请求并处理相应的返回值,然后使用浏览器的DOM方法更新页面中的数据。

分享到:
评论

相关推荐

    全面剖析XMLHttpRequest对象

    ### 全面剖析XMLHttpRequest对象 #### 引言 随着互联网技术的发展,用户对Web应用的需求日益增长。其中,异步JavaScript与XML(AJAX)技术作为一种新兴的技术手段,在实现客户端脚本与服务器之间高效、无缝的数据...

    全面剖析XMLHttpRequest对象.doc

    ### 全面剖析XMLHttpRequest对象 #### 引言:AJAX与XMLHttpRequest的革命 XMLHttpRequest对象是现代网络开发中不可或缺的一部分,它是AJAX(Asynchronous JavaScript and XML)技术的核心,使得网页能够在不重新...

    全面剖析XMLHttpRequest对象.txt

    ### 全面剖析XMLHttpRequest对象 #### 一、XMLHttpRequest对象简介 XMLHttpRequest是一个非常重要的JavaScript对象,它允许网页向服务器发起异步请求并处理响应数据。这种技术是实现Ajax(Asynchronous JavaScript...

    XHR——XMLHttpRequest对象 - gaojun - 博客园1

    【XMLHttpRequest对象(XHR)详解】 XMLHttpRequest(XHR)对象是JavaScript中用于在后台与服务器进行异步数据交换的关键工具,它使得网页可以不需刷新就能获取或发送数据,是实现Ajax(Asynchronous JavaScript ...

    全面剖析 Ajax XMLHttpRequest对象

    XMLHttpRequest对象是Ajax技术的核心,它是现代Web应用中用于实现客户端与服务器间异步数据交换的关键组件。在不刷新整个页面的情况下,XMLHttpRequest允许开发者通过JavaScript动态更新网页内容,极大地提升了用户...

    全面剖析Ajax的XMLHttpRequest对象.doc

    Ajax 中的 XMLHttpRequest 对象 Ajax 是一种异步的 JavaScript 与 XML 技术,用于在客户端脚本与服务器之间实现数据交互过程。XMLHttpRequest 对象是 Ajax 的技术基础,尽管现在提供了各种 Ajax 框架,但是理解这个...

    Ajax深度剖析,XMLHttpRequest对象大揭秘

    在这篇深度剖析中,我们将揭开XMLHttpRequest对象的神秘面纱,探讨其工作原理、常用方法和实际应用。 XMLHttpRequest对象是Ajax技术的基础,它允许JavaScript在页面不刷新的情况下与服务器进行通信。创建一个...

    创建XMLHttpRequest对象的方法.rar

    本压缩包文件"创建XMLHttpRequest对象的方法.rar"包含了一份关于如何创建XMLHttpRequest对象的详细教程,其核心内容可以从以下几个方面来理解: 1. **XMLHttpRequest对象的创建** 在JavaScript中,XMLHttpRequest...

    XMLHttpRequest对象的介绍和实现

    ### XMLHttpRequest对象的介绍和实现 #### 一、引言 随着网络应用的发展,网页与服务器之间的交互变得越来越频繁。传统的网页交互方式往往依赖于整个页面的刷新,这不仅效率低下,而且用户体验较差。为了解决这个...

    Ajax中的XMLHttpRequest对象详解

    Ajax 中的 XMLHttpRequest 对象详解 XMLHttpRequest 对象是 Ajax 技术的核心,它是一种浏览器对象,用于模拟 HTTP 的 GET 和 POST 请求。配合 JavaScript,可以实现页面数据在无刷新下的定时更新。 XMLHttpRequest...

    Ajax 创建XMLHttpRequest对象,兼容所有主流浏览器(IE5除外)

    一般网上流传的创建XMLHttpRequest对象比较简单。跨浏览器能力非常有限。并不全面。 经测试,用此方法创建XMLHttpRequest对象,在运用AJAX的时候,可以的兼容IE6,IE7,IE8,Opera,Safari,Google Chrome,fireFox。主流...

    用js创建XMLHttpRequest对象池

    在JavaScript中,XMLHttpRequest(XHR)对象是用于在不刷新整个页面的情况下与服务器进行异步数据交换的关键工具。这种技术通常被称为Ajax(Asynchronous JavaScript and XML),尽管现在它不仅仅局限于XML,还包括...

    AJAX核心技术1-XMLHttpRequest对象的使用

    [王兴魁]AJAX核心技术1-XMLHttpRequest对象的使用

Global site tag (gtag.js) - Google Analytics