AJAX开发框架
发布时间：2020-12-15 22:09:47 所属栏目：百科 来源：网络整理
导读：AJAX实质上也是遵循Request/Server模式，所以这个框架基本的流程是： 对象初始化 发送请求 服务器接收 服务器返回 客户端接收 修改客户端页面内容。 只不过这个过程是异步的。 A 初始化 XMLHttpRequest 对象 function createXmlHttpRequest(){ var xmlHttp;
|
AJAX实质上也是遵循Request/Server模式，所以这个框架基本的流程是：
对象初始化
发送请求
服务器接收
服务器返回
客户端接收
修改客户端页面内容。
只不过这个过程是异步的。
A 初始化XMLHttpRequest对象
function createXmlHttpRequest(){
var xmlHttp;
try{ //Firefox,Opera 8.0+,Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
try{ //Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){}
}
}
return xmlHttp;
}
B、指定响应处理函数
指定当服务器返回信息时客户端的处理方式。只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了.比如：
XMLHttpReq.onreadystatechange = processResponse;
注意:这个函数名称不加括号，不指定参数。也可以用Javascript函数直接量方式定义响应函数。比如：
XMLHttpReq.onreadystatechange = function() { };
// 处理返回信息的函数
function processResponse() {
}
C、发出HTTP请求
向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。
http_request.open('GET','http://www.example.org/some.file',true);
http_request.send(null)
按照顺序，open调用完毕之后要调用send方法。send的参数如果是以Post方式发出的话，可以是任何想传给服务器的内容。
注意:如果要传文件或者Post内容给服务器，必须先调用setRequestHeader方法，修改MIME类别。如下：
http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
这时资料则以查询字符串的形式列出，作为send的参数，例如：
name=value&anothername=othervalue&so=on
//发送请求
lfunction sendRequest(){
//获取文本框的值
var chatMsg=input.value;
var url="chatServlet.do?charMsg="+chatMsg;
//建立对服务器的调用
XMLHttpReq.open("POST",url,true);
//设置MiME类别,如果用 POST 请求向服务器发送数据，
//需要将"Content-type" 的首部设置为 "application/x-www-form-urlencoded".
//它会告知服务器正在发送数据，并且数据已经符合URL编码了。
XMLHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//状态改变的事件触发器,客户端的状态改变会触发readystatechange事件,
//onreadystatechange会调用相应的事件处理函数
XMLHttpReq.onreadystatechange=processResponse;
//发送数据
XMLHttpReq.send(null);
}
D、处理服务器返回的信息
处理响应处理函数都应该做什么。
首先，它要检查XMLHttpRequest对象的readyState值，判断请求目前的状态。参照前文的属性表可以知道，readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：
if (http_request.readyState == 4) {
// 信息已经返回，可以开始处理
} else {
// 信息还没有返回，等待
}
服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200代表页面正常。
if (http_request.status == 200) {
// 页面正常，可以开始处理信息
} else {
// 页面有问题
}
lXMLHttpRequest对成功返回的信息有两种处理方式：
lresponseText：将传回的信息当字符串使用；
lresponseXML：将传回的信息当XML文档使用，可以用DOM处理
l//处理返回信息的函数
function processResponse(){
if(XMLHttpReq.readyState==4){ //判断对象状态 4代表完成
if(XMLHttpReq.status==200){ //信息已经成功返回，开始处理信息
document.getElementById("chatArea").value=XMLHttpReq.responseText;
}
}
}
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |