Ajax 学习笔记(1)
技术的核心是采用XmlHttp来请求和接收回应。XmlHttp只是一种技术规范,具体的实现上IE和Firefox有所不同,IE是用ActiveX方式,而Firefox是内置实现的。
IE下创建XmlHttp对象:
A=new ActiveXObject('Msxml2.XMLHTTP');
Firefox下创建XmlHttp对象:
A=new XMLHttpRequest();
还可以用下面的写法,可以比较好的兼容IE和Firefox:
function createXH(){
var A=null;
try { A=new ActiveXObject('Msxml2.XMLHTTP') } catch(e) {
try{A=new ActiveXObject('Microsoft.XMLHTTP') } catch(oc) { A=null }
}
if ( !A && typeof XMLHttpRequest != 'undefined' ) { A=new XMLHttpRequest() }
return A
}
创建好XmlHttp之后,接下来就是发送请求和接收回应:
var xmlhttp=createXH();
xmlhttp.open('POST', 'Message/CheckNew.aspx', false);
false - 表示发送消息之后一直等待回应(即同步执行的方式);
true - 表示发送消息之后不等待回应,继续执行下一步(即异步执行的方式);
下面是同步执行的代码写法:
xmlhttp.open('POST', 'Message/CheckNew.aspx', false);
xmlhttp.send(''); // 这里也可以在请求时发送一些数据,如果没有数据,也要发个空数据
var rt=xmlhttp.responseText;
// rt 就是接受回应的数据,接下来就是客户端对rt进行分析处理
同步执行的写法一般情况最好不要用,因为如果请求的服务器端半天不回应或者网络不太稳定的情况下,浏览器会一直等待回应,而且在等待期间浏览器几乎死掉,CPU占用接近100%!
用异步执行的方式就可以避免这个问题,如下:
var xmlhttp = createXH();
function checkNewMessages(){
xmlhttp.open('POST', 'Message/CheckNew.aspx', true);
xmlhttp.onreadystatechange=continue;
xmlhttp.send('');
}
function continue(){
if(xmlhttp.readyState==4){
var rt = xmlhttp.responseText;
}
}
xmlHttp.responseText返回的字符串,如何处理这些字符串?一些Ajax框架对这个处理过程进行了封装,增加很多种数据类型,甚至还可以处理DataSet。如果不想用这些框架,也可以使用简单类型,如请求时将请求数据格式化为Xml方式(便于服务器端的Aspx处理),而返回结果则写成javascript的数组表达式形式(方便客户端进行处理)。
如:
发送时
var xml='<message><receiver>kathy</receiver><content>message context!</content></message>';
...
xmlhttp.send(xml);
接收时服务器端返回的字符串为:
['rrooyy','2005-05-01 08:22:12','See you!']
var rt=xmlhttp.responseText;
var msg=eval(rt);
然后就可以按照数组方式对数据进行处理了;