`
icyheart
  • 浏览: 777567 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

详解AJAX核心中的XMLHttpRequest对象

    博客分类:
  • AJAX
阅读更多

XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始。

    了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始,在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法:

    先看看IE创建XMLHttpRequest 对象的方法(方法1):

 

var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  
//使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
//使用较老版本的 IE 创建 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 对象的时候如果不同的浏览器使用了不正确的方法浏览器都将会报错,并且无法使用该对象。所以我们需要一种可以兼容不同浏览器的创建XMLHttpRequest 对象的方法:

    创建兼容多浏览器的 XMLHttpRequest 对象方法

var xmlhttp = false; //创建一个新变量 request 并赋值 false。使用 false 作为判断条件,它表示还没有创建 XMLHttpRequest 对象。 
function CreateXMLHttp(){try{xmlhttp = new XMLHttpRequest();  //尝试创建 XMLHttpRequest 对象,除 IE 外的浏览器都支持这个方法。
}catch (e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  //使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)
}catch (e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.XMLHTTP)。
}catch (failed){
xmlhttp = false;  //如果失败则保证 request 的值仍然为 false。
}
}
}
return xmlhttp;
}判断是否创建成功就很简单了
if (!xmlhttp)
{//创建XMLHttpRequest 对象失败!
}else{//创建成功!}

 

 创建好了XMLHttpRequest 对象我们再来看看这个对象的方法、属性以及最重要的onreadystatechange事件句柄吧。

 

    方法:

    open() 说明:初始化 HTTP 请求参数,例如 URL 和 HTTP 方法,但是并不发送请求。

    abort() 说明:取消当前响应,关闭连接并且结束任何未决的网络活动。

    getAllResponseHeaders() 说明:把 HTTP 响应头部作为未解析的字符串返回。

    getResponseHeader() 说明:返回指定的 HTTP 响应头部的值。

    send() 说明:发送 HTTP 请求,使用传递给 open() 方法的参数,以及传递给该方法的可选请求体。

    setRequestHeader() 说明:向一个打开但未发送的请求设置或添加一个 HTTP 请求。

    属性:

    readyState 说明:HTTP 请求的状态。

    responseText 说明:目前为止为服务器接收到的响应体(不包括头部),或者如果还没有接收到数据的话,就是空字符串。

    responseXML 说明:对请求的响应,解析为 XML 并作为 Document 对象返回。

    status 说明:由服务器返回的 HTTP 状态代码。

    statusText 说明:这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。

    onreadystatechange 是每次 readyState 属性改变的时候调用的事件句柄函数。

    下面从发送请求并处理请求结果的过程来理解一下XMLHttpRequest 对象吧。

    发送请求之前自然就是生成一个XMLHttpRequest 对象,代码上面有了就不多写了。

    生成一个XMLHttpRequest 对象

 

var xmlhttp = CreateXMLHttp();

    创建好XMLHttpRequest 对象了,那我们要送请求到哪个网站呢,就选择博客园首页的RSS吧。那怎么设置我要请求的网站地址呢,使用open()方法。

    open(method, url, async, username, password)

    该方法有5个参数,具体什么意思可以看这里:http://www.w3school.com.cn/xmldom/dom_http.asp
我们用的就是这个了。

    xmlHttp.open("get","http://www.cnblogs.com",true);

    get参数表示用get方法,第二个自然就是目标地址,博客园首页,第三个就是表示是否异步了,我们当然使用true了。具体的参数说明还都可以到http://www.w3school.com.cn上面看了。

  好了,目标定好了,怎么发送呢。用send()方法?

    send(body),send()方法只有一个参数,表示DOM对象,这个DOM对象需要说明的内容很多,下次说,今天我们只要写

    xmlhttp.send();就可以了。好了,发送了,那怎么处理返回的结果呢,这个时候就用到XMLHttpRequest 对象最重要的东西了,那就是onreadystatechange事件句柄。什么意思呢,那就需要说明一下XMLHttpRequest 对象的readyState了,readyState有5种状态,分别用数字的 0 到 4 来表示。

 

状态 名称 描述
0 Uninitialized  初始化状态。XMLHttpRequest 对象已创建(未调用open()之前)或已被 abort() 方法重置。
1 Open open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。
2 Sent Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。
3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
4 Loaded HTTP 响应已经完全接收。

    但是需要注意的是,onreadystatechange事件句柄不同的浏览器能处理的状态并不一致,IE和FireFox能处理1到4,而Safari能处理2到4的状态,Opera 能处理3、4两中状态。0的状态基本没什么用,因为创建了XMLHttpRequest 对象后都会马上调用open() 方法,这时候状态就变成1了,当然除非你要判断对象是否已经被 abort() 取消,可是这样的情况依然很少。大部分情况下判断是不是4(已经接受完成)这个状态就够了。

    好了,明白了readyState有5种状态了,那处理返回结果就是看状态变更到不同的状态我们做不同的处理就可以了,怎么告诉XMLHttpRequest 对象状态变化时让谁来处理这个变化呢。有两种写法,一种是用匿名方法,另一种是指定方法,其实只是不同的写发,作用都一样,看下代码:

 

xmlhttp.onReadyStateChange = function (){
//处理状态变化的代码
}
//或者
xmlhttp.onReadyStateChange = getResult;
function getResult(){
///处理状态变化的代码
}

    顺便说一下,句柄的名称比较长,可以这样记忆 on ReadyState Change 表示在读取状态改变时请求发送了,也指定处理方法了,怎么获取返回的内容呢,有responseText和responseXML两个属性可供使用,responseXML是返回对象,需要再解析,后面再说,这里先用responseText,看看返回什么。

    alert(xmlhttp.responseText); //看看是不是返回了首页的HTML代码啊。是你就成功了。

    整个过程是:创建XMLHttpRequest 对象 -> 指定发送地址及发送方法 -> 发送请求 -> 指定处理方法并处理返回结果。但是需要注意,我们正常的思路理解是这样的,可是onreadystatechange事件句柄指定处理方法需要在发送之前就指定好,否则无法处理状态变化事件。

    所以我们应该按照下面的流程来记忆:创建XMLHttpRequest 对象 -> 指定发送地址及发送方法 -> 指定状态变化处理方法 -> 发送请求,请求发送后状态变化了就会自动调用指定的处理方法。
好了,看看完成的代码吧。

    完成的代码

var xmlhttp = false; //创建一个新变量 request 并赋值 false。使用 false 作为判断条件,它表示还没有创建 XMLHttpRequest 对象。
function CreateXMLHttp(){
try{
xmlhttp = new XMLHttpRequest();  //尝试创建 XMLHttpRequest 对象,除 IE 外的浏览器都支持这个方法。
}catch (e){
try{xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  //使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)
}catch (e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.XMLHTTP)。
}catch (failed){
xmlhttp = false;  //如果失败则保证 request 的值仍然为 false。
}
}
}
return xmlhttp;
}
xmlhttp = CreateXMLHttp();
xmlhttp.open("get","http://www.cnblogs.com",true);
xmlhttp.onReadyStateChange = getResult;xmlhttp.send();
function getResult(){
if(xmlhttp.readyState == 4){alert(xmlhttp.responseText);
}
}

 看似一切都OK了,可是有没有想过,如果HTML代码在网络传输过程中出错了,或者我们指定的地址失效会怎么样呢。这个时候就需要用到status属性,即由服务器返回的 HTTP 状态代码。 xmlhttp.status 等于200时表示传输过程完整没有错误。具体的HTTP状态代码什么意思可以到W3C组织网站上看看,地址http://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html#sec6.1.1

    把getResult()方法写成下面这样我觉的就真的OK了。

 

 function getResult(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
alert(xmlhttp.responseText);
}
}

    好了,一个本来挺简单的东西,被我写的这么多,好象很罗嗦。不过我觉的编程对基础内容的理解很重要,现在很多时候开发AJAX的程序都使用很多JS的库,不需要直接编写这么基础的代码。如使用著名的jQuery,但是如果我们对基础的东西有很好的理解,那这些库报告错误,或者出现问题我们可以很好很快的知道错在哪里,更快的做出改变使程序正常运行。

分享到:
评论

相关推荐

    Ajax之XMLHttpRequest详解

    Ajax的核心在于**XMLHttpRequest对象**,它使得Web应用程序可以在不刷新整个页面的情况下与服务器进行异步通信。 #### 二、XMLHttpRequest对象概述 XMLHttpRequest对象是实现Ajax功能的关键组件。它提供了一种在...

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

    总结,Ajax是Web开发中的重要工具,它通过XMLHttpRequest对象实现了页面的局部刷新,提升了用户体验。通过学习和实践,开发者可以更好地利用Ajax来构建高效、互动的Web应用。本资料中的Ajax实例和详解将帮助初学者...

    ajax原理,xmlHttpRequest

    AJAX的主要工作原理是利用`XMLHttpRequest`对象来向服务器发送异步请求,并从服务器获取数据,随后使用JavaScript操作DOM来更新页面中的内容。这种方式使得用户可以在不离开当前页面的情况下与服务器进行交互,大大...

    Ajax中XmlHttpRequest实例笔记

    **Ajax中的XmlHttpRequest详解** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。核心在于使用JavaScript与服务器进行异步数据交换,并且利用浏览器内置...

    XMLHttpRequest对象详解

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

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

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

    全面剖析XMLHttpRequest对象

    本文将深入探讨AJAX的核心组件——XMLHttpRequest对象,并结合实际应用场景来分析其工作原理和技术细节。 #### AJAX概述 AJAX是一种用于创建快速动态网页的技术,它通过在后台与服务器进行少量数据交换,使网页...

    ajax详解教程讲述ajax原理

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

    XMLHttpRequest对象手册.pdf

    ### XMLHttpRequest对象详解 #### 一、引言 随着互联网技术的发展与演进,网页应用从简单的静态页面逐渐向动态交互式应用转变。其中,Ajax(Asynchronous JavaScript and XML)技术的出现极大地推动了这一进程。**...

    XMLHTTPRequest对象详解

    XMLHTTPRequest对象是Web开发中用于实现异步数据通信的关键技术,尤其在JavaScript中广泛使用,使得页面无需刷新就能与服务器交换数据并更新部分内容。这一技术最初由Microsoft引入,但现在已经成为了非官方的标准,...

    ajax经典入门详解

    Ajax的核心是利用JavaScript和XMLHttpRequest对象来实现异步数据传输,为用户提供更加流畅和高效的交互体验。 **XMLHttpRequest对象** XMLHttpRequest 是一个内置在浏览器中的 JavaScript 对象,它允许JavaScript在...

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

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

    ajax详解.pdf

    ### Ajax详解知识点归纳 #### 一、Ajax概述 **1.1 什么是Ajax** - **定义**: Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)并非一项全新的技术,而是一种利用现有技术的新方法,旨在改善用户...

    AJAX XMLHttpRequest对象创建使用详解

    XMLHttpRequest(简称XHR)对象是实现AJAX的核心,它允许JavaScript与服务器进行异步数据交换。在本文中,我们将深入探讨XMLHttpRequest对象的创建和使用,以及如何向服务器发送请求。 首先,创建XMLHttpRequest...

Global site tag (gtag.js) - Google Analytics