`
jiangzhenwei6
  • 浏览: 34532 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

window.XMLHttpRequest详解

    博客分类:
  • ajax
阅读更多
window.XMLHttpRequest详解
XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础。尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用;但是,我们仍然很有必要理解这个对象的详细工作机制。



  一、 引言

  AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息。一个经由XMLHttpRequest对象发送的HTTP请求并不要求页面中拥有或回寄一个<form>元素。AJAX中的"A"代表了"异步",这意味着XMLHttpRequest对象的send()方法可以立即返回,从而让Web页面上的其它HTML/JavaScript继续其浏览器端处理而由服务器处理HTTP请求并发送响应。尽管缺省情况下请求是异步进行的,但是,你可以选择发送同步请求,这将会暂停其它Web页面的处理,直到该页面接收到服务器的响应为止。

  微软在其Internet Explorer(IE) 5中作为一个ActiveX对象形式引入了XMLHttpRequest对象。其他的认识到这一对象重要性的浏览器制造商也都纷纷在他们的浏览器内实现了XMLHttpRequest对象,但是作为一个本地JavaScript对象而不是作为一个ActiveX对象实现。而如今,在认识到实现这一类型的价值及安全性特征之后,微软已经在其IE 7中把XMLHttpRequest实现为一个窗口对象属性。幸运的是,尽管其实现(因而也影响到调用方式)细节不同,但是,所有的浏览器实现都具有类似的功能,并且实质上是相同方法。目前,W3C组织正在努力进行XMLHttpRequest对象的标准化,并且已经发行了有关该W3C规范的一个草案。





 二、 XMLHttpRequest对象的属性和事件

XMLHttpRequest对象暴露各种属性、方法和事件以便于脚本处理和控制HTTP请求与响应.



readyState属性

  当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态:一直等待直到请求被处理;然后,它才接收一个响应。这样以来,脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性,如表格1所示。

  表格1.XMLHttpRequest对象的ReadyState属性值列表。

ReadyState取值 描述
0 描述一种"未初始化"状态;此时,已经创建一个XMLHttpRequest对象,但是还没有初始化。
1 描述一种"发送"状态;此时,代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
2 描述一种"发送"状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。
3 描述一种"正在接收"状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。
4 描述一种"已加载"状态;此时,响应已经被完全接收。



  onreadystatechange事件

       无论readyState值何时发生改变,XMLHttpRequest对象都会激发一个readystatechange事件。其中,onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变,该对象都将激活。

 

  responseText属性

         这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时,responseText包含一个空字符串。当readyState值为3(正在接收)时,响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时,该responseText包含完整的响应信息。



  responseXML属性

         此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应;此时,Content-Type头部指定MIME(媒体)类型为text/xml,application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一,那么responseXML的值为null。无论何时,只要readyState值不为4,那么该responseXML的值也为null。

  其实,这个responseXML属性值是一个文档接口类型的对象,用来描述被分析的文档。如果文档不能被分析(例如,如果文档不是良构的或不支持文档相应的字符编码),那么responseXML的值将为null。



  status属性

          这个status属性描述了HTTP状态代码,而且其类型为short。而且,仅当readyState值为3(正在接收中)或4(已加载)时,这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。



  statusText属性

  这个statusText属性描述了HTTP状态代码文本;并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。





三、 XMLHttpRequest对象的方法

  XMLHttpRequest对象提供了各种方法用于初始化和处理HTTP请求,下列将逐个展开详细讨论。



  abort()方法

  你可以使用这个abort()方法来暂停与一个XMLHttpRequest对象相联系的HTTP请求,从而把该对象复位到未初始化状态。



  open()方法

  你需要调用open(DOMString method,DOMString uri,boolean async,DOMString username,DOMString password)方法初始化一个XMLHttpRequest对象。其中,method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET,POST,PUT,DELETE或HEAD)。为了把数据发送到服务器,应该使用POST方法;为了从服务器端检索数据,应该使用GET方法。另外,uri参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URI。借助于window.document.baseURI属性,该uri被解析为一个绝对的URI-换句话说,你可以使用相对的URI-它将使用与浏览器解析相对的URI一样的方式被解析。async参数指定是否请求是异步的-缺省值为true。为了发送一个同步请求,需要把这个参数设置为false。对于要求认证的服务器,你可以提供可选的用户名和口令参数。在调用open()方法后,XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把responseText、responseXML、status和statusText属性复位到它们的初始值。另外,它还复位请求头部。注意,如果你调用open()方法并且此时readyState为4,则XMLHttpRequest对象将复位这些值。



  send()方法

  在通过调用open()方法准备好一个请求之后,你需要把该请求发送到服务器。仅当readyState值为1时,你才可以调用send()方法;否则的话,XMLHttpRequest对象将引发一个异常。该请求被使用提供给open()方法的参数发送到服务器。当async参数为true时,send()方法立即返回,从而允许其它客户端脚本处理继续。在调用send()方法后,XMLHttpRequest对象把readyState的值设置为2(发送)。当服务器响应时,在接收消息体之前,如果存在任何消息体的话,XMLHttpRequest对象将把readyState设置为3(正在接收中)。当请求完成加载时,它把readyState设置为4(已加载)。对于一个HEAD类型的请求,它将在把readyState值设置为3后再立即把它设置为4。

  send()方法使用一个可选的参数-该参数可以包含可变类型的数据。典型地,你使用它并通过POST方法把数据发送到服务器。另外,你可以显式地使用null参数调用send()方法,这与不用参数调用它一样。对于大多数其它的数据类型,在调用send()方法之前,应该使用setRequestHeader()方法(见后面的解释)先设置Content-Type头部。如果在send(data)方法中的data参数的类型为DOMString,那么,数据将被编码为UTF-8。如果数据是Document类型,那么将使用由data.xmlEncoding指定的编码串行化该数据。



  setRequestHeader()方法

  该setRequestHeader(DOMString header,DOMString value)方法用来设置请求的头部信息。当readyState值为1时,你可以在调用open()方法后调用这个方法;否则,你将得到一个异常。



  getResponseHeader()方法

  getResponseHeader(DOMString header,value)方法用于检索响应的头部值。仅当readyState值是3或4(换句话说,在响应头部可用以后)时,才可以调用这个方法;否则,该方法返回一个空字符串。



  getAllResponseHeaders()方法

  该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部(每一个头部占单独的一行)。如果readyState的值不是3或4,则该方法返回null。





        在使用XMLHTTPRequest对象发送请求和处理响应之前,我们必须要用javascript创建一个XMLHTTPRequest对象。(IE把XMLHTTPRequest实现为一个ActiveX对象,其他的浏览器[如Firefox/Safari/Opear]则把它实现为一个本地的javascript对象)。下面我们就来看看具体怎么运用javascript来创建它吧



Js代码
<SPAN style="FONT-SIZE: small"><script language="javascript" type="text/javascript">  
<!--  
    var xmlhttp;  
    // 创建XMLHTTPRequest对象  
    function createXMLHTTPRequest(){  
        if(window.ActiveXObject){ // 判断是否支持ActiveX控件  
            xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // 通过实例化ActiveXObject的一个新实例来创建XMLHTTPRequest对象  
    }  
    else if(window.XMLHTTPRequest){ // 判断是否把XMLHTTPRequest实现为一个本地javascript对象  
        xmlhttp = new XMLHTTPRequest(); // 创建XMLHTTPRequest的一个实例(本地javascript对象)  
    }  
    }  
//-->  
</script></SPAN> 

<script language="javascript" type="text/javascript">
<!--
    var xmlhttp;
    // 创建XMLHTTPRequest对象
    function createXMLHTTPRequest(){
        if(window.ActiveXObject){ // 判断是否支持ActiveX控件
            xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // 通过实例化ActiveXObject的一个新实例来创建XMLHTTPRequest对象
    }
    else if(window.XMLHTTPRequest){ // 判断是否把XMLHTTPRequest实现为一个本地javascript对象
        xmlhttp = new XMLHTTPRequest(); // 创建XMLHTTPRequest的一个实例(本地javascript对象)
    }
    }
//-->
</script>
分享到:
评论

相关推荐

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

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

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

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

    XMLHttpRequest对象

    ### XMLHTTPRequest对象详解 在现代Web开发中,Ajax(Asynchronous JavaScript and XML)技术的应用非常广泛,它使得网页能够实现局部刷新,提升了用户体验。而这一切的基础便是`XMLHttpRequest`对象,一个用于在...

    js get和post请求实现代码解析.docx

    ### JavaScript中的GET与POST请求详解 在Web开发中,客户端与服务器之间的数据交换至关重要。JavaScript提供了多种方式来发送HTTP请求,其中最常用的就是GET和POST请求。这两种请求方式各有特点,适用于不同的场景...

    XMLHttpRequest

    ### XMLHttpRequest与DWR AJAX异步请求详解 #### 一、XMLHttpRequest简介 `XMLHttpRequest`是一种在浏览器端执行异步请求的技术,它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分页面内容。这...

    ajax原理,xmlHttpRequest

    ### AJAX原理与XMLHttpRequest详解 #### 一、引言 AJAX(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。其核心在于使用`XMLHttpRequest`...

    XMLHTTPREQUEST

    ### XMLHTTPRequest对象详解 在现代Web开发中,客户端与服务器之间的数据交换是非常常见的需求之一。为了实现这种异步数据通信,JavaScript提供了一种强大的工具——`XMLHTTPRequest`对象。通过这个对象,开发者...

    AJAX开发模板

    - 使用 `if (window.XMLHttpRequest)` 判断浏览器是否支持标准的 XMLHttpRequest 对象。 - 如果浏览器是IE,则尝试使用 ActiveXObject 来创建对象。 - 如果最终没有创建成功 XMLHttpRequest 对象,则弹出错误提示。 ...

    好用的AJAX类代码分享

    if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); // 非IE浏览器创建方式 } else if (window.ActiveXObject) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // IE新版本创建方式 } ...

    Ajax基础详解教程(二)

    在上篇文章给大家介绍了Ajax基础详解教程(一),讲到Ajax中open...if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject(‘Microsoft.XMLHTTP'); } xhr.open('get','1.txt',true)

    ajax使用例子

    ### AJAX使用例子详解 在现代Web开发中,异步JavaScript和XML(AJAX)是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新,这意味着可以在不重新加载整个页面的...

    ajax五步法

    ### AJAX五步法详解 **一、创建XMLHttpRequest对象** 在使用AJAX进行异步通信时,第一步至关重要,即创建`XMLHttpRequest`对象。此对象是实现AJAX的核心,允许JavaScript执行HTTP请求,无需重新加载整个网页即可与...

    ajax用法文档

    ### Ajax技术详解与应用 #### 一、Ajax概述 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它不是一种单一的技术或语言,而是一系列现有技术和标准的...

    php和AJAX.

    #### 四、XMLHttpRequest对象详解 **作用**:`XMLHttpRequest`对象是AJAX的核心组件,负责发送HTTP请求和接收响应。 **兼容性问题**: - **不同浏览器支持不同**:早期版本的IE使用`ActiveXObject`,现代浏览器...

    Ajax程序设计入门

    #### 四、XMLHttpRequest详解 **1. XMLHttpRequest对象简介** - XMLHttpRequest 是一个内置的浏览器对象,它提供了发送异步HTTP请求的功能。通过它可以实现与服务器的后台交互而无需重新加载页面。 - **IE支持**...

    Ajax详解入门最新教程

    if (window.XMLHttpRequest) { // 对于非IE浏览器 xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { // 对于IE浏览器 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } ``` 一旦...

    详解Ajax的基本原理

    } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } ``` 此代码检查浏览器类型,如果是IE,则使用ActiveXObject,否则使用内置的XMLHttpRequest对象。 **发送和接收数据** 发送请求...

    ajax原理文档说明txt格式

    if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } // 对于IE浏览器 else if (window.ActiveXObject) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try { ...

Global site tag (gtag.js) - Google Analytics