AJAX基础教程——学习笔记（一）

 

创建 XMLHttpRequest 对象的一个实例 (p24)

var xmlHttp;

function createXMLHttpRequest(){

       if (window.ActiveXObject) {

       xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);

} else if {

       XmlHttp = new XMLHttpRequest();

}

}

 

 

 

XMLHttpRequest 的方法 p(25)

Abort(): 停止当前请求

 

getAllResponseHeaders(): 把HTTP请求的所有响应首部作为键/值对返回

 

getResponseHeader(“header”): 返回指定首部的串值

 

open(“method”, “url”): 建立对服务器的调用。Method参数可以使GET、POST或PUT。url参数可以使相对URL或绝对URL。这个方法还包括3个可选的参数

       void open(string method, string url, Boolean asynch, sting username, string password)

第三个参数传递一个Boolean值，指示这个调用是异步还是同步的。默认值为true，表示请求本质上是异步的。如果这个参数为false，处理就会等待，直到从服务器返回响应为止。最后两个参数允许你指定一个特定的用户名和密码。

 

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

       如果请求声明为异步的，这个方法就会立即返回，否则它会等待直到接收到响应为止。

 

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

 

 

 

XMLHttpRequest 属性 (p26)

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

 

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

 

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

 

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

 

status: 服务器的HTTP状态码（200对应OK，404对应Not Found，等等）

 

statusText: HTTP状态码的相应文本

 

 

 

AJAX 交互示例 (p26)

1、 客户端事件触发Ajax事件。

<input type=”text” name=”email” οnblur=”validateEmail()” />

2、 创建XMLHttpRequest对象的一个实例。使用open()方法建立调用，并设置URL以及所希望的HTTP方法（通常是GET或POST）。请求实际上通过一个send()方法调用触发。

Var xmlHttp;

Function validateEmail(){

Var email = document.getElementById(“email”);

Var url = “validate?email=” + escape(email.value);

 

If (window.ActiveXObject) {

 xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);

} else if (window.XMLHttpRequest) {

 xmlHttp = new XMLHttpRequest();

}

 

xmlHttp.open(“GET”, url);

xmlHttp.onreadystatechange = callback;

xmlHttp.send(null);

}

3、 向服务器做出请求。可能调用servlet、CGI脚本，或者任何服务器端技术。

4、 服务器可以做出你想做的事情，包括访问数据库，甚至访问另一个系统。

5、 请求返回到浏览器。Content-Type设置为text/xml——XMLHttpRequest对象只能处理text/html类型的结果。需要说明，你还需要设置另外一些首部，使浏览器不会在本地缓存结果。如下

response.setHeader(“Cache-Control”, “no-cache”);

response.setHeader(“Pragma”, “no-cache”);

(Pragma和Cache-Control是做相同的是，定义Pragma是为了保证以后的兼容)

6、 在这个示例中，XMLHttpRequest对象配置为处理返回时要调用callback()函数。这个函数会检查XMLHttpRequest对象的readyState属性，然后查看服务器返回的状态码。如果一切正常，callback()函数就会在客户端做些工作。

Function callback() {

 If (xmlHttp.readyState == 4) {

 If (xmlHttp.status == 2) {

 //do something

}

}

}

 

 

 

GET 与 POST(p28)

 

 

 

XMLHttpRequest 对象发送请求的基本步骤 (p31)

1、 为得到XMLHttpRequest对象实例的一个引用，可以创建一个新的实例，也可以访问包含XMLHttpRequest实例的一个变量。

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

3、 指定请求的属性。XMLHttpRequest对象的open()方法会指定将发生的请求。

4、 将请求发送给服务器。XMLHttpRequest对象的send()方法把请求发送给指定的目标资源。Send()方法接受一个参数，通常是一个串或一个DOM对象。这个参数作为请求体的一部分发送到目标URL。当向send()方法提供参数时，要确保open()中指定的方法是POST。如果没有数据作为请求体的一部分被发送，则使用null。

 

你需要XMLHttpRequest对象的一个实例，要告诉它如果状态有变化该怎么做，还要告诉它向哪里发送请求以及如何发送请求，最后还需要指导XMLHttpRequest发送请求。

对于XMLHttpRequest对象，onreadystatechange属性存储了回调函数的指针。当XMLHttpRequest对象内部状态发生变化时，就会调用这个回调函数。当进行了异步调用，请求就会发生，脚本立即继续处理（在脚本继续工作之前，不必等待请求结束）。一旦发生了请求，对象的readyState属性就会经过几个变化。尽管针对任何状态都可以做一些处理，不过你最感兴趣的状态可能是服务器响应结束时的状态。通过设置回调函数，就可以有效地告诉XMLHttpRequest对象：“只要噢响应到来，就调用这个函数来处理响应。”