Javascript快速入门(下篇)

Javascript， cheer up。

Javascript快速入门(下篇)

Ajax：其通过在Web页面与服务器之间建立一个额外的处理层，这个处理层就被称为Ajax引擎，它解释来自用户的请求，在后台以异步的方式处理服务器通信，其结构如下图所示。

Javascript快速入门(下篇)

XMLHttpRequest对象：这个是Ajax的核心对象，其让Javascript构建的HTTP请求并提交给服务器，这样页面就能以异步方式在后台产生请求，让用户可以继续使用这个页面，而不必等待浏览器刷新或加载新的页面。接下来通过一个表格对XMLHttpRequest对象有个总体的了解。

属性与方法	描述
onreadystatechange	当对象的readyState属性改变时，调用相应的时间处理器
readyState	0:未初始化 1:正在加载 2：加载完成 3：交互 4：完成
responseText/rsponseXML	从服务器返回的字符串/文档对象形式数据
status/statusText	服务器返回的HTTP状态代码，解释短语
setRequestHeader(x, y)	设置请求头
abort()	停止当前请求
getAllResponseHeaders() getResponseHeader(x)	以字符串形式返回全部响应头信息返回指定响应头信息
open(method, URL, a)	指定HTTP方法GET/POST,目标URL和处理请求方法(默认a=true，表示异步)
send(content)	发送请求，对于POST数据是可选的

最后通过一个简单的Ajax示例库来对其有个详细的了解。

 1 function getXMLHttpRequest() {
 2 try {
 3 try {
 4 return new ActiveXObject("Microsoft.XMLHTTP"); //IE
 5 } catch (e) {
 6 return new ActiveXObject("Msxml2.XMLHTTP");
 7 }
 8 } catch (e) {
 9 return new XMLHttpRequest(); //Other
10 }
11 }
12 
13 function doAjax(url, query, callback, reqtype, getxml) {
14 var myreq = getXMLHttpRequest();
15 myreq.onreadystatechange = function() {
16 if (myreq.readyState == 4) {
17 if (myreq.status == 200) {
18 var item = myreq.responseText;
19 if (getxml == 1) item = myreq.responseXML;
20 eval(callback + '(item)'); //注意这人的callback的使用方式
21 }
22 }
23 }
24 
25 if (reqtype.toUpperCase() == "POST") {
26 requestPost(url, query, myreq);
27 } else {
28 requestGET(url, query, myreq);
29 }
30 }
31 
32 function requestGET(url, query, req) {
33 var myRandom = parseInt(Math.random() * 99999999);
34 if (query = '') {
35 var callUrl = url + '?rand=' + myRandom;
36 } else {
37 var callUrl = url + '?' + query + '&rand=' + myRandom;
38 }
39 req.open('GET', callUrl, true);
40 }
41 
42 function requestPost(url, query, req) {
43 req.open("POST", url, true);
44 req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
45 req.send(query);
46 }

View Code