详解AJAX核心中的XMLHttpRequest对象
转自:http://developer.51cto.com/art/200904/119577.htm
XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始。
了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始,在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法:
先看看IE创建XMLHttpRequest 对象的方法(方法1):
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
//使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
//使用较老版本的 IE 创建 IE 兼容的对(Microsoft.XMLHTTP)
而 Mozilla、Opera、Safari 和大部分非IE的浏览器都使用下面这种方法(方法2)创建XMLHttpRequest 对象:
var xmlhttp = new XMLHttpRequest();
实际上Internet Explorer 使用了一个名为 XMLHttp 的对象,而不是 XMLHttpRequest 对象,而 Mozilla、Opera、Safari 和 大部分非 Microsoft 浏览器都使用的是后者(下文统称 XMLHttpRequest 对象)。IE7开始也开始使用XMLHttpRequest 对象了。
在创建 XMLHttpRequest 对象的时候如果不同的浏览器使用了不正确的方法浏览器都将会报错,并且无法使用该对象。所以我们需要一种可以兼容不同浏览器的创建XMLHttpRequest 对象的方法:
创建兼容多浏览器的 XMLHttpRequest 对象方法
var xmlhttp = false; //创建一个新变量 request 并赋值 false。使用 false 作为判断条件,它表示还没有创建 XMLHttpRequest 对象。
function CreateXMLHttp(){
try{
xmlhttp = new XMLHttpRequest(); //尝试创建 XMLHttpRequest 对象,除 IE 外的浏览器都支持这个方法。
}
catch (e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)
}
catch (e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.XMLHTTP)。
}
catch (failed){
xmlhttp = false; //如果失败则保证 request 的值仍然为 false。
}
}
}
return xmlhttp;
}
判断是否创建成功就很简单了
if (!xmlhttp){
//创建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 xmlhttp = CreateXMLHttp();
创建好XMLHttpRequest 对象了,那我们要送请求到哪个网站呢,就选择博客园首页的RSS吧。那怎么设置我要请求的网站地址呢,使用open()方法。
open(method, url, async, username, password)
该方法有5个参数,具体什么意思可以看这里:http://www.w3school.com.cn/xmldom/dom_http.asp
我们用的就是这个了。
xmlHttp.open("get","http://www.cnblogs.com",true);
get参数表示用get方法,第二个自然就是目标地址,博客园首页,第三个就是表示是否异步了,我们当然使用true了。具体的参数说明还都可以到http://www.w3school.com.cn上面看了。
好了,目标定好了,怎么发送呢。用send()方法?
send(body),send()方法只有一个参数,表示DOM对象,这个DOM对象需要说明的内容很多,下次说,今天我们只要写
xmlhttp.send();就可以了。好了,发送了,那怎么处理返回的结果呢,这个时候就用到XMLHttpRequest 对象最重要的东西了,那就是onreadystatechange事件句柄。什么意思呢,那就需要说明一下XMLHttpRequest 对象的readyState了,readyState有5种状态,分别用数字的 0 到 4 来表示。
状态 名称 描述
0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建(未调用open()之前)或已被 abort() 方法重置。
1 Open open() 方法已调用,但是 send() 方法未调用。请求还没有被发送。
2 Sent Send() 方法已调用,HTTP 请求已发送到 Web 服务器。未接收到响应。
3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
4 Loaded HTTP 响应已经完全接收。
但是需要注意的是,onreadystatechange事件句柄不同的浏览器能处理的状态并不一致,IE和FireFox能处理1到4,而Safari能处理2到4的状态,Opera 能处理3、4两中状态。0的状态基本没什么用,因为创建了XMLHttpRequest 对象后都会马上调用open() 方法,这时候状态就变成1了,当然除非你要判断对象是否已经被 abort() 取消,可是这样的情况依然很少。大部分情况下判断是不是4(已经接受完成)这个状态就够了。
好了,明白了readyState有5种状态了,那处理返回结果就是看状态变更到不同的状态我们做不同的处理就可以了,怎么告诉XMLHttpRequest 对象状态变化时让谁来处理这个变化呢。有两种写法,一种是用匿名方法,另一种是指定方法,其实只是不同的写发,作用都一样,看下代码:
xmlhttp.onReadyStateChange = function (){
//处理状态变化的代码
}
//或者
xmlhttp.onReadyStateChange = getResult;
function getResult(){
///处理状态变化的代码
}
顺便说一下,句柄的名称比较长,可以这样记忆 on ReadyState Change 表示在读取状态改变时请求发送了,也指定处理方法了,怎么获取返回的内容呢,有responseText和responseXML两个属性可供使用,responseXML是返回对象,需要再解析,后面再说,这里先用responseText,看看返回什么。
alert(xmlhttp.responseText); //看看是不是返回了首页的HTML代码啊。是你就成功了。
整个过程是:创建XMLHttpRequest 对象 -> 指定发送地址及发送方法 -> 发送请求 -> 指定处理方法并处理返回结果。但是需要注意,我们正常的思路理解是这样的,可是onreadystatechange事件句柄指定处理方法需要在发送之前就指定好,否则无法处理状态变化事件。
所以我们应该按照下面的流程来记忆:创建XMLHttpRequest 对象 -> 指定发送地址及发送方法 -> 指定状态变化处理方法 -> 发送请求,请求发送后状态变化了就会自动调用指定的处理方法。
好了,看看完成的代码吧。
完成的代码
var xmlhttp = false; //创建一个新变量 request 并赋值 false。使用 false 作为判断条件,它表示还没有创建 XMLHttpRequest 对象。
function CreateXMLHttp(){
try{
xmlhttp = new XMLHttpRequest(); //尝试创建 XMLHttpRequest 对象,除 IE 外的浏览器都支持这个方法。
}
catch (e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)
}
catch (e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.XMLHTTP)。
}
catch (failed){
xmlhttp = false; //如果失败则保证 request 的值仍然为 false。
}
}
}
return xmlhttp;
}
xmlhttp = CreateXMLHttp();
xmlhttp.open("get","http://www.cnblogs.com",true);
xmlhttp.onReadyStateChange = getResult;
xmlhttp.send();
function getResult(){
if(xmlhttp.readyState == 4){
alert(xmlhttp.responseText);
}
}
看似一切都OK了,可是有没有想过,如果HTML代码在网络传输过程中出错了,或者我们指定的地址失效会怎么样呢。这个时候就需要用到status属性,即由服务器返回的 HTTP 状态代码。 xmlhttp.status 等于200时表示传输过程完整没有错误。具体的HTTP状态代码什么意思可以到W3C组织网站上看看,地址http://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html#sec6.1.1 。
把getResult()方法写成下面这样我觉的就真的OK了。
function getResult(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
alert(xmlhttp.responseText);
}
}
好了,一个本来挺简单的东西,被我写的这么多,好象很罗嗦。不过我觉的编程对基础内容的理解很重要,现在很多时候开发AJAX的程序都使用很多JS的库,不需要直接编写这么基础的代码。如使用著名的jQuery,但是如果我们对基础的东西有很好的理解,那这些库报告错误,或者出现问题我们可以很好很快的知道错在哪里,更快的做出改变使程序正常运行。
详解AJAX核心中的XMLHttpRequest对象的更多相关文章
- 详解AJAX工作原理以及实例讲解(通俗易懂)
什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...
- Ajax|看这一篇就够了!详解Ajax工作原理及开发步骤
传统开发的缺点,是对于浏览器的页面,全部都是全局刷新的体验.如果我们只是想取得或是更新页面中的部分信息那么就必须要应用到局部刷新的技术. 局部刷新也是有效提升用户体验的一种非常重要的方式. Ajax技 ...
- vue 源码详解(一):原型对象和全局 `API`的设计
vue 源码详解(一):原型对象和全局 API的设计 1. 从 new Vue() 开始 我们在实际的项目中使用 Vue 的时候 , 一般都是在 main.js 中通过 new Vue({el : ' ...
- 详解AJAX核心 —— XMLHttpRequest 对象 (下)
继续上一篇的内容上一篇关于XMLHttpRequest 对象发送对服务器的请求只说到了用Get方式,没有说Post方式的.那是因为要说Post方式就需要先说另外一个东西,那就是DOM(Document ...
- 详解AJAX核心 —— XMLHttpRequest 对象 (上)
我要说的内容都是非常基础的内容,高手就免看了,如果看了欢迎给点意见啊.新手或者对低层还不是很了解的人可以看看,帮助理解与记忆. XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程 ...
- $.ajax()方法详解 ajax之async属性 【原创】详细案例解剖——浅谈Redis缓存的常用5种方式(String,Hash,List,set,SetSorted )
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...
- 详解JSP九个内置对象
[JSP]☆★之详解九个内置对象 在web开发中,为方便开发者,JSP定义了一些由JSP容器实现和管理的内置对象,这些对象可以直接被开发者使用,而不需要再对其进行实例化!本文详解,JSP2 ...
- Ajax学习系列——创建XMLHttpRequest对象
Ajax - 创建XMLHttpRequest对象 首先介绍什么是XMLHttpRequest: XMLHttpRequest是Ajax的基础.中文可以解释为可扩展超文本传输请求.术语缩写为XHR. ...
- Ajax 学习之创建XMLHttpRequest对象------Ajax的核心
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
随机推荐
- shell脚本中四则运算
方法一: (()) ##在括号里面可以直接对变量进行操作 例如:vim test.sh 方法二: let ##let后面加要操作的运算 例如: 方法三: expr ...
- c# 验证码图片生成类
using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Drawing2D ...
- d3.js(v5.7)的attr()函数完善(添加obj支持)
因为习惯了jquery的attr(obj)批量添加属性,所以刚开始看到d3为dom添加属性要一个一个添加的时候真的是十分想吐槽,既然想实现attr(obj),根据传入对象的键值对批量添加dom属性,那 ...
- TypeError: pivot_table() got an unexpected keyword argument 'rows'
利用Python进行数据分析>第二章,处理MovieLens 1M数据集,有句代码总是报错: mean_rating = data.pivot_table('rating', rows='tit ...
- pip安装tensorflow出错怎么办
随着人工智能的开发越来越多人参与,现在下载tensorflow 1.2版本也经常出错了,如下: 这时怎么办呢? 其实比较简单,可以通过pypi的网站来下载: https://pypi.python.o ...
- JAVA怎么在函数内改变传入的值
public class TestInt { public int aa(int i) { return i+4; } public static void main(String [] args) ...
- Java从入门到精通全套教程免费分享
这是我自己早前听课时整理的Java全套知识,适用于初学者,也可以适用于中级进阶的人,你们可以下载,我认为是比较系统全面的,可以抵得上市场上90%的学习资料.讨厌那些随便乱写的资料还有拿出来卖钱的人!在 ...
- times(NULL) Segmentation fault
****************************************************************************** * times(NULL) Segment ...
- js之方向检测
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- bootstrap+Ajax+SSM(maven搭建)表单增删改查
前后端分离,前端利用ajax调用后端API接收json数据,进行表单的增删改查 软件架构 IDE:IDEA 数据库:mysql jdk:1.8 tomcat:9 后端:springmvc,mybati ...