JavaScript对象XmlHttpRequest

一、XMLHTTPRequest对象什么是什么?
最通用的定义为:
    XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。(这个功能正是AJAX的一大特点之一:)
来自MSDN的解释:
    XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft?
XML Document Object Model (DOM)处理回应。

二、XMLHttpRequest对象的属性和事件
ReadyState属性
    描述对象的当前状态
    0:"未初始化"状态;已经创建一个XMLHttpRequest对象,但是还没有初始化。
    1:"发送"状态;代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
    2:"发送"状态;已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。
    3:"正在接收"状态;已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。
    4:"已加载"状态;此时,响应已经被完全接收。
onreadystatechange事件
    无论readyState值何时发生改变,XMLHttpRequest对象都会激发一个readystatechange事件。其中,onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变,该对象都将激活。
responseText属性
    包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时,responseText包含一个空字符串。当readyState值为3(正在接收)时,响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时,该responseText包含完整的响应信息。
responseXML属性
    当接收到完整的HTTP响应时(readyState为4)描述XML响应;此时,Content-Type头部指定MIME(媒体)类型为text/xml,application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一,那么responseXML的值为null。无论何时,只要readyState值不为4,那么该responseXML的值也为null。
status属性
    描述了HTTP状态代码,而且其类型为short。而且,仅当readyState值为3(正在接收中)或4(已加载)时,这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。
statusText属性
    描述了HTTP状态代码文本;并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

三、XMLHttpRequest对象的方法

abort()方法
    暂停与一个XMLHttpRequest对象相联系的HTTP请求,从而把该对象复位到未初始化状态。
open()方法:创建一个新的http请求,并指定此请求的方法、URL以及验证信息
    调用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()方法
    以一个字符串形式返回所有的响应头部(每一个头部占单独的一行)。如果readyState的值不是3或4,则该方法返回null。

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

var xmlHttpReq = new ActiveXObject("MSXML2.XMLHTTP.3.0");
xmlHttpReq.open("GET", "http://localhost/test.xml", false);
xmlHttpReq.send();
alert(xmlHttpReq.responseText);

2)非IE浏览器使用XMLHttpRequest方式创建xmlHttp对象:

var xmlHttpReq = new XMLHttpRequest();
xmlHttpReq.open("GET", "http://localhost/test.xml", false);
xmlHttpReq.send();
alert(xmlHttpReq.responseText);

完整示例

<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对象)
        }
       xmlhttp.open("GET", "http://localhost/test.xml", false);
       //记住,readyState值的改变将会激发一个readystatechange事件。你可以使用onreadystatechange属性来注册该回调事件处理器。
        xmlhttp.onreadystatechange=ajaxok; //判断浏览器状态栏 (接收玩数据触发的事件)
    xmlhttp.send();
    alert(xmlhttp.responseText);
    }

    function ajaxok(){
       if(xmlhttp.readyState == 4 && xmlhttp.status==200)
       {
          // 表示数据已接收完成
            document.getElementById("hakecc").innerHTML = xmlHttp.responseText;
       }
    }
//-->
</script>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值