索引
1。AJAX原理
2。AJAX核心——XMLHttpRequest简介
1.AJAX原理
AJAX是Asynchronous JavaScript + XML的简称,它是一系列技术的组合:
- 使用XHTML和CSS的基于标准的表现形式
- 使用文档对象模型DOM的动态交互展示
-
使用XML
以及XSLT的数据交互操控 - 应用XMLHttpRequest的异步数据检索
经典的网络应用模型是以下面的方式进行工作的:用户在客户端触发一个HTTP请求并返回给服务器。服务器端做了一些处理,比如检索数据,分析数值, 与历史遗留系统(legacy systems)交互然后返回给客户端HTML页面。这是一种较适合网络早期的超文本媒体处理模型,但是使网页适合于超文本的因素并不适用于软件应用。
图一:
网络应用的传统模型(左)与AJAX 模型(右)的对比
每一个会生成HTTP请求的用户活动通常以JavaScript 的形式调用AJAX引擎。每一个“无需返回服务器端的”用户请求——如简单数据验证,内存中编辑数据以及一些导航——都由AJAX引擎自行处理了。如果引擎需要响应从服务器端返回——如果提交数据用于处理,下载更多的界面数据, 或检索新数据——那么引擎将使用XML来异步这些请求,而无需停止用户与应用的交互。
HTTP._factories = {
function { return new XMLHttpRequest(); },
function { return new ActiveXObject("Msxml2.XMLHTTP"); },
function { return new ActiveXObject("Microsoft.XMLHTTP"); }
}
HTTP._factory = null
//创建一个XMLHttpRequest对象
HTTP.newRequest = function() {
if(HTTP._factory != null) {
return HTTP._factory();
}
for(var i = 0; i < HTTP._factories.length; i++) {
try {
var factory = HTTP._factories[i];
var request = factory();
if(request != null) {
HTTP._factory = factory;
return request;
}
} catch(e) {
continue;
}
}
HTTP._factory = function() {
throw new Error("XMLHttpRequest not supported");
}
HTTP._factory();
}
XMLHttpRequest对象不仅保存着所做出的HTTP请求的细节,而且也代表服务器的响应。置open()中async=false,则send()方法是同步的,它会阻塞直到服务器响应为止。一旦它返回,可以使用请求对象的status属性和statusText属性来检查服务器所返回的HTTP状态码和状态码名称。
request.onreadystatechang = function() {
if(request.readyState == 4) {
if(request.status == 200) {
alert(request.responseText);
}
}
}
request.open("GET", url);
request.send(null);
request.onreadystatechange = function() {
if(request.readyState == 4) {
if(request.status == 200) {
alert(request.responseText);
}
}
}
request.open("GET", url);
request.send(null);
HTTP.getText = function(url, callback) {
var request = HTTP.newRequest();
request.onreadystatechange = function() {
if(request.readyState == 4 && request.status == 200) {
callback(request.responseText);
}
}
request.open("GET", url);
request.send(null);
}
//getXML()工具
HTTP.getXML = function(url, callback) {
var request = HTTP.newRequest();
request.onreadystatechange = function() {
if(request.readyState == 4 && request.status == 200) {
callback(request.responseXML);
}
}
request.open("GET", url);
request.send(null);
}
HTTP.getXML = function(url, callback, errorHandler) {
var request = HTTP.newRequest();
request.onreadystatechange = function() {
if(request.readyState == 4) {
if(request.status == 200) {
callback(HTTP.parseHeaders(request));
} else {
if(errorHandler)
errorHandler(request.status, request.statusText);
else
callback(null);
}
}
}
request.open("HEADER", url);
request.send(null);
}
HTTP.parseHeaders = function(request) {
var headerText = request.getAllResponseHeaders();
var headers = {};
var ls = /^\s*/;
var rs = /\s*$/;
var lines = headerText.split("\n");
for(var i = 0; i < lines.length; i++) {
var line = lines[i];
if(line.length == 0) continue;
var pos = line.indexof(":");
var name = line.substring(0, pos).replace(ls, "").replace(ts, "");
var value = line.substring(pos+1).replace(ls, "").replace(ts, "");
headers[name] = value;
}
return headers;
}
//post工具
HTTP.post = function(url, values, callback, errorHandler) {
var request = HTTP.newRequest();
request.onreadystatechange = function() {
if(request.readyState == 4) {
if(request.status == 200) {
callback(HTTP._getResponse(request));
} else {
if(errorHandler)
errorHandler(request.status, request.statusText);
else
callback(null);
}
}
}
request.open("POST", url);
request.setRequestHeader("Cotent-Type", "application/x-www-form-urlencoded");
request.send(HTTP.encodeFormData(values));
}
HTTP.encodeFormData = function(data) {
var pairs = [];
var regexp = /%20/g; //匹配编码的空格
for(var name in data) {
var value = data[name].toString();
var pair = encodeURIComponent(name).replace(regexp, "+") + "=" + encodeURIComponent(value).replace(regexp, "+");
}
return pairs.join("&");
}
HTTP._getResponse = function(request) {
switch(request.getResponseHeader("Content-Type")) {
case "text/xml":
return request.responseXML;
case "text/json":
case "text/javascript":
case "application/javascript":
case "application/x-javascript":
return eval(request.responseText);
default:
return request.responseText;
}
}