XMLHTTPRequest

最新推荐文章于 2025-05-20 09:06:06 发布

slege

最新推荐文章于 2025-05-20 09:06:06 发布

阅读量1.3k

点赞数

分类专栏： PHP

本文链接：https://blog.youkuaiyun.com/yangyafeiac/article/details/38959701

版权

PHP 专栏收录该内容

4 篇文章

订阅专栏

XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。

XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。

XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft® XML Document Object Model (DOM)处理回应。

现在的绝对多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其他浏览器如：Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。

创建对象：

var XMLHttp=null;
if (window.XMLHttpRequest)
{
XMLHttp=new XMLHttpRequest()
}else if (window.ActiveXObject)
{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}

属性：

/* readyState
0 （未初始化）对象已建立，但是尚未初始化（尚未调用open方法）
1 （初始化）对象已建立，尚未调用send方法
2 （发送数据）send方法已调用，但是当前的状态及http头未知
3 （数据传送中）已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 （完成）数据接收完毕，此时可以通过通过responseBody和responseText获取完整的回应数据
*/

/* responseText
目前为止从服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。
如果 readyState 小于 3，这个属性就是一个空字符串。
当 readyState 为 3，这个属性返回目前已经接收的响应部分。
如果 readyState 为 4，这个属性保存了完整的响应体。
如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，假定使用 Unicode UTF-8。
*/

/* responseXML
对请求的响应，解析为 XML 并作为 Document 对象返回。如果响应体不是“text/xml”返回null
*/

/* status
由服务器返回的 HTTP 状态代码，
如 200 表示成功，
而 404 表示 "Not Found" 错误。
当 readyState 小于 3 的时候读取这一属性会导致一个异常
*/

/* statusText
这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。和 status 属性一样，当 readyState 小于 3 的时候读取这一属性会导致一个异常
*/

<html>
<head>
    <script type = "text/javascript">
        function test(){
            var xmlhttp=new XMLHttpRequest();
            xmlhttp.open("GET","1.html",true);
            xmlhttp.send();
            xmlhttp.onload = function() {
                document.writeln(xmlhttp.readyState);//返回当前请求的状态

                document.writeln(xmlhttp.responseText);//将响应信息作为字符串返回
                
                document.writeln(xmlhttp.responseXML);//将响应信息格式化为XML Document返回时
               
                document.writeln(xmlhttp.status);//返回当前HTTP的状态码
             
                document.writeln(xmlhttp.statusText);//返回当前HTTP的响应行信息

                document.writeln(xmlhttp.responseStream);//以AStream对象的形式返回响应信息

            }
        }
    </script>
</head>
<body>
<div><h3>hello test 1</h3></div>
<button type = "button" οnclick="test()">change content</button>
</body>
</html>

方法：

abort()
取消当前响应，关闭连接并且结束任何未决的网络活动。
这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。

getAllResponseHeaders()
把 HTTP 响应头部作为未解析的字符串返回。
如果 readyState 小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回，一行一个头部。每行用换行符 "" 隔开。

getResponseHeader()
返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。
该方法的返回值是指定的 HTTP 响应头部的值，如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。

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

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

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

XMLHttpRequest 对象用于和服务器交换数据。
向服务器发送请求

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

open( method , url , async )

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）

send( string )

将请求发送到服务器。

string：仅用于 POST 请求

GET和POST相比，GET更快更简单，大部分时候用GET，但是有些时候要用POST，如：

1 无法使用缓存文件（更新服务器上的文件或数据库）
2 向服务器发送大量数据（POST 没有数据量限制）
3 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据

参考：XMLHTTP中setRequestHeader参数问题

responseXML:

<html>
<head>
    <script type="text/javascript">
        function test()
        {
            var xmlhttp;
            var txt,x,i;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    xmlDoc=xmlhttp.responseXML;
                    txt="";
                    /*将标签为title的内容赋值给x*/
                    x=xmlDoc.getElementsByTagName("title");
                    for (i=0;i<x.length;i++)
                    {
                        txt=txt + x[i].childNodes[0].nodeValue + "<br />";
                    }
                    //设置id为myDiv的标签内容为txt；
                    document.getElementById("myDiv").innerHTML=txt;
                }
            }
            xmlhttp.open("GET","Ajax/book.xml",true);
            xmlhttp.send();
        }
    </script>
</head>

<body>

<h2>My Book Collection:</h2>
<div id="myDiv"></div>
<button type="button" οnclick="test()">获得我的图书收藏列表</button>

</body>
</html>

book.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<!--  Copyright w3school.com.cn -->
<!-- W3School.com.cn bookstore example -->
<bookstore>
    <book category="children">
        <title lang="en">Harry Potter</title>
        <author>J K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
    <book category="cooking">
        <title lang="en">Everyday Italian</title>
        <author>Giada De Laurentiis</author>
        <year>2005</year>
        <price>30.00</price>
    </book>
    <book category="web" cover="paperback">
        <title lang="en">Learning XML</title>
        <author>Erik T. Ray</author>
        <year>2003</year>
        <price>39.95</price>
    </book>
    <book category="web">
        <title lang="en">XQuery Kick Start</title>
        <author>James McGovern</author>
        <author>Per Bothner</author>
        <author>Kurt Cagle</author>
        <author>James Linn</author>
        <author>Vaidyanathan Nagarajan</author>
        <year>2003</year>
        <price>49.99</price>
    </book>
</bookstore>

推荐参考：

轻松掌握XMLHttpRequest

w3cschool Ajax