`
Eric.Yan
  • 浏览: 323246 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

AJAX核心对象-- XMLHttpRequest 对象使用详解 (一)

    博客分类:
  • ajax
阅读更多

项目暂时不是很忙,于是便有时间来学习,看牛人写的代码,ajax算是主流技术了,但以前没怎么用过,找点资料跟大家共享一下,一起进步:

 

多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的HTML 页面。常常是点击一个按钮,等待服务器响应,再点击另一个按钮,然后再等待,这样一个反复的过程。有了 Ajax 和 XMLHttpRequest 对象,就可以使用不必让用户等待服务器响应的请求/响应模型了。 本文中,Brett McLaughlin 介绍了如何创建能够适应不同浏览器的 XMLHttpRequest 实例,建立和发送请求,并响应服务器。

  本文中,您将开始接触最基本和基础性的有关 Ajax 的全部对象和编程方法:XMLHttpRequest 对象。该对象实际上仅仅是一个跨越所有 Ajax 应用程序的公共线程,您可能已经预料到,只有彻底理解该对象才能充分发挥编程的潜力。事实上,有时您会发现,要正确地使用 XMLHttpRequest,显然不能 使用 XMLHttpRequest。这到底是怎么回事呢?

  Web 2.0 一瞥

  在深入研究代码之前首先看看最近的观点 —— 一定要十分清楚 Web 2.0 这个概念。听到 Web 2.0 这个词的时候,应该首先问一问 “Web 1.0 是什么?” 虽然很少听人提到 Web 1.0,实际上它指的就是具有完全不同的请求和响应模型的传统 Web。比如,到 Amazon.com 网站上点击一个按钮或者输入搜索项。就会对服务器发送一个请求,然后响应再返回到浏览器。该请求不仅仅是图书和书目列表,而是另一个完整的 HTML 页面。因此当 Web 浏览器用新的 HTML 页面重绘时,可能会看到闪烁或抖动。事实上,通过看到的每个新页面可以清晰地看到请求和响应。

  Web 2.0(在很大程度上)消除了这种看得见的往复交互。比如访问 Google Maps 或 Flickr 这样的站点(到这些支持 Web 2.0 和 Ajax 站点的链接请参阅 参考资料)。比如在 Google Maps 上,您可以拖动地图,放大和缩小,只有很少的重绘操作。当然这里仍然有请求和响应,只不过都藏到了幕后。作为用户,体验更加舒适,感觉很像桌面应用程序。这种新的感受和范型就是当有人提到 Web 2.0 时您所体会到的。

  需要关心的是如何使这些新的交互成为可能。显然,仍然需要发出请求和接收响应,但正是针对每次请求/响应交互的 HTML 重绘造成了缓慢、笨拙的 Web 交互的感受。因此很清楚,我们需要一种方法使发送的请求和接收的响应只 包含需要的数据而不是整个 HTML 页面。惟一需要获得整个新 HTML 页面的时候就是希望用户看到 新页面的时候。

  但多数交互都是在已有页面上增加细节、修改主体文本或者覆盖原有数据。这些情况下,Ajax 和 Web 2.0 方法允许在不 更新整个 HTML 页面的情况下发送和接收数据。对于那些经常上网的人,这种能力可以让您的应用程序感觉更快、响应更及时,让他们不时地光顾您的网站。

  XMLHttpRequest 简介

  要真正实现这种绚丽的奇迹,必须非常熟悉一个JavaScript 对象,即 XMLHttpRequest。这个小小的对象实际上已经在几种浏览器中存在一段时间了,它是本专栏今后几个月中要介绍的 Web 2.0、Ajax 和大部分其他内容的核心。为了让您快速地大体了解它,下面给出将要用于该对象的很少的几个 方法和属性。

  ·open():建立到服务器的新请求。

  ·send():向服务器发送请求。

  ·abort():退出当前请求。

  ·readyState:提供当前 HTML 的就绪状态。

  ·responseText:服务器返回的请求响应文本。


  如果不了解这些(或者其中的任何 一个),您也不用担心,后面几篇文章中我们将介绍每个方法和属性。现在应该 了解的是,明确用 XMLHttpRequest 做什么。要注意这些方法和属性都与发送请求及处理响应有关。事实上,如果看到 XMLHttpRequest 的所有方法和属性,就会发现它们都 与非常简单的请求/响应模型有关。显然,我们不会遇到特别新的 GUI 对象或者创建用户交互的某种超极神秘的方法,我们将使用非常简单的请求和非常简单的响应。听起来似乎没有多少吸引力,但是用好该对象可以彻底改变您的应用程序。

  简单的 new

  首先需要创建一个新变量并赋给它一个 XMLHttpRequest 对象实例。这在 JavaScript 中很简单,只要对该对象名使用 new 关键字即可,如 清单 1 所示。

  清单 1. 创建新的 XMLHttpRequest 对象

 

 

<script language="javascript" type="text/javascript">
 var request = new XMLHttpRequest();
</script>


  不难吧?记住,JavaScript 不要求指定变量类型,因此不需要像 清单 2 那样做(在 Java 语言中可能需要这样)。

   清单 2. 创建 XMLHttpRequest 的 Java 伪代码

 

XMLHttpRequest request = new XMLHttpRequest();


  因此在 JavaScript 中用 var 创建一个变量,给它一个名字(如 “request”),然后赋给它一个新的 XMLHttpRequest 实例。此后就可以在函数中使用该对象了。

  错误处理

  在实际上各种事情都可能出错,而上面的代码没有提供任何错误处理。较好的办法是创建该对象,并在出现问题时优雅地退出。比如,任何较早的浏览器(不论您是否相信,仍然有人在使用老版本的Netscape Navigator)都不支持 XMLHttpRequest,您需要让这些用户知道有些地方出了问题。清单 3 说明如何创建该对象,以便在出现问题的时候发出 JavaScript 警告。

  清单 3. 创建具有错误处理能力的 XMLHttpRequest

 

<script language="javascript" type="text/javascript">
 var request = false;
 try {
  request = new XMLHttpRequest();
 } catch (failed) {
  request = false;
 }

 if (!request)
  alert("Error initializing XMLHttpRequest!");
</script>


  一定要理解这些步骤:

  创建一个新变量 request 并赋值 false。后面将使用 false 作为判定条件,它表示还没有创建 XMLHttpRequest 对象。

  ·增加 try/catch 块:

  ·尝试创建 XMLHttpRequest 对象。

    1、如果失败(catch (failed))则保证 request 的值仍然为 false。

    2、检查 request 是否仍为 false(如果一切正常就不会是 false)。

  ·如果出现问题(request 是 false)则使用 JavaScript 警告通知用户出现了问题。

  代码非常简单,对大多数 JavaScript 和 Web 开发人员来说,真正理解它要比读写代码花更长的时间。现在已经得到了一段带有错误检查的 XMLHttpRequest 对象创建代码,还可以告诉您哪儿出了问题。

应付 Microsoft

  看起来似乎一切良好,至少在用 Internet Explorer 试验这些代码之前是这样的。如果这样试验的话,就会看到 图 1 所示的糟糕情形。

 

使用JavaScript和AJAX发出异步请求(图一) 
图 1. Internet Explorer 报告错误




  显然有什么地方不对劲,而 Internet Explorer 很难说是一种过时的浏览器,因为全世界有 70% 在使用 Internet Explorer。换句话说,如果不支持 Microsoft 和 Internet Explorer 就不会受到 Web 世界的欢迎!因此我们需要采用不同的方法处理 Microsoft 浏览器。

  经验证发现 Microsoft 支持 Ajax,但是其 XMLHttpRequest 版本有不同的称呼。事实上,它将其称为几种 不同的东西。如果使用较新版本的 Internet Explorer,则需要使用对象 Msxml2.XMLHTTP,而较老版本的 Internet Explorer 则使用 Microsoft.XMLHTTP。我们需要支持这两种对象类型(同时还要支持非 Microsoft 浏览器)。请看看 清单 4,它在前述代码的基础上增加了对 Microsoft 的支持。

  Microsoft 参与了吗?

  关于 Ajax 和 Microsoft 对该领域不断增长的兴趣和参与已经有很多文章进行了介绍。事实上,据说 Microsoft 最新版本的 Internet Explorer —— version 7.0,将在 2006 年下半年推出 —— 将开始直接支持 XMLHttpRequest,让您使用 new 关键字代替所有的 Msxml2.XMLHTTP 创建代码。但不要太激动,仍然需要支持旧的浏览器,因此跨浏览器代码不会很快消失。


  清单 4. 增加对 Microsoft 浏览器的支持

 

<script language="javascript" type="text/javascript">
 var request = false;
 try {
  request = new XMLHttpRequest();
 } catch (trymicrosoft) {
  try {
   request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (othermicrosoft) {
   try {
    request = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (failed) {
    request = false;
   }
  }
 }

 if (!request)
  alert("Error initializing XMLHttpRequest!");
</script>


  很容易被这些花括号迷住了眼睛,因此下面分别介绍每一步:

  ·创建一个新变量 request 并赋值 false。使用 false 作为判断条件,它表示还没有创建 XMLHttpRequest 对象。

  ·增加 try/catch 块:

   1、尝试创建 XMLHttpRequest 对象。

   2、如果失败(catch (trymicrosoft)):

    1) 尝试使用较新版本的 Microsoft 浏览器创建 Microsoft 兼容的对象(Msxml2.XMLHTTP)。

    2) 如果失败(catch (othermicrosoft))尝试使用较老版本的 Microsoft 浏览器创建 Microsoft 兼容的对象(Microsoft.XMLHTTP)。

    3) 如果失败(catch (failed))则保证 request 的值仍然为 false。

  ·检查 request 是否仍然为 false(如果一切顺利就不会是 false)。

  ·如果出现问题(request 是 false)则使用 JavaScript 警告通知用户出现了问题。

  这样修改代码之后再使用 Internet Explorer 试验,就应该看到已经创建的表单(没有错误消息)。我实验的结果如 图 2 所示。

 

使用JavaScript和AJAX发出异步请求(图二) 
图 2. Internet Explorer 正常工作


  静态与动态

  再看一看清单 1、3 和 4,注意,所有这些代码都直接嵌套在 script 标记中。像这种不放到方法或函数体中的 JavaScript 代码称为静态 JavaScript。就是说代码是在页面显示给用户之前的某个时候运行。(虽然根据规范不能完全精确地 知道这些代码何时运行对浏览器有什么影响,但是可以保证这些代码在用户能够与页面交互之前运行。)这也是多数 Ajax 程序员创建 XMLHttpRequest 对象的一般方式。

  就是说,也可以像 清单 5 那样将这些代码放在一个方法中。

   清单 5. 将 XMLHttpRequest 创建代码移动到方法中

 

<script language="javascript" type="text/javascript">

var request;

function createRequest() {
 try {
  request = new XMLHttpRequest();
 } catch (trymicrosoft) {
  try {
   request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (othermicrosoft) {
   try {
    request = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (failed) {
    request = false;
   }
  }
 }

 if (!request)
  alert("Error initializing XMLHttpRequest!");
}
</script>


  如果按照这种方式编写代码,那么在处理 Ajax 之前需要调用该方法。因此还需要 清单 6 这样的代码。

  清单 6. 使用 XMLHttpRequest 的创建方法

 

<script language="javascript" type="text/javascript">

var request;

function createRequest() {
 try {
  request = new XMLHttpRequest();
 } catch (trymicrosoft) {
  try {
   request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (othermicrosoft) {
   try {
    request = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (failed) {
    request = false;
   }
  }
 }

 if (!request)
  alert("Error initializing XMLHttpRequest!");
}

function getCustomerInfo() {
 createRequest();
 // Do something with the request variable
}
</script>


  此代码惟一的问题是推迟了错误通知,这也是多数 Ajax 程序员不采用这一方法的原因。假设一个复杂的表单有 10 或 15 个字段、选择框等,当用户在第 14 个字段(按照表单顺序从上到下)输入文本时要激活某些 Ajax 代码。这时候运行 getCustomerInfo() 尝试创建一个 XMLHttpRequest 对象,但(对于本例来说)失败了。然后向用户显示一条警告,明确地告诉他们不能使用该应用程序。但用户已经花费了很多时间在表单中输入数据!这是非常令人讨厌的,而讨厌显然不会吸引用户再次访问您的网站。 如果使用静态 JavaScript,用户在点击页面的时候很快就会看到错误信息。这样也很烦人,是不是?可能令用户错误地认为您的 Web 应用程序不能在他的浏览器上运行。不过,当然要比他们花费了 10 分钟输入信息之后再显示同样的错误要好。因此,我建议编写静态的代码,让用户尽可能早地发现问题。

用 XMLHttpRequest 发送请求

  得到请求对象之后就可以进入请求/响应循环了。记住,XMLHttpRequest 惟一的目的是让您发送请求和接收响应。其他一切都是 JavaScriptCSS 或页面中其他代码的工作:改变用户界面、切换图像、解释服务器返回的数据。准备好 XMLHttpRequest 之后,就可以向服务器发送请求了。

  欢迎使用沙箱

  Ajax 采用一种沙箱安全模型。因此,Ajax 代码(具体来说就是 XMLHttpRequest 对象)只能对所在的同一个域发送请求。以后的文章中将进一步介绍安全和 Ajax,现在只要知道在本地机器上运行的代码只能对本地机器上的服务器端脚本发送请求。如果让 Ajax 代码在 www.breakneckpizza.com 上运行,则必须 www.breakneck.com 中运行的脚本发送请求。

  设置服务器 URL

  首先要确定连接的服务器的 URL。这并不是 Ajax 的特殊要求,但仍然是建立连接所必需的,显然现在您应该知道如何构造 URL 了。多数应用程序中都会结合一些静态数据和用户处理的表单中的数据来构造该 URL。比如,清单 7 中的 JavaScript 代码获取电话号码字段的值并用其构造 URL。

  清单 7.1 建立请求 URL

 

<script language="javascript" type="text/javascript">
var request = false;
try {
 request = new XMLHttpRequest();
} catch (trymicrosoft) {
 try {
  request = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (othermicrosoft) {
  try {
   request = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (failed) {
   request = false;
  }
 }
}

if (!request)
alert("Error initializing XMLHttpRequest!");

function getCustomerInfo() {
 var phone = document.getElementById("phone").value;
 var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
}
</script>


   清单 7.2 建立兼容IE7.0的请求

 

<script language="javascript" type="text/javascript">
var request = false;
try {
 request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (trymicrosoft) {
 try {
  request = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (othermicrosoft) {
  try {
   request = new XMLHttpRequest();

  } catch (failed) {
   request = false;
  }
 }
}

if (!request)
alert("Error initializing XMLHttpRequest!");

function getCustomerInfo() {
 var phone = document.getElementById("phone").value;
 var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
}
</script>


  这里没有难懂的地方。首先,代码创建了一个新变量 phone,并把 ID 为 “phone” 的表单字段的值赋给它。清单 8 展示了这个表单的 XHTML,其中可以看到 phone 字段及其 id 属性。

  清单 8. Break Neck Pizza 表单

 

<body>
 <p><img src="breakneck-logo_4c.gif" alt="Break Neck Pizza" /></p>
 <form action="POST">
  <p>Enter your phone number:
   <input type="text" size="14" name="phone" id="phone" onChange="getCustomerInfo();" />
  </p>
  <p>Your order will be delivered to:</p>
  <div id="address"></div>
  <p>Type your order in here:</p>
  <p><textarea name="order" rows="6" cols="50" id="order"></textarea></p>
  <p><input type="submit" value="Order Pizza" id="submit" /></p>
 </form>
</body>


  还要注意,当用户输入电话号码或者改变电话号码时,将触发 清单 8 所示的 getCustomerInfo() 方法。该方法取得电话号码并构造存储在 url 变量中的 URL 字符串。记住,由于 Ajax 代码是沙箱型的,因而只能连接到同一个域,实际上 URL 中不需要域名。该例中的脚本名为 /cgi-local/lookupCustomer.php。最后,电话号码作为 GET 参数附加到该脚本中:"phone=" + escape(phone)。

  如果以前没用见过 escape() 方法,它用于转义不能用明文正确发送的任何字符。比如,电话号码中的空格将被转换成字符 %20,从而能够在 URL 中传递这些字符。

  可以根据需要添加任意多个参数。比如,如果需要增加另一个参数,只需要将其附加到 URL 中并用 “与”(&)字符分开 [第一个参数用问号(?)和脚本名分开]。

  打开请求

  有了要连接的 URL 后就可以配置请求了。可以用 XMLHttpRequest 对象的 open() 方法来完成。该方法有五个参数:

  ·request-type:发送请求的类型。典型的值是 GET 或 POST,但也可以发送 HEAD 请求。

  ·url:要连接的 URL。

  ·asynch:如果希望使用异步连接则为 true,否则为 false。该参数是可选的,默认为 true。

  ·username:如果需要身份验证,则可以在此指定用户名。该可选参数没有默认值。

  ·password:如果需要身份验证,则可以在此指定口令。该可选参数没有默认值。


  通常使用其中的前三个参数。事实上,即使需要异步连接,也应该指定第三个参数为 “true”。这是默认值,但坚持明确指定请求是异步的还是同步的更容易理解。

  将这些结合起来,通常会得到 清单 9 所示的一行代码。

  open() 是打开吗?

  Internet 开发人员对 open() 方法到底做什么没有达成一致。但它实际上并不是 打开一个请求。如果监控 XHTML/Ajax 页面及其连接脚本之间的网络和数据传递,当调用 open() 方法时将看不到任何通信。不清楚为何选用了这个名字,但显然不是一个好的选择。


  清单 9. 打开请求

 

function getCustomerInfo() {
 var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
 request.open("GET", url, true);
}


  一旦设置好了 URL,其他就简单了。多数请求使用 GET 就够了(后面的文章中将看到需要使用 POST 的情况),再加上 URL,这就是使用 open() 方法需要的全部内容了。

 

 

原文链接:http://www.cnblogs.com/meil/archive/2006/09/21/510794.html

分享到:
评论

相关推荐

    Ajax之XMLHttpRequest详解

    ### Ajax之XMLHttpRequest详解 #### 一、引言 随着互联网技术的发展,用户对Web应用的体验要求越来越高。传统的Web应用程序通常采用请求/响应模型,这意味着每次用户与页面交互(例如点击按钮)都会触发一个新的...

    ajax实例+ajax大全+Ajax的核心之xmlhttprequest

    下面是一个简单的Ajax实例,展示如何使用XMLHttpRequest对象向服务器发送GET请求并处理响应: ```javascript var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 &...

    ajax课件--------Ajax.ppt

    Ajax 技术详解 Ajax(Asynchronous JavaScript and XML)是一种异步通信技术,旨在提高 web 应用程序的响应速度和用户体验。下面是 Ajax 的详细知识点: Ajax 定义 Ajax 是一种基于 JavaScript 和 XML 的异步通信...

    HDI-AJAX-AddAjax-CS源码

    AJAX的核心是XMLHttpRequest对象,它在后台与服务器通信,而不会打断用户的交互。在"AddAjax"这个场景下,我们可能看到如何创建并使用XMLHttpRequest对象来发送异步请求,获取服务器返回的数据,并在客户端更新DOM...

    ajax4jsf-demo

    通过创建或使用XMLHttpRequest对象与服务器进行异步通信,使得用户可以无感知地获取并更新数据,改善用户体验。 **2. JavaServer Faces (JSF)** JSF是Java EE平台中的一个用于构建Web用户界面的MVC(Model-View-...

    AJAX(用法总结-精华版)

    AJAX 的核心是使用浏览器内置的 XMLHttpRequest 对象异步向服务器发送请求,并使用服务器返回的数据更新当前页面。 获得 AJAX 对象 ---------------- 要使用 AJAX,我们首先需要获得 XMLHttpRequest 对象。由于...

    ajax详解.pdf

    #### 六、XMLHttpRequest详解 - **创建对象**: `var xhr = new XMLHttpRequest();` - **配置请求**: - `xhr.open('GET', 'url', true);` - 第一个参数为HTTP方法,第二个参数为目标URL,第三个参数表示是否异步。...

    window.XMLHttpRequest详解(AJAX工作原理)1

    ### window.XMLHttpRequest详解与AJAX工作原理 #### 引言 在现代Web开发中,**AJAX**(Asynchronous JavaScript and XML)技术是一项至关重要的技术,它允许网页在不重新加载整个页面的情况下从服务器获取数据并...

    XMLHttpRequest对象详解

    总结,XMLHttpRequest对象是实现Ajax的核心,通过它我们可以实现页面无刷新的异步数据交换,提升用户体验。理解并熟练掌握XMLHttpRequest的使用,对于Web开发人员来说至关重要。通过阅读提供的"XMLHttpRequest.pdf...

    AJAX-In-Action(cn).zip_action

    - **XMLHttpRequest对象**:核心组件,负责与服务器通信。 - **DOM**:允许JavaScript访问和修改HTML或XML文档结构。 - **CSS**:用于控制页面样式和布局。 - **XML/JSON**:数据交换格式,用于传输信息。 **4....

    ajax基础3-4

    Ajax的核心是XMLHttpRequest对象,这是在浏览器中执行异步请求的基础。通过这个对象,开发者可以在后台与服务器进行数据交换,而无需用户感知页面的刷新。除了XMLHttpRequest,Ajax还涉及到JavaScript、DOM...

    window.XMLHttpRequest详解(AJAX工作原理)2

    ### window.XMLHttpRequest详解(AJAX工作原理) #### 一、简介 `window.XMLHttpRequest` 是一个内置对象,用于在浏览器端发起异步 HTTP 请求。它主要用于实现 AJAX (Asynchronous JavaScript and XML) 功能,允许...

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

    总结,XMLHttpRequest对象是JavaScript实现异步数据交换的核心工具,其创建、使用以及响应处理的理解是进行前端开发尤其是Ajax编程的基础。理解并熟练掌握XHR对象的使用,对于提升Web应用的性能和用户体验至关重要。

    基于J2EE的Ajax宝典--源代码

    1. **Ajax基本使用**:从第2章开始,可能介绍如何创建XMLHttpRequest对象,发送GET和POST请求,处理服务器响应。 2. **JSP和Servlet的整合**:第4、5、6、7、9章可能涉及JSP与Servlet的交互,讲解如何在JSP中调用...

    ajax-req-异步

    1. **XMLHttpRequest对象**:在原生的AJAX实现中,`XMLHttpRequest`对象是发起异步请求的核心。它是浏览器提供的一种API,用于客户端脚本(通常是JavaScript)与Web服务器进行交互。 - **创建对象**:`var request ...

    ajax详解教程讲述ajax原理

    Ajax 技术的核心是使用 XMLHttpRequest 对象异步地从服务器获取数据,并使用 JavaScript 和 DOM 动态更新页面内容。 Ajax 的关键技术包括: * 使用 XHTML 和 CSS 构建标准化的展示层 * 使用 DOM 进行动态显示和...

    Ajax 开发详解,Ajax开发详解

    - **XMLHttpRequest对象**:这是Ajax的核心,它允许JavaScript向服务器发送HTTP请求,并接收服务器的响应。 - **数据格式**:虽然名称中含有XML,但实际上,Ajax可以处理各种数据格式,如JSON、HTML、文本等。 2....

Global site tag (gtag.js) - Google Analytics