详解AJAX核心 —— XMLHttpRequest 对象 (上)

我要说的内容都是非常基础的内容,高手就免看了,如果看了欢迎给点意见啊。新手或者对低层还不是很了解的人可以看看,帮助理解与记忆。

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(null);

就可以了。好了,发送了,那怎么处理返回的结果呢,这个时候就用到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(null);
    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 对象 (上),布布扣,bubuko.com

时间: 2024-10-26 07:04:52

详解AJAX核心 —— XMLHttpRequest 对象 (上)的相关文章

详解AJAX核心 —— XMLHttpRequest 对象 (下)

继续上一篇的内容上一篇关于XMLHttpRequest 对象发送对服务器的请求只说到了用Get方式,没有说Post方式的.那是因为要说Post方式就需要先说另外一个东西,那就是DOM(Document Object Model)文档对象模型.JavaScript通过DOM读取.改变或者删除 HTML.XHTML 以及 XML中的元素,可以重构整个 HTML 文档.可以添加.移除.改变或重排页面上的项目,而且这样的操作会马上显示在页面上.另外,所有浏览器执行W3C 发布的 DOM 标准规范,DOM

AJAX——核心XMLHttpRequest对象

AJAX——核心XMLHttpRequest对象

AJAX核心XMLHTTPRequest对象

老早就写好了总结,今天整理发表一下. XMLHttpRequest对象是AJAX的核心技术,XMLHttpRequest 是XMLHTTP 组件的对象,通过这个对象,AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将数据处理的工作都交给服务器来做:这样既减轻了服务器负担又加快了响应速度.缩短了用户等待的时间. XMLHttpRequest对象是开发者的梦想,因为能够: 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加载后从服

AJAX 核心 —— XMLHTTPRequest 对象 回顾记录

AJAX 概述 不使用 AJAX 的网页,如果要更新内容,需要重载整个页面. AJAX ( Asynchronous Javascript And XML ,异步 Javascript 和 XML)用于异步通讯,通过在后台与服务器进行少量的数据交换,在不重载整个网页的情况下,对网页局部实现异步刷新. AJAX 核心 JavaScript 中使用 XMLHTTPRequest 对象(XHR)实现 AJAX 请求. AJAX 步骤 一般步骤如下: 实例化 XMLHTTPRequest 对象(注意 I

【java项目实践】详解Ajax工作原理以及实现异步验证用户名是否存在+源码下载(java版)

一年前,从不知道Ajax是什么,伴随着不断的积累,到现在经常使用,逐渐有了深入的认识.今天,如果想开发一个更加人性化,友好,无刷新,交互性更强的网页,那您的目标一定是Ajax. 介绍 在详细讨论Ajax是什么之前,先让我们花一分钟了解一下Ajax做什么.如图所示: 如上图展示给我们的就是使用Ajax技术实现的效果.伴随着web应用的越来越强大而出现的是等待,等待服务器响应,等待浏览器刷新,等待请求返回和生成新的页面成为了程序员们的最最头疼的难题.随着Ajax的出现使web应用程序变得更完善,更友

PHP面向对象编程详解:类和对象

PHP面向对象编程详解:类和对象 从OOP的视角看,不应区分语言.无论是C++.无论是Java.无论是.net还有更多面向对象的语言,只要你了解了OO的真谛,便可以跨越语言,让你的思想轻松的跳跃.便没有对于Java..net.PHP 之间谁强谁弱的争执了. 希望这个介绍PHP5面向对象编程(OOP)的资料能让初学者受益,能让更多的PHPer开始转向OO的编程过程. 相对PHP4,PHP5在面向对象方面改变了很多.我们将只介绍PHP5环境下的面向对象.而我们必须改变自己来跟随PHP5的发展.如果代

AJAX入门--- XMLHttpRequest对象的属性和方法

由于刚刚接触到Ajax对其比较陌生,而其中的XMLHttpRequest对象更是未曾听闻.开始学之前,了解一下它的属性和方法为它的使用做下铺垫.本文重点介绍XMLHttpRequest的属性和方法. XMLHttpRequest对象的属性和事件 属性 描述 readyState 表示XMLHttpRequest对象的状态[1] responseText 包含客户端接收到的HTTP相应的文本内容[2] responseXML 服务器响应的XML内容对应的DOM对象[3] status 服务器返回h

AJAX - 创建 XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 对象 所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject). XMLHttpRequest 用于在后台与服务器交换数据.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 创建 XMLHttpRequest 对象 所有现代浏览器(IE7+.Firefox.Chrome.Safari 以及 Opera)均内建 XMLHttpRequest

NVIDIA Jetson TK1学习与开发(八):图文详解OpenGL在Jetson TK1上的安装和使用

图文详解OpenGL在Jetson TK1上的安装和使用 1.入门介绍与资源推介 OpenGL(全写Open Graphics Library)是个定义了一个跨编程语言.跨平台的编程接口规格的专业的图形程序接口.它用于三维图像(二维的亦可),是一个功能强大,调用方便的底层图形库. OpenGL ES (OpenGL for Embedded Systems) 是 OpenGL 三维图形 API 的子集,针对手机.PDA和游戏主机等嵌入式设备而设计.该API由Khronos集团定义推广,Khron