XMLHttpRequest对象在网页的客户端和服务器端之间建立介质,可以被许多脚本语言(如JavaScript,JScript,VBScript和其他Web浏览器)用来传输和操作XML数据.
使用XMLHttpRequest对象,可以更新网页的一部分而无需重新加载整个页面,在页面加载后从服务器请求和接收数据并将数据发送到服务器.
XMLHttpRequest对象可以实现如下 :
xmlhttp = new XMLHttpRequest();
要处理所有浏览器,包括IE5和IE6,请检查浏览器是否支持XMLHttpRequest对象,如下所示;
if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... { xmlHttp = new XMLHttpRequest(); } else if(window.ActiveXObject) // for Internet Explorer 5 or 6 { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }
使用XMLHttpRequest对象加载XML文件的示例可以参考这里
下表列出了XMLHttpRequest对象的方法 :
S.No. | 方法&描述 |
---|---|
1 | abort() 终止当前的请求. |
2 | getAllResponseHeaders() 以字符串形式返回所有响应头,如果没有收到响应,则返回null. |
3 | getResponseHeader() 返回包含指定标题文本的字符串,如果尚未收到响应或响应中不存在标题,则返回null. |
4 | open(method,url,async,uname,pswd) 它与Send方法共用,用于将请求发送到服务器. open方法指定以下参数 :
|
5 | 发送(字符串) 它用于发送与Open方法共轭的请求. |
6 | setRequestHeader() 标题包含标签/值对请求发送. |
下表列出了XMLHttpRequest对象的属性 :
S.No. | 属性&描述 |
---|---|
1 | onreadystatechange 这是一个基于事件的属性,在每次状态更改时设置. |
2 | readyState 这描述了XMLHttpRequest对象的当前状态. readyState属性有五种可能的状态 :
|
3 | responseText 使用此属性当来自服务器的响应是文本文件时. |
4 | responseXML 当服务器的响应是XML时使用此属性文件. |
5 | 状态 将Http请求对象的状态作为数字.例如,"404"或"200". |
6 | statusText 将Http请求对象的状态作为字符串.例如,"未找到"或"确定". |
node.xml 内容如下 :
<?xml version = "1.0"?> <Company> <Employee category = "Technical"> <FirstName>Tanmay</FirstName> <LastName>Patil</LastName> <ContactNo>1234567890</ContactNo> <Email>tanmaypatil@xyz.com</Email> </Employee> <Employee category = "Non-Technical"> <FirstName>Taniya</FirstName> <LastName>Mishra</LastName> <ContactNo>1234667898</ContactNo> <Email>taniyamishra@xyz.com</Email> </Employee> <Employee category = "Management"> <FirstName>Tanisha</FirstName> <LastName>Sharma</LastName> <ContactNo>1234562350</ContactNo> <Email>tanishasharma@xyz.com</Email> </Employee> </Company>
以下示例演示了如何使用以下方法检索资源文件的特定信息方法 getResponseHeader()和属性 readState .
<!DOCTYPE html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = iso-8859-2" /> <script> function loadXMLDoc() { var xmlHttp = null; if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... { xmlHttp = new XMLHttpRequest(); } else if(window.ActiveXObject) // for Internet Explorer 5 or 6 { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlHttp; } function makerequest(serverPage, myDiv) { var request = loadXMLDoc(); request.open("GET", serverPage); request.send(null); request.onreadystatechange = function() { if (request.readyState == 4) { document.getElementById(myDiv).innerHTML = request.getResponseHeader("Content-length"); } } } </script> </head> <body> <button type = "button" onclick="makerequest('/dom/node.xml', 'ID')">Click me to get the specific ResponseHeader</button> <div id = "ID">Specific header information is returned.</div> </body> </html>
将此文件保存为服务器路径上的 elementattribute_removeAttributeNS.htm file和node_ns.xml应位于服务器的同一路径上).我们将得到如下所示的输出 :
Before removing the attributeNS: en After removing the attributeNS: null
以下示例演示如何使用该方法检索资源文件的标头信息 getAllResponseHeaders() 使用属性 readyState .
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> <script> function loadXMLDoc() { var xmlHttp = null; if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... { xmlHttp = new XMLHttpRequest(); } else if(window.ActiveXObject) // for Internet Explorer 5 or 6 { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlHttp; } function makerequest(serverPage, myDiv) { var request = loadXMLDoc(); request.open("GET", serverPage); request.send(null); request.onreadystatechange = function() { if (request.readyState == 4) { document.getElementById(myDiv).innerHTML = request.getAllResponseHeaders(); } } } </script> </head> <body> <button type = "button" onclick = "makerequest('/dom/node.xml', 'ID')"> Click me to load the AllResponseHeaders</button> <div id = "ID"></div> </body> </html>
将此文件保存为服务器路径上的 http_allheader.html (此file和node.xml应位于服务器的同一路径上).我们将得到如下所示的输出(取决于浏览器) :
Date: Sat, 27 Sep 2014 07:48:07 GMT Server: Apache Last-Modified: Wed, 03 Sep 2014 06:35:30 GMT Etag: "464bf9-2af-50223713b8a60" Accept-Ranges: bytes Vary: Accept-Encoding,User-Agent Content-Encoding: gzip Content-Length: 256 Content-Type: text/xml