XMLHttpRequest对象

 1.什么是XMLHttpRequest对象

      一个页面可以通过一个HttpRequest发送一个请求来获取服务器响应，而当前页面不做刷新。

      通过使用XMLHttpRequest对象，开发人员可以在不刷新当前页面的情况下更新当前页面的数据。

     XMLHttpRequest是Ajax技术的核心，做为一种支持异步请求的技术，它并非最近才出现。微软最先在Windows IE5中将XMLHttpRequest对象应用为ActiveX对象。

   XMLHttpRequest对象允许JavaScript不需重新装载页面即可发送HTTP请求。实质上，HTTP请求是通过后台收到的响应来发送的，但是，由于没有可见的中断产生，用户完全意识不到后台的处理过程，而会继续工作。

      虽然这个对象被叫做“XML HTTP Request对象”，但它并不只局限于使用XML，它能够请求或发送任何类型的文档，虽然对于javascript来说，处理二进制流很成问题。

注：XMLHttpRequest对象不是W3C标准，不过目前已有以下浏览器支持此对象操作：IE5.0+,Safari1.2,Mozilla1.0,Firefox,Netscape7。

 

要创建XMLHttpRequest对象，可以采用以下方法：

对于IE：

代码：var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

 

对于For Mozilla, Firefox, Safari, and Netscape：

代码:var xmlhttp=new XMLHttpRequest()

 

方法                                                   描述 

abort                                     取消当前请求

 getAllResponseHeaders() 获取完整的Http header信息 

getResponseHeader(headername)  获取指定的Http header信息

open(method,url,async,user,passwd)  打开一个请求。

method-指定请求方法get或post

url-请求的url

async-指定异步请求响应。true表示发送请求后不等待回应而去执行别的操作；false表示请求后等待回应后才去继续别的操作。

user-访问用户（可选）passwd-访问密码（可选）

 

send(content)   发送请求 

setRequestHeader("label","value")  设置请求头部信息

 

属性名 描述

onreadystatechange 一个事件，用来捕获所有的状态变换

 

readyState 返回对象状态：0 = uninitialized 1 = loading 2 = loaded 3 = interactive

4 = complete

 

responseText 响应文本

 

responseXML 响应XML数据

 

status 返回状态数字（如:”404”表示“Not Found” “200”表示“OK”）。 

statusText 返回状态文本（如：“Not Found” ，“OK”）

 

1.创建一个XMLHttpRequest对象；

由于XMLHttpRequest对象不是一个W3标准，所以在不同的浏览器上会使用不同的方法创建XMLHttpRequest对象实例：在IE浏览器中被实现为一个ActiveX对象，而在其它浏览器中则是实现为一个本地的JavaScript对象。

           if (window.XMLHttpRequest) { // Mozilla, Safari,...

                    httpRequest = new XMLHttpRequest();

                    if (httpRequest.overrideMimeType) {

                        httpRequest.overrideMimeType('text/xml');

                    }

                } else if (window.ActiveXObject) { // IE

                    try {

                        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");

                    } catch (e) {

                        try {

                        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");

                        } catch (e) {}

                    }

                }

 

 

2.为XMLHttpRequest对象指定一个函数，用于处理XMLHttpRequest对象状态的改变。也就是让，方法是将某一函数的指针赋给XMLHttpRequest对象的onreadystatechange属性。该函数就是作为服务器传回数据后的回调处理函数

这里，XMLHttpRequest对象的属性onreadystatechange里存储了回调函数的指针。当XMLHttpRequest对象的状态变化时，就会调用这个函数指针所指的函数。

注：指定的函式名称后不加括号也没有参数。像这样

httpRequest.onreadystatechange = nameOfTheFunction;

除了指定函式名称外，你也能用 Javascript 即时定义函式的方法来定一个新的处理函数，如下：

httpRequest.onreadystatechange = function(){

    // 做些事

};

 

3、用XMLHttpRequest对象的open()方法跟服务器建立一个连接。

这里需要注意三点：

1）open()的第一个参数是传送方式，为遵循 HTTP 标准，请记得这些方法都应大写，不然有的浏览器（如 Firefox）或许不会理你。

2) 第二个参数是目标 URL。基于安全考量，你不能调用同网域以外的网页。如果网域不同，则调用 open() 时会出现「权限不足，拒绝存取」那类的错误。

 

4、用XMLHttpRequest对象的send()把请求发送到指定的url。该方法的唯一参数为null，向服务器发送请求。

 

首先，它必须检查 request 目前的状态：如果状态值为 4 代表服务器已经传回所有信息了，便可以开始解析所得信息。

if (http_request.readyState == 4) {

   // 一切 ok, 继续解析

} else {

   // 还没完成

}

 

 

接下来要检查服务器传回的 HTTP 状态码。

if (http_request.status == 200) {

   // 万事具备

} else {

   // 似乎有点问题，或许服务器传回了 404 (查无此页) 或者 500 (内部错误) 什么的

}

检查传回的 HTTP 状态码后，要怎么处理传回的数据就由你决定了。有两种存取数据的方式：

   * http_request.responseText – 这样会把传回值当字串用

   * http_request.responseXML – 这样会把传回值视为 XMLDocument 对象，而后可用 JavaScript DOM 相关函式处理

 

 

 

 

 

补充：什么是 XPath

XSL 使用 XPath 来标识 XML 树中需要处理的各个元素。简而言之，XPath 是用于定位 XML 元素的导航工具。它使用的语法与操作系统中文件系统路径的语法相同（例如 C:/Program Files/Macromedia/，或 /usr/bin/perl）。与此类似，XPath 表达式 company/department/employee 指向包含有关一个公司及其部门数据的 XML 文档中的 employee 元素。我们应该了解 XPath 的基本原理，以便能够在 XSL 样式表中控制 XML 数据。

 

XPath 规范基本上遵循与文件系统寻址相同的规则：如果 XPath 表达式以斜杠 (/) 开头，代表的是 XML 元素的绝对路径（从 XML 文档的根开始）。

如果 XPath 表达式以双斜杠 (//) 开头，则会选择当前文档中符合指定条件的所有元素，而不考虑它们在 XML 文档中的位置。例如，//employee 会查找 XML 文档中的所有员工节点。

星号 (*) 会选择由前面的路径定位的所有 XML 元素。例如，/company/department/* 选择一个部门的所有子节点，即该部门的所有员工。

点 (.) 选择当前的节点，两个点 (..) 选择父节点。例如，用于选择某个员工所在的部门的 XPath 表达式就是 ../employee。

要选择属性，请使用 @ 字符。例如，/company/department/employee[@retired] 选择指定了 retired 属性的所有员工。