AJAX核心对象XmlHttpRequest

合集下载

Ajax基础教程

Ajax基础教程

简介本文介绍一种方法,Ajax(Asynchronous JavaScript andXML,提出:Jesse James Garrett),使用它可以构建更为动态和响应更灵敏的Web应用程序。

Ajax是2005年2月才正式提出的一项综合技术,其主要特点是为Web开发提供异步的数据传输和交换方式,可以在不重载(Reload)刷新(Refresh)界面的情况下与服务器进行数据交换。

该方法的关键在于对浏览器端的JavaScript、DHTML和与服务器异步通信的组合。

如果使用得当,这种强大的力量可以使应用程序更加自然和响应灵敏(无刷新更新局部页面),从而提升用户的浏览体验。

术语Ajax用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验。

在Ajax之前,Web站点强制用户进入提交/等待/重新显示范例,用户的动作总是与服务器的“思考时间”同步。

Ajax提供与服务器异步通信的能力,从而使用户从请求/响应的循环中解脱出来。

借助于Ajax,可以在用户单击按钮时,使用JavaScript和DHTML(是利用CSS(层叠样式表),JavaScript,HTML等技术而建立的能与访问者产生互动的网页)立即更新UI,并向服务器发出异步请求,以执行更新或查询数据库。

当请求返回时,就可以使用JavaScript和CSS来相应地更新UI,而不是刷新整个页面。

最重要的是,用户甚至不知道浏览器正在与服务器通信:Web站点看起来是即时响应的虽然Ajax所需的基础架构已经出现了一段时间,但直到最近异步请求的真正威力才得到利用。

能够拥有一个响应极其灵敏的Web站点确实激动人心,因为它最终允许开发人员和设计人员使用标准的HTML/CSS/JavaScript堆栈创建“桌面风格的(desktop-like)”可用性。

Google Suggest、Google Maps所有这些Web站点都告诉我们,Web应用程序不必完全依赖于从服务器重新载入页面来向用户呈现更改。

ajp协议

ajp协议

ajp协议AJAX是Asynchronous JavaScript and XML的缩写,可以实现在不重新加载整个页面的情况下更新部分页面内容的技术。

AJAX技术的核心是使用XMLHttpRequest对象与服务器进行数据交互。

AJAX协议(AJP)是运行在超文本传输协议(HTTP)上的一种协议,用于Web服务器和Web应用服务器之间的通信。

AJAX协议的主要作用之一是提高Web应用的性能。

传统的Web应用在每次请求时都需要重新加载整个页面,而使用AJAX协议则可以只加载需要更新的部分。

这样可以减少网络传输数据量,提高Web应用的响应速度。

同时,AJAX协议还可以实现异步请求和响应,用户无需等待页面刷新就可以进行其他操作,提升用户体验。

AJAX协议的通信步骤如下:1. 客户端发送一个HTTP请求到服务器,请求的URI是一个特定的URL。

2. 服务器接收到请求,如果URL匹配AJAX协议的规则,就会创建一个AJAX会话。

否则,服务器将忽略该URL。

3. 服务器将请求转发给Web应用服务器,Web应用服务器处理请求并生成响应。

4. Web应用服务器将响应发送给服务器,服务器将响应转发给客户端。

服务器和客户端之间的通信可以使用二进制格式进行,以提高效率。

AJAX协议的特点如下:1. 高性能:通过减少网络传输量和异步请求,提高Web应用的性能。

2. 独立性:AJAX协议可以独立于具体的Web应用服务器实现,使得不同的Web应用服务器可以使用相同的AJAX协议进行通信。

3. 扩展性:AJAX协议可以扩展支持不同的功能,如会话管理、身份认证等。

4. 可靠性:AJAX协议支持连接的续约和恢复,可以在连接断开后自动重新连接。

AJAX协议的应用场景广泛,例如:1. 数据更新:AJAX协议可以实现页面的部分刷新,从而实现实时数据的更新,在各种Web应用中都得到广泛应用,如聊天应用、股票行情应用等。

2. 表单提交:AJAX协议可以实现表单的异步提交,使得用户无需等待页面刷新就可以提交表单,提升用户体验。

XMLHTTPRequest对象的创建与浏览器的兼容问题

XMLHTTPRequest对象的创建与浏览器的兼容问题

XMLHTTPRequest对象的创建与浏览器的兼容问题MLHttpRequest 对象是AJAX功能的核⼼,要开发AJAX程序必须从了解XMLHttpRequest 对象开始。

了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始,在不同的浏览器中创建XMLHttpRequest 对象使⽤不同的⽅法:先看看IE创建XMLHttpRequest 对象的⽅法(⽅法1):var xmlhttp=ActiveXobject("Msxml12.XMLHTTP");//较新的IE版本创建Msxml12.XMLHTTP对象var xmlhttp=ActiveXobject("Microsoft.XMLHTTP");//较⽼的IE版本创建Microsoft.XMLHTTP对象⽽ Mozilla、Opera、Safari 和⼤部分⾮IE的浏览器都使⽤下⾯这种⽅法(⽅法2)创建XMLHttpRequest 对象:var xmlhttp=new XMLHttpRequest();注意:实际上Internet Explorer 使⽤了⼀个名为 XMLHttp 的对象,⽽不是 XMLHttpRequest 对象,⽽ Mozilla、Opera、Safari 和⼤部分⾮Microsoft 浏览器都使⽤的是后者(下⽂统称 XMLHttpRequest 对象)。

IE7开始也开始使⽤XMLHttpRequest 对象了。

因此我们需要创建⼀个能兼容多浏览器的XMLHTTPRequest对象:第⼀种⽅法:var xmlhttp=false;//创建⼀个新变量并赋值false,使⽤false作为判断条件说明还没有创建XMLHTTPRequest对象function CreateXMLHttp(){try{xmlhttp=new XMLHttpRequest();//尝试创建 XMLHttpRequest 对象,除 IE 外的浏览器都⽀持这个⽅法。

AJAX(XMLHttpRequest)进行跨域请求方法详解

AJAX(XMLHttpRequest)进行跨域请求方法详解

发表于:2010-1-11 浏览:965 作者:转载遗失来源:网络转载关键字:AJAX,详解,请求描述:注意:以下代码请在Firefox3.5、Chrom e3.0、Safari4之后的版本中进行测试。

IE8的实现方法与其他浏览不同。

跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站点上的资源。

这种情况很常见注意:以下代码请在Firefox 3.5、Chrome 3.0、Safari 4之后的版本中进行测试。

IE8的实现方法与其他浏览不同。

跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站点上的资源。

这种情况很常见,比如说通过style 标签加载外部样式表文件、通过img 标签加载外部图片、通过 script 标签加载外部脚本文件、通过Webfont 加载字体文件等等。

默认情况下,脚本访问文档属性等数据采用的是同源策略(Same origin policy)。

那么,什么是同源策略呢?如果两个页面的协议、域名和端口是完全相同的,那么它们就是同源的。

同源策略是为了防止从一个地址加载的文档或脚本访问或者设置从另外一个地址加载的文档的属性。

如果两个页面的主域名相同,则还可以通过设置document.domain 属性将它们认为是同源的。

随着Web2.0 和SNS 的兴起,Web 应用对跨域访问的需求也越来越多,但是,在脚本中进行跨域请求是受安全性限制的,Web 开发人员迫切需要提供一种更安全、方便的跨域请求方式来融合(Mashup)自己的Web 应用。

这样做的一个好处就是可以将请求分摊到不同的服务器,减轻单个服务器压力以提高响应速度;另外一个好处是可以将不同的业务逻辑分布到不同的服务器上以降低负载。

值得庆幸的是,跨域请求的标准已经出台,主流浏览器也已经实现了这一标准。

W3C 工作组中的 Web Applications Working Group(Web 应用工作组)发布了一个Cross-Origin Resource Sharing(跨域资源共享,该规范地址:/TR/access-control/和/2006/waf/access-control/)推荐规范来解决跨域请求的问题。

简述ajax的工作原理、同步请求和异步请求

简述ajax的工作原理、同步请求和异步请求

AJAX(Asynchronous JavaScript and XML)是一种使用异步请求的技术,使得网页可以在不重新加载整个页面的情况下,与服务器进行通信和交换数据。

这样,就可以在不中断用户操作的情况下,更新部分网页内容。

AJAX 的工作原理:1. 创建 XMLHttpRequest 对象:AJAX 使用 XMLHttpRequest 对象来发送异步请求。

XMLHttpRequest 对象是所有现代浏览器(包括 Internet Explorer 7 及更高版本)都支持的一种对象。

2. 初始化 AJAX 请求:使用 XMLHttpRequest 对象的 open() 方法来指定请求的 URL、请求类型(如 GET 或 POST)、是否异步处理等。

3. 发送 AJAX 请求:使用 XMLHttpRequest 对象的 send() 方法来发送请求。

如果是 GET 请求,可以在 send() 方法的参数中传递查询字符串;如果是POST 请求,可以在 send() 方法的参数中传递要发送的数据。

4. 处理服务器响应:在 XMLHttpRequest 对象接收到服务器响应后,可以通过注册的 onreadystatechange 事件处理程序来处理响应数据。

当请求成功完成时(状态码为 200),responseText 属性将包含服务器的响应文本。

5. 更新网页内容:在收到服务器响应后,可以使用 JavaScript 来更新网页的内容,以反映服务器响应的数据。

同步请求和异步请求:* 同步请求:在同步请求中,浏览器会停止执行其他代码,直到服务器响应完成。

这意味着在等待服务器响应时,用户将无法使用浏览器。

同步请求通常用于提交表单数据,因为这需要等待服务器响应才能继续。

* 异步请求:在异步请求中,浏览器不会停止执行其他代码。

当发送异步请求时,浏览器会继续执行其他代码,而不会等待服务器响应。

一旦服务器响应,可以通过注册的事件处理程序来处理响应数据。

Ajax中的XMLHttpRequest对象详解

Ajax中的XMLHttpRequest对象详解

Ajax中的XMLHttpRequest对象详解XMLHttpRequest对象是Ajax技术的核⼼。

在Internet Explorer 5中,XMLHttpRequest对象以ActiveX对象引⼊,被称之为XMLHTTP,它是⼀种⽀持异步请求的技术。

后来Mozilla、Netscape、Safari、Firefox和其他浏览器也提供了XMLHttpRequest类,虽然这些浏览器都提供了XMLHttpRequest类,但它们创建XMLHttpRequest类的⽅法并不相同。

XMLHttpRequest使我们可以使⽤JavaScript向服务器提出请求并处理响应,⽽不阻塞⽤户的其他操作。

不刷新页⾯就和服务器进⾏交互是Ajax最⼤的特点。

这个重要的特点主要归功于XMLHttpRequest对象。

使⽤XMLHttpRequest对象使得⽹页应⽤程序像windows应⽤程序⼀样,能够及时响应⽤户与服务器之间的交互,不必进⾏页⾯刷新或者跳转,并且能够进⾏⼀系列的数据处理,这些功能可以使⽤户的等待时间缩短,同时也减轻了服务器端的负载。

⽬前XMLHttpRequest对象已经得到了⼤部分浏览器的⽀持,因此使⽤Ajax技术开发Web应⽤程序的时候⼀般情况下不会出现问题。

不过,当开发⼈员确定使⽤Ajax技术来开发时,仍然需要考虑⽤户会使⽤什么样的浏览器来对⽹站进⾏访问,虽然不⽀持XMLHttpRequest对象的浏览器占少数。

在使⽤XMLHttpRequest对象向服务器发送请求和处理响应之前,必修先⽤JavaScript创建⼀个XMLHttpRequest对象,然后通过这个对象来和服务器建⽴请求并接收服务器返回的数据。

由于XMLHttpRequest不是⼀个W3C标准,所以可以采⽤多种⽅法使⽤JavaScript来创建XMLHttpRequest的实例。

Internet Explorer把XMLHttpRequest实现为⼀个ActiveX对象,其他浏览器(如Firefox、Safari和Opera等)把它实现为⼀个本地JavaScript对象。

ajax底层原理

ajax底层原理Ajax(Asynchronous Javascript and XML)是一种用于在Web 应用程序中实现异步通信的技术。

它的底层原理是通过使用JavaScript和XMLHttpRequest对象与服务器进行数据交互,从而实现页面无需刷新即可动态更新内容的效果。

Ajax的工作原理可以简单概括为以下几个步骤:1. 创建XMLHttpRequest对象:在使用Ajax之前,首先需要创建一个XMLHttpRequest对象。

这个对象是浏览器提供的用于与服务器进行通信的接口。

在不同的浏览器中,创建XMLHttpRequest对象的方式可能会有所不同。

2. 发送请求:一旦创建了XMLHttpRequest对象,就可以使用它来发送请求。

Ajax可以使用GET或POST方法发送请求,具体使用哪种方法取决于开发者的需求。

发送请求时还可以附带一些数据,比如表单中的数据,以便服务器端进行处理。

3. 接收响应:当服务器接收到请求并处理完毕后,会将相应的数据返回给客户端。

客户端通过监听XMLHttpRequest对象的onreadystatechange事件来获取服务器的响应。

当readyState属性的值为4时,表示服务器的响应已经完全接收。

4. 更新页面:一旦接收到服务器的响应,就可以使用JavaScript来处理返回的数据,并将其更新到页面中的相应位置。

这样就实现了页面的动态更新,而无需刷新整个页面。

Ajax的底层原理是基于浏览器提供的XMLHttpRequest对象实现的。

XMLHttpRequest对象的核心功能是可以在不刷新整个页面的情况下与服务器进行数据交互。

通过使用这个对象,可以异步地向服务器发送请求,接收服务器的响应,并在页面上实时地更新内容。

Ajax的优势在于提高了用户的体验,减少了不必要的页面刷新。

由于只更新页面的一部分内容,可以大大减少数据传输量,提高了页面的加载速度。

此外,Ajax还可以实现与服务器的实时通信,比如聊天室、在线游戏等功能。

ajax技术原理

ajax技术原理Ajax是一种用于创建交互式Web应用程序的技术,它可以让Web页面可以在不刷新整个页面的情况下向服务器发送请求并获取数据,然后在页面中动态地显示它们。

Ajax技术是基于多种技术的复杂集成,它涉及到浏览器端JavaScript、DOM、XMLHttpRequest对象、服务器端脚本等多个方面。

本文将针对Ajax技术的原理、工作流程、技术架构等方面进行详细的介绍。

一、Ajax技术的原理Ajax全称为Asynchronous JavaScript and XML,它最初是由Jesse James Garrett提出的一种Web开发技术,Ajax技术的核心思想是使用JavaScript和XMLHttpRequest对象来与服务器异步通信,从而实现页面的更新,而不需要刷新整个页面。

在使用Ajax技术前,Web应用程序需要刷新整个页面,同时每次页面刷新会向服务器发送一次请求,导致页面响应延迟,影响用户体验。

而使用Ajax技术后,浏览器可以只更新部分页面,不需要刷新整个页面,同时可以多次向服务器请求数据。

Ajax技术的原理是基于JavaScript语言,通过JavaScript语法实现浏览器与服务器之间的异步通信。

在Web页面中,我们可以通过JavaScript创建一个XMLHttpRequest对象,然后使用该对象向服务器发送请求并获取数据。

发送的请求类型可以是各种不同的请求类型,比如GET、POST、PUT、DELETE等。

服务器接收到请求后,会对请求进行处理,并将响应数据返回给浏览器。

浏览器接收到响应数据后,就可以将其显示到页面中,完成页面的更新,而不需要刷新整个页面。

二、Ajax技术的工作流程Ajax技术的工作流程是由浏览器端和服务器端两部分组成。

浏览器端负责通过JavaScript创建XMLHttpRequest 对象,然后向服务器发送HTTP请求。

在服务器端,接收到HTTP请求后,服务器会根据请求类型进行相应的处理,然后将处理结果返回给浏览器。

XMLHttpRequest对象五步使用法

在Ajax应用程序中,XmlHttpRequest对象负责将用户信息以异步通信地发送到服务器端,并接收服务器返回的响应信息和数据。

XMLHttpRequest简介XMLHttpRequest可以提供不重新加载页面的情况下更新网页,在页面加载后在客户端向服务器请求数据,在页面加载后在服务器端接受数据,在后台向客户端发送数据。

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。

XMLHttpRequest 可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个DOM 文档形式返回内容。

尽管名为 XMLHttpRequest,它并不限于和XML 文档一起使用:它可以接收任何形式的文本文档。

XMLHttpRequest 对象是名为 AJAX 的Web 应用程序架构的一项关键功能。

XMLHttpRequest和JavascriptJavascript本身并未具备向服务器发送请求的能力,要么使用window.open()方法重新打开一个页面向服务器提交请求,要么使用XMLHttpRequest对象发送请求。

不同的是,前者是普通的即同步交互模式,而后者是异步交互方式。

XMLHttpRequest提供了一系列的属性和方法,来向服务器发送异步的http请求;在服务器处理用户请求的过程中,XMLHttpRequest通过属性的状态值来实时反映http请求所处的状态,并根据这些状态指示Javascript做相应的处理;当服务器顺利完成响应用户行为的动作、并将响应数据返回时,XMLHttpRequest提供的response系列方法,可以将这些响应数据以文本、XML Document对象、Ado Stream对象或者unsignedbyte数组的方式组装起来,提供给Javascript处理。

XMLHttpRequest的五步使用法:1、建立XMLHttpRequest对象2、注册回调函数3、使用open方法社会自和服务器端交互的基本信息4、设置发送的数据,开始和服务器端交互5、在回调函数中判断交互是否结束,响应是否正确,并根据需要过去服务器端返回的数据,更新页面内容下面我们以用户名确认来实现XMLHttpRequest的五步使用法:<!DOCTYPE html><html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript">var xmlhttp;function submit(){//1.创建XHLHttpRequest对象if(window.XMLHttpRequest){//alert("IE7,IE8 ,FireFox。

js 原生ajax请求方法

js 原生ajax请求方法JavaScript原生AJAX请求方法AJAX(Asynchronous JavaScript and XML)是一种用于在网页中进行异步数据交互的技术。

通过AJAX,可以在不刷新整个页面的情况下,通过与服务器进行数据交换,更新部分页面的内容。

在JavaScript中,可以使用原生的AJAX请求方法来实现与服务器的数据交互。

下面将介绍几种常用的原生AJAX请求方法。

1. XMLHttpRequest对象XMLHttpRequest对象是原生AJAX请求的核心。

它提供了一组用于发送和接收HTTP请求的方法和属性。

需要创建一个XMLHttpRequest对象:```javascriptvar xhr = new XMLHttpRequest();```然后,可以使用该对象的open()方法指定请求的类型、URL和是否异步:```javascriptxhr.open('GET', '/api/data', true);```接下来,可以使用该对象的send()方法发送请求:```javascriptxhr.send();```发送请求后,可以通过监听该对象的readystatechange事件来获取服务器的响应:```javascriptxhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {var response = xhr.responseText;// 处理服务器的响应数据}};```2. fetch函数fetch函数是ES6引入的新特性,也可以用于发送AJAX请求。

它使用Promise对象来处理异步操作。

使用fetch函数发送GET请求:```javascriptfetch('/api/data').then(function(response) {if (response.ok) {return response.json();} else {throw new Error('Network response was not ok.'); }}).then(function(data) {// 处理服务器的响应数据}).catch(function(error) {// 处理错误});```使用fetch函数发送POST请求:```javascriptfetch('/api/data', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(data)}).then(function(response) {if (response.ok) {return response.json();} else {throw new Error('Network response was not ok.');}}).then(function(data) {// 处理服务器的响应数据}).catch(function(error) {// 处理错误});```3. axios库axios是一个流行的第三方库,用于发送AJAX请求。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

AJAX核心对象--XMLHttpRequest对象使用详解(一)作者:Brett McLaughlin多数Web应用程序都使用请求/响应模型从服务器上获得完整的HTML页面。

常常是点击一个按钮,等待服务器响应,再点击另一个按钮,然后再等待,这样一个反复的过程。

有了Ajax和XMLHttpReq uest对象,就可以使用不必让用户等待服务器响应的请求/响应模型了。

本文中,Brett McLaughlin介绍了如何创建能够适应不同浏览器的XMLHttpRequest实例,建立和发送请求,并响应服务器。

本文中,您将开始接触最基本和基础性的有关Ajax的全部对象和编程方法:XMLHttpRequest对象。

该对象实际上仅仅是一个跨越所有Ajax应用程序的公共线程,您可能已经预料到,只有彻底理解该对象才能充分发挥编程的潜力。

事实上,有时您会发现,要正确地使用XMLHttpRequest,显然不能使用XMLHttpRequest。

这到底是怎么回事呢?Web2.0一瞥在深入研究代码之前首先看看最近的观点——一定要十分清楚Web2.0这个概念。

听到Web2. 0这个词的时候,应该首先问一问“Web1.0是什么?”虽然很少听人提到Web1.0,实际上它指的就是具有完全不同的请求和响应模型的传统Web。

比如,到网站上点击一个按钮或者输入搜索项。

就会对服务器发送一个请求,然后响应再返回到浏览器。

该请求不仅仅是图书和书目列表,而是另一个完整的HTML页面。

因此当Web浏览器用新的HTML页面重绘时,可能会看到闪烁或抖动。

事实上,通过看到的每个新页面可以清晰地看到请求和响应。

Web2.0(在很大程度上)消除了这种看得见的往复交互。

比如访问Google Maps或Flickr这样的站点(到这些支持Web2.0和Ajax站点的链接请参阅参考资料)。

比如在Google Maps上,您可以拖动地图,放大和缩小,只有很少的重绘操作。

当然这里仍然有请求和响应,只不过都藏到了幕后。

作为用户,体验更加舒适,感觉很像桌面应用程序。

这种新的感受和范型就是当有人提到Web2.0时您所体会到的。

需要关心的是如何使这些新的交互成为可能。

显然,仍然需要发出请求和接收响应,但正是针对每次请求/响应交互的HTML重绘造成了缓慢、笨拙的Web交互的感受。

因此很清楚,我们需要一种方法使发送的请求和接收的响应只包含需要的数据而不是整个HTML页面。

惟一需要获得整个新HTML页面的时候就是希望用户看到新页面的时候。

但多数交互都是在已有页面上增加细节、修改主体文本或者覆盖原有数据。

这些情况下,Ajax和W eb2.0方法允许在不更新整个HTML页面的情况下发送和接收数据。

对于那些经常上网的人,这种能力可以让您的应用程序感觉更快、响应更及时,让他们不时地光顾您的网站。

XMLHttpRequest简介要真正实现这种绚丽的奇迹,必须非常熟悉一个JavaScript对象,即XMLHttpRequest。

这个小小的对象实际上已经在几种浏览器中存在一段时间了,它是本专栏今后几个月中要介绍的Web2.0、Aj ax和大部分其他内容的核心。

为了让您快速地大体了解它,下面给出将要用于该对象的很少的几个方法和属性。

·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实例。

此后就可以在函数中使用该对象了。

错误处理在实际上各种事情都可能出错,而上面的代码没有提供任何错误处理。

较好的办法是创建该对象,并在出现问题时优雅地退出。

比如,任何较早的浏览器(不论您是否相信,仍然有人在使用老版本的Netsc ape 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作为判定条件,它表示还没有创建XML HttpRequest对象。

·增加try/catch块:·尝试创建XMLHttpRequest对象。

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

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

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

代码非常简单,对大多数JavaScript和Web开发人员来说,真正理解它要比读写代码花更长的时间。

现在已经得到了一段带有错误检查的XMLHttpRequest对象创建代码,还可以告诉您哪儿出了问题。

应付Microsoft看起来似乎一切良好,至少在用Internet Explorer试验这些代码之前是这样的。

如果这样试验的话,就会看到图1所示的糟糕情形。

图1.Internet Explorer报告错误显然有什么地方不对劲,而Internet Explorer很难说是一种过时的浏览器,因为全世界有70%在使用Internet Explorer。

换句话说,如果不支持Microsoft和Internet Explorer就不会受到W eb世界的欢迎!因此我们需要采用不同的方法处理Microsoft浏览器。

经验证发现Microsoft支持Ajax,但是其XMLHttpRequest版本有不同的称呼。

事实上,它将其称为几种不同的东西。

如果使用较新版本的Internet Explorer,则需要使用对象Msxml2.XMLHTTP,而较老版本的Internet Explorer则使用Microsoft.XMLHTTP。

我们需要支持这两种对象类型(同时还要支持非Microsoft浏览器)。

请看看清单4,它在前述代码的基础上增加了对Microsoft的支持。

Microsoft参与了吗?关于Ajax和Microsoft对该领域不断增长的兴趣和参与已经有很多文章进行了介绍。

事实上,据说Microsoft最新版本的Internet Explorer——version7.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作为判断条件,它表示还没有创建XMLHttp Request对象。

·增加try/catch块:1、尝试创建XMLHttpRequest对象。

2、如果失败(catch(trymicrosoft)):1)尝试使用较新版本的Microsoft浏览器创建Microsoft兼容的对象(Msxml2.XMLHTTP)。

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

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

相关文档
最新文档