知识大全详解AJAX核心中的XMLHttpRequest对象

Posted 2022-07-21 知

篇首语：知识给世界带来光明，知识给人类增长财富。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全详解AJAX核心中的XMLHttpRequest对象相关的知识，希望对你有一定的参考价值。

详解AJAX核心中的XMLHttpRequest对象 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　XMLHttpRequest 对象是AJAX功能的核心要开发AJAX程序必须从了解XMLHttpRequest 对象开始

　　了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法

　　先看看IE创建XMLHttpRequest 对象的方法（方法）

　　var xml = new ActiveXObject( Msxml XMLHTTP );

　　//使用较新版本的 IE 创建 IE 兼容的对象（Msxml XMLHTTP）

　　var xml = new ActiveXObject( Microsoft XMLHTTP );

　　//使用较老版本的 IE 创建 IE 兼容的对（Microsoft XMLHTTP）

而 Mozilla Opera Safari 和大部分非IE的浏览器都使用下面这种方法（方法）创建XMLHttpRequest 对象

　　var xml = new XMLHttpRequest();

　　实际上Internet Explorer 使用了一个名为 XMLHttp 的对象而不是 XMLHttpRequest 对象而 Mozilla Opera Safari 和大部分非 Microsoft 浏览器都使用的是后者（下文统称 XMLHttpRequest 对象） IE 开始也开始使用XMLHttpRequest 对象了

　　在创建 XMLHttpRequest 对象的时候如果不同的浏览器使用了不正确的方法浏览器都将会报错并且无法使用该对象所以我们需要一种可以兼容不同浏览器的创建XMLHttpRequest 对象的方法

　　创建兼容多浏览器的 XMLHttpRequest 对象方法

　　var xml = false; //创建一个新变量 request 并赋值 false 使用 false 作为判断条件它表示还没有创建 XMLHttpRequest 对象 function CreateXMLHttp()tryxml = new XMLHttpRequest(); //尝试创建 XMLHttpRequest 对象除 IE 外的浏览器都支持这个方法 catch (e)tryxml = new ActiveXObject( Msxml XMLHTTP ); //使用较新版本的 IE 创建 IE 兼容的对象（Msxml XMLHTTP）catch (e)tryxml = new ActiveXObject( Microsoft XMLHTTP ); //使用较老版本的 IE 创建 IE 兼容的对象（Microsoft XMLHTTP） catch (failed)xml = false; //如果失败则保证 request 的值仍然为 false return xml;判断是否创建成功就很简单了

　　if (!xml)//创建XMLHttpRequest 对象失败!else//创建成功!

　　创建好了XMLHttpRequest 对象我们再来看看这个对象的方法属性以及最重要的onreadystatechange事件句柄吧

　　方法

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

　　abort() 说明取消当前响应关闭连接并且结束任何未决的网络活动

　　getAllResponseHeaders() 说明把 HTTP 响应头部作为未解析的字符串返回

　　getResponseHeader() 说明返回指定的 HTTP 响应头部的值

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

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

　　属性

　　readyState 说明 HTTP 请求的状态

　　responseText 说明目前为止为服务器接收到的响应体（不包括头部）或者如果还没有接收到数据的话就是空字符串

　　responseXML 说明对请求的响应解析为 XML 并作为 Document 对象返回

　　status 说明由服务器返回的 HTTP 状态代码

　　statusText 说明这个属性用名称而不是数字指定了请求的 HTTP 的状态代码

　　onreadystatechange 是每次 readyState 属性改变的时候调用的事件句柄函数

　　下面从发送请求并处理请求结果的过程来理解一下XMLHttpRequest 对象吧

　　发送请求之前自然就是生成一个XMLHttpRequest 对象代码上面有了就不多写了

　　生成一个XMLHttpRequest 对象

　　var xml = CreateXMLHttp();

　　创建好XMLHttpRequest 对象了那我们要送请求到哪个网站呢就选择博客园首页的RSS吧那怎么设置我要请求的网站地址呢使用open()方法

　　open(method url async username password)

　　该方法有个参数具体什么意思可以看这里我们用的就是这个了

　　xmlHttp open( get true);

　　get参数表示用get方法第二个自然就是目标地址博客园首页第三个就是表示是否异步了我们当然使用true了具体的参数说明还都可以到上面看了

　　好了目标定好了怎么发送呢用send()方法？

　　send(body) send()方法只有一个参数表示DOM对象这个DOM对象需要说明的内容很多下次说今天我们只要写

　　xml send();就可以了好了发送了那怎么处理返回的结果呢这个时候就用到XMLHttpRequest 对象最重要的东西了那就是onreadystatechange事件句柄什么意思呢那就需要说明一下XMLHttpRequest 对象的readyState了 readyState有种状态分别用数字的到来表示

　　状态名称描述 Uninitialized 初始化状态 XMLHttpRequest 对象已创建（未调用open()之前）或已被 abort() 方法重置 Open open() 方法已调用但是 send() 方法未调用请求还没有被发送 Sent Send() 方法已调用 HTTP 请求已发送到 Web 服务器未接收到响应 Receiving 所有响应头部都已经接收到响应体开始接收但未完成 Loaded HTTP 响应已经完全接收

　　但是需要注意的是 onreadystatechange事件句柄不同的浏览器能处理的状态并不一致 IE和FireFox能处理到而Safari能处理到的状态 Opera 能处理两中状态的状态基本没什么用因为创建了XMLHttpRequest 对象后都会马上调用open() 方法这时候状态就变成了当然除非你要判断对象是否已经被 abort() 取消可是这样的情况依然很少大部分情况下判断是不是（已经接受完成）这个状态就够了

　　好了明白了readyState有种状态了那处理返回结果就是看状态变更到不同的状态我们做不同的处理就可以了怎么告诉XMLHttpRequest 对象状态变化时让谁来处理这个变化呢有两种写法一种是用匿名方法另一种是指定方法其实只是不同的写发作用都一样看下代码

　　xml onReadyStateChange = function ()//处理状态变化的代码//或者xml onReadyStateChange = getResult;function getResult()///处理状态变化的代码

　　顺便说一下句柄的名称比较长可以这样记忆 on ReadyState Change 表示在读取状态改变时请求发送了也指定处理方法了怎么获取返回的内容呢有responseText和responseXML两个属性可供使用 responseXML是返回对象需要再解析后面再说这里先用responseText 看看返回什么

　　alert(xml responseText); //看看是不是返回了首页的HTML代码啊是你就成功了

　　整个过程是创建XMLHttpRequest 对象 > 指定发送地址及发送方法 > 发送请求 > 指定处理方法并处理返回结果 但是需要注意我们正常的思路理解是这样的可是onreadystatechange事件句柄指定处理方法需要在发送之前就指定好否则无法处理状态变化事件

　　所以我们应该按照下面的流程来记忆创建XMLHttpRequest 对象 > 指定发送地址及发送方法 > 指定状态变化处理方法 > 发送请求请求发送后状态变化了就会自动调用指定的处理方法好了看看完成的代码吧

　　完成的代码

　　看似一切都OK了可是有没有想过如果HTML代码在网络传输过程中出错了或者我们指定的地址失效会怎么样呢这个时候就需要用到status属性即由服务器返回的 HTTP 状态代码 xml status 等于时表示传输过程完整没有错误具体的HTTP状态代码什么意思可以到W C组织网站上看看地址l

　　把getResult()方法写成下面这样我觉的就真的OK了

　　function getResult()if(xml readyState == && xml status == )alert(xml responseText);

cha138/Article/program/Java/JSP/201311/19144

知识大全 详解AJAX核心中的XMLHttpRequest对象

知识大全详解AJAX核心中的XMLHttpRequest对象