Ajax基础知识

Ajax 的基本概念：

Ajax (Asynchronous JavaScript And XML)指的是异步JavaSeript 和XML技术，Web 2.0中的一项关键技术， 它允许把用户和Web页面间的交互与Web浏览器和服务器间的通信分离开来。
Ajax并不是种新的编程语言， 而是一种创建交互性更强的Web应用程序的技术。有了Ajax,开发者编写的JavaScript便可以在不重载页面的情况下实现与Web服务器的数据交换。Ajax在浏览器与Web服务器之间使用了异步数据传输，从而减少了网页问服务器请求的信息量，使得每次请求并不需要返回整个页面。

 Ajax的基本原理：

与传统的 Web应用相比，Ajax技术采用了异步交互过程。它在用户和服务器之间引入了一个中间媒介，这个中间媒介相当于在用户上服务间增加了一个中间层，使用户与服务器的响应异步化。通过这样的设置便可以把之前由服务器完成的部分工作转交到各户端完成，充分利用客户端闲置的处理能力，减轻服务器的负担，节省了带宽。
实际上，用户的浏览器在执行任务时即装载了Ajax引擎。Ajax引擎是使用JavaScnipt语言编写的，通常位于一个隐藏的框架中，它负责编译用户界面和服务器之间的交互。有了Ajax引擎，用户与应用软件之间的交互便可以异步进行，独立于用户与服务器之间的父互过程。通过Ajax引擎，页面导航、数据校验等此不需要重新载入完整页面的需求就可以交给Ajax来执行。

Ajax之XMLHttpRequest:

是Ajax的核心部分，它可以在不重新加载页面的条件下完成对页面的更新，可以在页面加载后从客户端向服务器请求数据以及在服务器端接收数据，还可以在后台向客户端发送数据。XMLHttpRequest对象实现了HTTP协议的完全访问，可以实现同步或异步返回Web服务器的响应。并以文本形式或DOM文档形式返回响应内容。

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

创建XMLHttpRequest对象：

var xmlhttp;
function createXMLHttpRequest(){  
     if(window.XMLHttpRequest){  
        // code for IE7+, Firefox, Chrome, Opera, Safari
         xmlHttp = new XMLHttpRequest();   
     }else if(window.ActiveXObject){  
        // code for IE6, IE5
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
     }  
}

 

XMLHttpRequest对象的属性：

属性	说明
onreadystatechange	当readyState属性发生变化时触发此事件，用于触发回调函数。
status	服务器返回http状态码
statusText	服务器返回状态码的文本信息
responseText	包含客户端接收到的HTTP相应的文本内容
responseXML	服务器响应的XML内容对应的DOM对象
readyState	请求状态

 

 

 

 

 

 

 

(1) readyState 属性
该属性代表请求的状态，当XMLHttpRequest对象把一一个 HTTP请求发送到服务器端时，会经历若状态，一直等待直到请求被处理，然后再接收一个响应，这样脚本才能正确地响应各种状态，XMLHttpRequest 对象的readyState属性值下表所示。

readyState属性值：

readyState属性值	名称	说明
0	Uninitialized	初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1	Open	open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2	Send	Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3	Receiving	所有响应头部都已经接收到。响应体开始接收但未完成。
4	Loaded	HTTP 响应已经完全接收。

 

 

 

 

 

 

 

 

(2)onreadystatechange属性

该属性是readyState属性值改变时的事件触发器，用来指定当readyState属性值改变时的处理事件。在使用时，常常以事件处理函数名称赋予onreadystatechange的方式，来为XMLHttpRequest指定事件处理器，在事件处理函数中通过判断readyState状态值做出相应的处理。
(3) responseText属性
该属性包含接收到的HTTP响应的文本内容，当readyState值为0、1、 2时，该属机值为一个空字符串。当readyState值为3时，该属性值包含客户端中未完成的响应信息，当readySlate值为4时，该属性值包含完整的响应信息。
(4) responseXML属性
读属性包含接收的HTP响应的XML内容。当服务器以XML文档的格式返回响应数据时，rsponseXML属性值才不为null。
(5) status 属任
status属性描述了HTTP状态代码，仅仅当readyState值为3或4时该属性才有效，当radyState值小于3时，试图存取status的值将会引发一个异常。
(6) statusText属性
该属性描述了HTTP状态代码文本，仅仅当readyState值为3或4时该属性才有效，当readyState值小于3时，试图存取status的值将会引发一个 异常。

下面来介绍XMLHttpRequest对象的方法。
XMLHtpRequst对象提供了包括send()、open()在内的6种方法，用来向服务器发送HTTP请求，并设置相应的头信息，下表列出了XMLHttpRequest对象提供的方法及其说明。

XMLHttpRequest对象的方法：

方法	说明
Abort()	停止当前请求
getAllResponseHeaders()	将HTTP请求的所有响应首部作为key-value对返回
getResponseHeader()	返回指定首部的值
open()	建立对服务器的调用
send()	向服务器发送请求
setRequestHeader()	把指定首部设置为所提供的值

 

 

(7) abort()方法
该方法用来暂停与XMLHttpRequest对象相联系的HTTP请求，从而把没对象复位到未初始化状态

(8) open(DOMString  method,DOMString  uri,Boolean async,DOMString username,DOMString password)方法

该方法用来初始化一个XMLHttpRequest对象，其中，method 参数用于指定发送请求的HTTP方法(可以是GET方法、POST方法、PUT方法、DELETE方法或HEAD方法)。如果想将数据发送到服务器，则应该使用POST方法。如果想从服务器端检索数据，则应该使用GET放法。open 方法中的uri参数用于指定XMLHttpRequest对象把请求发送到与服务器相应的URI。async 参数指定了请求是否是异步的，其默认值是true.如果想发送一个同步请求，则需要把这个值设置为false. 在调用open()方法后XMLHttpRequest对象会将它的readyState属性设置为1, 并且把responseText、responseXML、status和statusText属性设置为它们的初始值。

(9) send()方法
在调用open()方法准备好一个请求后， 还需要把该请求发送到服务器，这时就需要调用send()方法。 send()方法中包含了一个可 选的参数，该参数可以包含可变类型的数据。
(10)setRequestHeader(DOMString header,DOMString value)方法
该方法用来设置请求的头部信息。其中，header参数表示要设置的首部，value 参数表
示要设置的值。该方法的调用必须在调用open()方法之后。

(11) getResponseHeader(DOMstring header)方法
该方法用来得到首部信息，其中header参数表示要得到的首部。该方法仅当readyState 值是3或4时才可调用，否则会返回一一个空字符串。
(12)getAllResponseHeaders0方法  属性值必须为3或4.否则该方法将该方法用来得到所有的响应首部，此时readyState返回null值。

下一篇讲Ajax的基本用法。