AJAX开发框架
AJAX实质上也是遵循B/S模式,所以这个框架基本的流程是:
只不过这个过程是异步的。
A、初始化XMLHttpRequest对象
1 function createXHR(){ 2 var xhr; 3 try{ //Firefox, Opera, Safari,。。。 4 xhr=new XMLHttpRequest(); 5 }catch (e){ 6 try{//IE 7 xhr=new ActiveXObject("Microsoft.XMLHTTP"); 8 }catch (e){} 9 } 10 } 11 return xhr; 12 }
B、指定响应处理函数
XMLHttpReq.onreadystatechange = processResponse;
XMLHttpReq.onreadystatechange = function() { };
// 处理返回信息的函数
function processResponse() {
}
C、发出HTTP请求
http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null)
这时资料则以查询字符串的形式列出,作为send的参数,例如:
name=value&anothername=othervalue&so=on
D、处理服务器返回的信息
处理响应处理函数都应该做什么。
1 首先,它要检查XMLHttpRequest对象的readyState值,判断请求目前的状态。参照前文的属性表可以知道,readyState值为4的时候,代表服务器已经传回所有的信息,可以开始处理信息并更新页面内容了。如下: 2 if (http_request.readyState == 4) { 3 // 信息已经返回,可以开始处理 4 } else { 5 // 信息还没有返回,等待 6 } 7 服务器返回信息后,还需要判断返回的HTTP状态码,确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中,200代表页面正常。 8 if (http_request.status == 200) { 9 // 页面正常,可以开始处理信息 10 } else { 11 // 页面有问题 12 }
E、动态显示信息
数据格式提要
在服务器端 AJAX 是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。
从服务器端接收数据的时候,那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下 3 种格式返回数据:
解析 HTML
HTML 由一些普通文本组成。如果服务器通过 XMLHttpRequest发送 HTML, 文本将存储在 responseText属性中。
插入 HTML 代码最简单的方法是更新这个元素的 innerHTML属性。
HTML 小结
XML小结
JSON 小结
HTML/XML/JSON对比小结