异步交互.docx

异步交互.docx

《异步交互.docx》由会员分享，可在线阅读，更多相关《异步交互.docx（14页珍藏版）》请在冰豆网上搜索。

异步交互

XmlHttp是什么？

XmlHttp是什么？

最通用的定义为：

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

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

来自MSDN的解释：

XmlHttp提供客户端同http服务器通讯的协议。

客户端可以通过XmlHttp对象（MSXML2.XMLHTTP.3.0）向http服务器发送请求并使用微软XML文档对象模型Microsoft®XMLDocumentObjectModel（DOM）处理回应。

现在的绝对多数浏览器都增加了对XmlHttp的支持，IE中使用ActiveXObject方式创建XmlHttp对象，其他浏览器如：

Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。

XmlHttp对象参考：

属性：

onreadystatechange*指定当readyState属性改变时的事件处理句柄。

只写

readyState  返回当前请求的状态，只读.

responseBody  将回应信息正文以unsignedbyte数组形式返回.只读

responseStream以AdoStream对象的形式返回响应信息。

只读

responseText将响应信息作为字符串返回.只读

responseXML将响应信息格式化为XmlDocument对象并返回，只读

status返回当前请求的http状态码.只读

statusText  返回当前请求的响应行状态，只读

*表示此属性是W3C文档对象模型的扩展.

方法：

abort取消当前请求

getAllResponseHeaders获取响应的所有http头

getResponseHeader从响应信息中获取指定的http头

open创建一个新的http请求，并指定此请求的方法、URL以及验证信息（用户名/密码）

send发送请求到http服务器并接收回应

setRequestHeader单独指定请求的某个http头

事件：

无

AJAX快速入门之HTTP协议基础

作者：

出处：

CSDN责任编辑：

方舟[2006-06-2816:

02]要很好地领会Ajax技术的关键是了解超文本传输协议（HTTP），该协议用来传输网页、图像以及因特网上在浏览器与服务器间传输的其他类型文件

--------------------------------------------------------------------------------

　　要很好地领会Ajax技术的关键是了解超文本传输协议（HTTP），该协议用来传输网页、图像以及因特网上在浏览器与服务器间传输的其他类型文件。

只要你在浏览器上输入一个URL，最前面的http:

//就表示使用HTTP来访问指定位置的信息。

（大部分浏览器还支持其他一些不同的协议，其中FTP就是一个典型例子。

）

　　注意：

本文中只涉及HTTP协议，这是Ajax开发人员关心的方面，它可作为HTTP的参考手册或指南。

　　HTTP由两部分组成：

请求和响应。

当你在Web浏览器中输入一个URL时，浏览器将根据你的要求创建并发送请求，该请求包含所输入的URL以及一些与浏览器本身相关的信息。

当服务器收到这个请求时将返回一个响应，该响应包括与该请求相关的信息以及位于指定URL（如果有的话）的数据。

直到浏览器解析该响应并显示出网页（或其他资源）为止。

　　HTTP请求

　　HTTP请求的格式如下所示：

＜request-line＞

＜headers＞

＜blankline＞

[＜request-body＞]

　　在HTTP请求中，第一行必须是一个请求行（requestline），用来说明请求类型、要访问的资源以及使用的HTTP版本。

紧接着是一个首部（header）小节，用来说明服务器要使用的附加信息。

在首部之后是一个空行，再此之后可以添加任意的其他数据[称之为主体（body）]。

　　在HTTP中，定义了大量的请求类型，不过Ajax开发人员关心的只有GET请求和POST请求。

只要在Web浏览器上输入一个URL，浏览器就将基于该URL向服务器发送一个GET请求，以告诉服务器获取并返回什么资源。

对于的GET请求如下所示：

GET/HTTP/1.1

Host:

User-Agent:

Mozilla/5.0（Windows;U;WindowsNT5.1;en-US;rv:

1.7.6）

Gecko/20050225Firefox/1.0.1

Connection:

Keep-Alive  

　　请求行的第一部分说明了该请求是GET请求。

该行的第二部分是一个斜杠（/），用来说明请求的是该域名的根目录。

该行的最后一部分说明使用的是HTTP1.1版本（另一个可选项是1.0）。

那么请求发到哪里去呢？

这就是第二行的内容。

　　第2行是请求的第一个首部，HOST。

首部HOST将指出请求的目的地。

结合HOST和上一行中的斜杠（/），可以通知服务器请求的是1.1才需要使用首部HOST，而原来的1.0版本则不需要使用）。

第三行中包含的是首部User-Agent，服务器端和客户端脚本都能够访问它，它是浏览器类型检测逻辑的重要基础。

该信息由你使用的浏览器来定义（在本例中是Firefox1.0.1），并且在每个请求中将自动发送。

最后一行是首部Connection，通常将浏览器操作设置为Keep-Alive（当然也可以设置为其他值，但这已经超出了本书讨论的范围）。

注意，在最后一个首部之后有一个空行。

即使不存在请求主体，这个空行也是必需的。

　　如果要获取一个诸如

GET/books/HTTP/1.1

Host:

User-Agent:

Mozilla/5.0（Windows;U;WindowsNT5.1;en-US;rv:

1.7.6）

Gecko/20050225Firefox/1.0.1

Connection:

Keep-Alive

　　注意只有第一行的内容发生了变化，它只包含URL中后面的部分。

　　要发送GET请求的参数，则必须将这些额外的信息附在URL本身的后面。

其格式类似于：

URL?

name1=value1&name2=value2&..&nameN=valueN

　　该信息称之为查询字符串（querystring），它将会复制在HTTP请求的请求行中，如下所示：

GET/books/?

name=Professional%20AjaxHTTP/1.1

Host:

User-Agent:

Mozilla/5.0（Windows;U;WindowsNT5.1;en-US;rv:

1.7.6）

Gecko/20050225Firefox/1.0.1

Connection:

Keep-Alive

　　注意，为了将文本“ProfessionalAjax”作为URL的参数，需要编码处理其内容，将空格替换成%20，这称为URL编码（URLencoding），常用于HTTP的许多地方（Javascrīpt提供了内建的函数来处理URL编码和解码，这些将在本章中的后续部分中说明）。

“名称―值”（name―value）对用&隔开。

绝大部分的服务器端技术能够自动对请求主体进行解码，并为这些值的访问提供一些逻辑方式。

当然，如何使用这些数据还是由服务器决定的。

　　浏览器发送的首部，通常比本文中所讨论的要多得多。

为了简单起见，这里的例子尽可能简短。

　　另一方面，POST请求在请求主体中为服务器提供了一些附加的信息。

通常，当填写一个在线表单并提交它时，这些填入的数据将以POST请求的方式发送给服务器。

　　以下就是一个典型的POST请求：

POST/HTTP/1.1

Host:

User-Agent:

Mozilla/5.0（Windows;U;WindowsNT5.1;en-US;rv:

1.7.6）

Gecko/20050225Firefox/1.0.1

Content-Type:

application/x-www-form-urlencoded

Content-Length:

40

Connection:

Keep-Alive

name=Professional%20Ajax&publisher=Wiley

　　从上面可以发现，POST请求和GET请求之间有一些区别。

首先，请求行开始处的GET改为了POST，以表示不同的请求类型。

你会发现首部Host和User-Agent仍然存在，在后面有两个新行。

其中首部Content-Type说明了请求主体的内容是如何编码的。

浏览器始终以application/x-www-form-urlencoded的格式编码来传送数据，这是针对简单URL编码的MIME类型。

首部Content-Length说明了请求主体的字节数。

在首部Connection后是一个空行，再后面就是请求主体。

与大多数浏览器的POST请求一样，这是以简单的“名称―值”对的形式给出的，其中name是ProfessionalAjax，publisher是Wiley。

你可以以同样的格式来组织URL的查询字符串参数。

　　正如前面所提到的，还有其他的HTTP请求类型，它们遵从的基本格式与GET请求和POST请求相同。

下一步我们来看看服务器将对HTTP请求发送什么响应。

　　HTTP响应

　　如下所示，HTTP响应的格式与请求的格式十分类似：

＜status-line＞

＜headers＞

＜blankline＞

[＜response-body＞]

　　正如你所见，在响应中唯一真正的区别在于第一行中用状态信息代替了请求信息。

状态行（statusline）通过提供一个状态码来说明所请求的资源情况。

以下就是一个HTTP响应的例子：

HTTP/1.1200OK

Date:

Sat,31Dec200523:

59:

59GMT

Content-Type:

text/html;charset=ISO-8859-1

Content-Length:

122

＜html＞

＜head＞

＜title＞WroxHomepage＜/title＞

＜/head＞

＜body＞

＜!

--bodygoeshere--＞

＜/body＞

＜/html＞

　　在本例中，状态行给出的HTTP状态代码是200，以及消息OK。

状态行始终包含的是状态码和相应的简短消息，以避免混乱。

最常用的状态码有：

　　◆200（OK）:

找到了该资源，并且一切正常。

　　◆304（NOTMODIFIED）:

该资源在上次请求之后没有任何修改。

这通常用于浏览器的缓存机制。

　　◆401（UNAUTHORIZED）:

客户端无权访问该资源。

这通常会使得浏览器要求用户输入用户名和密码，以登录到服务器。

　　◆403（FORBIDDEN）:

客户端未能获得授权。

这通常是在401之后输入了不正确的用户名或密码。

　　◆404（NOTFOUND）:

在指定的位置不存在所申请的资源。

　　在状态行之后是一些首部。

通常，服务器会返回一个名为Data的首部，用来说明响应生成的日期和时间（服务器通常还会返回一些关于其自身的信息，尽管并非是必需的）。

接下来的两个首部大家应该熟悉，就是与POST请求中一样的Content-Type和Content-Length。

在本例中，首部Content-Type指定了MIME类型HTML（text/html），其编码类型是ISO-8859-1（这是针对美国英语资源的编码标准）。

响应主体所包含的就是所请求资源的HTML源文件（尽管还可能包含纯文本或其他资源类型的二进制数据）。

浏览器将把这些数据显示给用户。

　　注意，这里并没有指明针对该响应的请求类型，不过这对于服务器并不重要。

客户端知道每种类型的请求将返回什么类型的数据，并决定如何使用这些数据。

AJAX入门之XMLHttpRequest慨述

作者：

出处：

CSDN责任编辑：

方舟[2006-06-1515:

42]在使用XMLHttpRequest对象发送请求和处理响应之前，必须先用Javascrīpt创建一个XMLHttpRequest对象。

--------------------------------------------------------------------------------

　　在使用XMLHttpRequest对象发送请求和处理响应之前，必须先用Javascrīpt创建一个XMLHttpRequest对象。

由于XMLHttpRequest不是一个W3C标准，所以可以采用多种方法使用Javascrīpt来创建XMLHttpRequest的实例。

InternetExplorer把XMLHttpRequest实现为一个ActiveX对象，其他浏览器（如Firefox、Safari和Opera）把它实现为一个本地Javascrīpt对象。

由于存在这些差别，Javascrīpt代码中必须包含有关的逻辑，从而使用ActiveX技术或者使用本地Javascrīpt对象技术来创建XMLHttpRequest的一个实例。

　　很多人可能还记得从前的那段日子，那时不同浏览器上的Javascrīpt和DOM实现简直千差万别，听了上面这段话之后，这些人可能又会不寒而栗。

幸运的是，在这里为了明确该如何创建XMLHttpRequest对象的实例，并不需要那么详细地编写代码来区别浏览器类型。

你要做的只是检查浏览器是否提供对ActiveX对象的支持。

如果浏览器支持ActiveX对象，就可以使用ActiveX来创建XMLHttpRequest对象。

否则，就要使用本地Javascrīpt对象技术来创建。

代码清单2-1展示了编写跨浏览器的Javascrīpt代码来创建XMLHttpRequest对象实例是多么简单。

　　代码清单2-1　创建XMLHttpRequest对象的一个实例

varxmlHttp;

functioncreateXMLHttpRequest（）{

　if（window.ActiveXObject）{

　　xmlHttp=newActiveXObject（"Microsoft.XMLHTTP"）;

　　}

　　elseif（window.XMLHttpRequest）{

　　　xmlHttp=newXMLHttpRequest（）;

　　}

}

　　可以看到，创建XMLHttpRequest对象相当容易。

首先，要创建一个全局作用域变量xmlHttp来保存这个对象的引用。

createXMLHttpRequest方法完成创建XMLHttpRequest实例的具体工作。

这个方法中只有简单的分支逻辑（选择逻辑）来确定如何创建对象。

对window.ActiveXObject的调用会返回一个对象，也可能返回null，if语句会把调用返回的结果看作是true或false（如果返回对象则为true，返回null则为false），以此指示浏览器是否支持ActiveX控件，相应地得知浏览器是不是InternetExplorer。

如果确实是，则通过实例化ActiveXObject的一个新实例来创建XMLHttpRequest对象，并传入一个串指示要创建何种类型的ActiveX对象。

在这个例子中，为构造函数提供的字符串是Microsoft.XMLHTTP，这说明你想创建XMLHttpRequest的一个实例。

　　如果window.ActiveXObject调用失败（返回null），Javascrīpt就会转到else语句分支，确定浏览器是否把XMLHttpRequest实现为一个本地Javascrīpt对象。

如果存在window.

　　XMLHttpRequest，就会创建XMLHttpRequest的一个实例。

　　由于Javascrīpt具有动态类型特性，而且XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。

这就大大简化了开发过程，而且在Javascrīpt中也不必编写特定于浏览器的逻辑

　　什么是AJAX?

　　AJAX（异步Javascrīpt和XML）是个新产生的术语,专为描述Javascrīpt的两项强大性能.这两项性能在多年来一直被网络开发者所忽略,直到最近Gmail,Googlesuggest和googleMaps的横空出世才使人们开始意识到其重要性.

　　这两项被忽视的性能是:

　　无需重新装载整个页面便能向服务器发送请求.

　　对XML文档的解析和处理．

    步骤1?

"请!

"---如何发送一个HTTP请求

　　为了用Javascrīpt向服务器发送一个HTTP请求,需要一个具备这种功能的类实例.这样的类首先由InternetExplorer以ActiveX对象引入,被称为XMLHTTP.后来Mozilla,Safari和其他浏览器纷纷仿效,提供了XMLHttpRequest类,它支持微软的ActiveX对象所提供的方法和属性.

　　因此,为了创建一个跨浏览器的这样的类实例（对象）,可以应用如下代码:

if（window.XMLHttpRequest）{//Mozilla,Safari,...

  http_request=newXMLHttpRequest（）;

}elseif（window.ActiveXObject）{//IE

  http_request=newActiveXObject（"Microsoft.XMLHTTP"）;

}

　　（上例对代码做了一定简化,这是为了解释如何创建XMLHTTP类实例.实际的代码实例可参阅本篇步骤3.）

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

http_request=newXMLHttpRequest（）;

http_request.overrideMimeType（'text/xml'）;

　　接下来要决定当收到服务器的响应后,需要做什么.这需要告诉HTTP请求对象用哪一个Javascrīpt函数处理这个响应.可以将对象的onreadystatechange属性设置为要使用的Javascrīpt的函数名,如下所示:

http_request.onreadystatechange=nameOfTheFunction;

　　注意:

在函数名后没有括号,也无需传递参数.另外还有一种方法,可以在扉页（fly）中定义函数及其对响应要采取的行为,如下所示:

http_request.onreadystatechange=function（）{

  //dothething

};

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

     http_request.open（'GET','http:

//www.example.org/some.file',true）;

     http_request.send（null）;

　　open（）的第一个参数是HTTP请求方式?

GET,POST,HEAD或任何服务器所支持的您想调用的方式.按照HTTP规范,该参数要大写;否则,某些浏览器（如Firefox）可能无法处理请求.有关HTTP请求方法的详细信息可参考http:

//www.w3.org/Protocols/rfc2616/rfc2616-sec9.htmlW3Cspecs

　　第二个参数是请求页面的URL.由于自身安全特性的限制,该页面不能为第三方域名的页面.同时一定要保证在所有的页面中都使用准确的域名,否则调用open（）会得到"permissiondenied"的错误提示.一个常见的错误是访问站点时使用domain.tld,而当请求页面时,却使用www.domain.tld.

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

　　如果第一个参数是"POST",send（）方法的参数可以是任何想送给服务器的数据.这时数据要以字符串的形式送给服务器,如下所示:

name=value&anothername=othervalue&so=on 

     步骤2?

"收到!

"---处理服务器的响应

　　当发送请求时,要提供指定处理响应的Javascrīpt函数名. 

     http_request.onreadystatechange=nameOfTheFunction;

　　我们来看看这个函数的功能是什么.首先函数会检查请求的状态.如果状态值是4,就意味着一个完整的服务器响应已经收到了,您将可以处理该响应.

if（http_request.readyState==4）{

  //everythingisgood,theresponseisreceived

}else{

  //stillnotready

}

　　readyState的取值如下:

　　0（未初始化）

　　1（正在装载）

　　2（装载完毕）

　　3（交互中）

　　4（完成）

　　接着,函数会检查HTTP服务器响应的状态值.完整的状态取值可参见W3Csite.我们着重看值为200OK的响应.

if（http_request.status==200）{

  //perfect!

}else{

  //therewasaproblemwiththerequest,

  //forexampletheresponsemaybea404（NotFound）

  //or500（InternalServerError）responsecodes

}

　　在检查完请求的状态值和响应的HTTP状态值后,您就可以处理从服务器得到的数据了.有两种方式可以得到这些数据:

http_request.responseText?

以文本字符串的方式返回服务器的响应

http_request.responseXML?

以XMLDocument对象方式返回响应.处理XMLDocument对象可以用Javas