转:AJAX中xhr对象详解

XJAX ,并不是一种新技术的诞生.它实际上代表的是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用.
它包括:

使用XHTML和CSS标准化呈现;

使用DOM实现动态显示和交互;

使用XML和XSLT进行数据交换与处理;

使用XMLHttpR

XJAX ,并不是一种新技术的诞生.它实际上代表的是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用.

它包括:

使用XHTML和CSS标准化呈现;

使用DOM实现动态显示和交互;

使用XML和XSLT进行数据交换与处理;

使用XMLHttpRequest进行异步数据读取;

最后用JavaScript绑定和处理所有数据。

在这里我只向谈点XMLHttpRequest对象:

在上面看到,使用XMLHttpRequest进行异步数据读取;

首先,我们要创建该对象,针对不同的浏览器,该对象的创建方法是有区别.

Internet Explorer以ActiveX对象引入,被称为XMLHTTP.

对于Internet Explorer浏览器,创建XMLHttpRequest 方法如下:

xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0

xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");

xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");

在不同Internet Explorer浏览器中XMLHTTP版本可能不一致,为了更好的兼容不同版本的Internet
Explorer浏览器,因此我们需要根据不同版本的Internet
Explorer浏览器来创建XMLHttpRequest类,上面代码就是根据不同的Internet
Explorer浏览器创建XMLHttpRequest类的方法。

对于Mozilla?Netscape?Safari等浏览器,创建XMLHttpRequest 方法如下:

xmlhttp_request = new XMLHttpRequest();

  如果服务器的响应没有XML mime-type header,某些Mozilla浏览器可能无法正常工作。 为了解决这个问题,如果服务器响应的header不是text/xml,可以调用其它方法修改该header。

xmlhttp_request = new XMLHttpRequest();

xmlhttp_request.overrideMimeType(‘text/xml‘);

在实际应用中,为了兼容多种不同版本的浏览器,一般将创建XMLHttpRequest类的方法写成如下形式:

try{

 if( window.ActiveXObject ){

  for( var i = 5; i; i-- ){

   try{

    if( i == 2 ){

     xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );

    }else{

     xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );

    }

   xmlhttp_request.setRequestHeader("Content-Type","text/xml");

   xmlhttp_request.setRequestHeader("Content-Type","gb2312");

   break;

  }

  catch(e){

   xmlhttp_request = false;

  }

 }

}else if( window.XMLHttpRequest ){

 xmlhttp_request = new XMLHttpRequest();

 if (xmlhttp_request.overrideMimeType) {

  xmlhttp_request.overrideMimeType(‘text/xml‘);

 }

}

}catch(e){ xmlhttp_request = false; }

在定义了如何处理响应后,就要发送请求了。可以调用HTTP请求类的open()和send()方法,如下所示:

xmlhttp_request.open(‘GET‘, URL, true); xmlhttp_request.send(null);

open()的第一个参数是HTTP请求方式?GET,POST或任何服务器所支持的您想调用的方式。 按照HTTP规范,该参数要大写;否则,某些浏览器(如Firefox)可能无法处理请求。

第二个参数是请求页面的URL。

  第三个参数设置请求是否为异步模式。如果是TRUE,JavaScript函数将继续执行,而不等待服务器响应。这就是"AJAX"中的"A"。

用JavaScript来创建XMLHttpRequest
类向服务器发送一个HTTP请求后,接下来要决定当收到服务器的响应后,需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这
个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名,如下所
示:xmlhttp_request.onreadystatechange =FunctionName;

FunctionName是用JavaScript创建的函数名,注意不要写成FunctionName(),当然我们也可以直接将JavaScript代码创建在onreadystatechange之后,例如:

xmlhttp_request.onreadystatechange = function(){

 // JavaScript代码段

};

在这个函数中。首先要检查请求的状态。只有当一个完整的服务器响应已经收到了,函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。

  readyState的取值如下:

   0 (未初始化)

   1 (正在装载)

   2 (装载完毕)

   3 (交互中)

   4 (完成)

  所以只有当readyState=4时,一个完整的服务器响应已经收到了,函数才可以处理该响应。具体代码如下:

if (http_request.readyState == 4) {

 // 收到完整的服务器响应

} else {

 // 没有收到完整的服务器响应

}

 当readyState=4时,一个完整的服务器响应已经收到了,接着,函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时,表示状态正常。

  在检查完请求的状态值和响应的HTTP状态值后,就可以处理从服务器得到的数据了。有两种方式可以得到这些数据:(1) 以文本字符串的方式返回服务器的响应.

2006/01/19XMLHttpRequest详解

/*

*author Jouy.lu

*/

var xmlHttp; //首先定义一个全局域变量来保存对象的引用;

function createXMLHttpRequest(){ //该方法用来创建XMLHttpRequest对象的实例.

if(window.ActiveXObject){

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}else if(window.XMLHttpRequest){

xmlhttp = new XMLHttpRequest();

}

}

考虑到兼容浏览器的问题:建议的写法如下:

var xmlhttp;

function createXmlhttp(){

if(window.XMLHttpRequest){

xmlhttp = new XMLHttpRequest();

if (xmlhttp.overrideMimeType){

xmlhttp.overrideMimeType("text/xml");

}

}

else if(window.ActiveXObject){

try{

xmlhttp = new  ActiveXObject("Msxml2.XMLHTTP");

}catch(e){

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

}

if(!xmlhttp){

window.alert("Your broswer not support XMLHttpRequest!");

}

return xmlhttp;

}

/************************************XMLHttpRequest的标准操作*********************
abort():终止当前请求;

getAllResponseHeaders():把HTTP所以响应首部作为键/值对返回;

getResponseHeader("header");返回指定首部的串值;

open("POST/GET/PUT","url");建立对服务器的调用,url参数可以是相对URL或绝对URL,该方法还包含了另三个可选参数;

send(content);向服务器发送请求;

setRequestHeader("header","value");把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。

注:

void open(string method, string url, boolean asynch, string username, string password):这个方法会建立对服务器的调用。

要提供调用的特定方法(GET、POST或PUT),还要提供所调用资源的URL。另外还可以传递一个Boolean值,指示这个调用是异步还是同步的,
默认值为true,这表示请求本质上是异步的。如果这个参数为false,处理就会等待,直到从服务器返回响应为止。由于异步调用是使用Ajax
的主要优点之一,所以倘若将这个参数设置为false,从某种程度上讲与使用XMLHttpRequest对象的初衷不太相符。在某些情况下这,个参数
设置为false也是有用的,比如在持久存储页面之前你可能想先验证用户的输入。最后两个参数不说自明,允许你指定一个特定的用户名和口令。

void
send(content):这个方法具体向服务器发出请求。如果请求声明为异步的,这个方法就会立即返回,否则它会等待,直到接收到响应
为止。参数是可选的,可以是一个DOM对象的实例、一个输入流,或者是一个串。传入这个对象的内容会作为请求体的一部分发送。

void setRequestHeader(string header, string
value):这个方法为HTTP请求中一个给定的首部设置值。它有两个参数,第一个串表
示要设置的首部,第二个串表示要在首部中放置的值。需要说明,这个方法必须在open()之后才能调用。在所有这些方法中,最有可能用到
的就是open()和send()。XMLHttpRequest对象还有许多属性,在设计Ajax交互时这些属性非常有用。

void abort(): 顾名思义,这个方法就是要停止请求。

string getAllResponseHeaders(): 这个方法的核心功能对Web应用开发人员应该很熟悉了,它会返回一个串,其中包含HTTP请求的所有响 应首部。首部包括Content-Length、Date和URI。

string getResponseHeader(string header):这个方法与getAllResponseHeaders()是对应的,不过它有一个参数来表示你希望得到哪一个  首部值,并且会把这个值作为一个串返回。

******************************/

/***************标准XMLHttpRequest属性******************

onreadystatechange:每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数。

readyState:请求的状态。有5个可取值:0 = 未初始化,1 = 正在加载, 2 = 已加载, 3 = 交互中, 4 = 完成。

responseText:服务器的响应,表示为一个串。

responseXML:服务器的响应,表示为XML。这个对象可以解析为一个DOM对象。

status:服务器的HTTP状态码(200对应OK,404对应Not Found(未找到),等等).

statusText:HTTP状态码的相应文本(OK或Not Found(未找到)等等)。

*************************************************************/

/*********************来看看到底要怎么才能发送请求*******

使用XMLHttpRequest对象发送请求的基本步骤如下:

1.得到XMLHttpRequest对象实例的一个引用,为此,可以创建一个新的实例,也可以访问包含有

XMLHttpRequest实例的一个变量。

2.告诉XMLHttpRequest对象,哪个函数会处理XMLHttpRequest对象状态的改变。为此要把对象的onreadystatechange属性设置为指向一个JavaScript函数的指针。

3. 指定请求的属性。XMLHttpRequest对象的open()方法会指定将发出的请求。open()方法取3个 参数:一个是指示所用方法(通常是GET或POST)的串,另一个是表示目标资源URL的串,还有一个Boolean值,指示请求是否是异步的。

4. 将请求发送给服务器。XMLHttpRequest对象的send()方法会把请求传送到指定的目标资源。

send()方法接受一个参数,这通常是一个串或一个DOM对象。这个参数会作为请求体的一部分传送到目标URL.向send()方法提供参数时,要确保open()中指定的方法是POST。如果没有数据要作为请求体的一部分发送,则使用null。

异步方式给用户带来的体验:(我想程序员看到这段解释,心里真的很爽!)

对服务器的请求是异步发送的,因此浏览器可以继续响应用户输入,并在后台等待服务器的响应。

如果选择同步操作,而且倘若服务器的响应要花好几秒才能到达,浏览器就会表现得很迟钝,在等待期间不能响应用户的输入。这样一来,浏览器好像被冻住一样,无法响应用户输入,而异步做法可以避免这种情况,从而让最终用户有更好的体验,尽管这种改善很细微,但确实很有意义。

这样用户就能继续工作,而且服务器会在后台处理先前的请求。能与服务器通信而不打断用户的工作流,这样就可以采用很多技术来改善用户体验。例如,
假设有一个验证用户输入的应用。用户在输入表单上填写各个域时,浏览器可以定期地向服务器发送表单值来进行验证,此时并不打断用户,他还可以继续填写余下
的表单域。如果某个验证规则失败,用户会立即得到通知,而不必等表单真正发送到服务器进行处理时才知道有错误,这就能大大节省用户的时间,也能减轻服务器
上的负载压力,因为不必在表单提交不成功时完全重建表单的内容。

下面是说明安全问题的:

XMLHttpRequest对象要受制于浏览器的安全“沙箱”。XMLHttpRequest对象请求的所有资源都必须与调用脚本在同一个域
(domain)内。这个安全限制使得XMLHttpRequest对象不能请求脚本所在域之外的资源。这个安全限制的强度如何因浏览器而异(见图
2-5)。Internet Explorer

会显示一个警告,指出可能存在一个安全风险,但是用户可以选择是否继续发出请求。Firefox则会断然停止请求,并在JavaScript控制
台显示一个错误消息。Firefox确实提供了一些JavaScript技巧,使得XMLHttpRequest也可以请求外部URL的资源。不过,由于
这些技术针对特定的浏览器,最好不要用,而且要避免使用XMLHttpRequest访问外部URL。

时间: 2024-08-15 13:29:05

转:AJAX中xhr对象详解的相关文章

js中window对象详解以及页面跳转

js中window对象详解以及页面跳转 转自:http://www.makaidong.com/%E5%8D%9A%E5%AE%A2%E5%9B%AD%E6%90%9C/39219.shtml 1.window.top.window.location = "index.asp"; 2.window.top.location.href="index.asp" 3. window.top.location.replace("index.asp");

【好文收藏】javascript中event对象详解

event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. <HTML> <HEAD><TITLE>Cancels Links</T

javascript中event对象详解

event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义. 例子 下面的例子检查鼠标是否在链接上单击,并且,如果shift键被按下,就取消链接的跳转. 前端UI资源I分享 <HTML> <HEAD><TITLE>Cancels L

Java中Class对象详解

java中把生成Class对象和实例对象弄混了,更何况生成Class对象和生成 instance都有多种方式.所以只有弄清其中的原理,才可以深入理解.首先要生成Class对象,然后再生成Instance.那Class对象的生 成方式有哪些呢,以及其中是如何秘密生成的呢? Class对象的生成方式如下: 1.Class.forName("类名字符串")  (注意:类名字符串必须是全称,包名+类名) 2.类名.class 3.实例对象.getClass() 通过一段小程序,来观察一下Cla

【转】 java中Class对象详解和类名.class, class.forName(), getClass()区别

Class对象的生成方式如下: 1.类名.class           说明: JVM将使用类装载器, 将类装入内存(前提是:类还没有装入内存),不做类的初始化工作.返回Class的对象 2.Class.forName("类名字符串")  (注:类名字符串是包名+类名)  说明:装入类,并做类的静态初始化,返回Class的对象 3.实例对象.getClass()  说明:对类进行静态初始化.非静态初始化:返回引用运行时真正所指的对象(因为:子对象的引用可能会赋给父对象的引用变量中)所

JavaScript中数组对象详解

Array对象即数组对象用于在单个变量中存储多个值,JS的数组是弱类型的,所以允许数组中含有不同类型的元素,数组元素甚至可以是对象或者其他数组. 创建数组的语法 1.Array构造器 1.var list=new Array(); 2.var list=new Array(size); 3.var list=new Array(element0,element1,...elementn); 2.字面量的方式 var Array[element0,element1,...elementn]; 举例

java中Class对象详解和类名.class, class.forName(), getClass()区别

Class对象的生成方式如下: 1.类名.class           说明: JVM将使用类装载器, 将类装入内存(前提是:类还没有装入内存),不做类的初始化工作.返回Class的对象 2.Class.forName("类名字符串")  (注:类名字符串是包名+类名)  说明:装入类,并做类的静态初始化,返回Class的对象 3.实例对象.getClass()  说明:对类进行静态初始化.非静态初始化:返回引用运行时真正所指的对象(因为:子对象的引用可能会赋给父对象的引用变量中)所

JS中的event 对象详解

JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的元素: 3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下:(firefox中 0代表左键,1代表中间键,2代表右键) 4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的

jQuery的deferred对象详解(转)

jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本. 每个版本都会引入一些新功能.今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象. 这个功能很重要,未来将成为jQuery的核心方法,它彻底改变了如何在jQuery中使用ajax.为了实现它,jQuery的全部ajax代码都被改写了.但是,它比较抽象,初学者很难掌握,网上的教程也不多.所以,我把自己的学习笔记整理出来了,希望对大家有用. 本文不是初级教程,针对的读者是那些已经具备