ajax的xmlhttp

 

什么是xmlhttp
一种浏览器不离开页面主动向服务器请求数据的技术
一种基于XML和HTTP的通信协议
采用XML格式发送请求和接收响应
发送请求和接收响应使用标准的HTTP协议

Why xmlhttp?
特点
跳开传统的基于form的请求/响应模式
把表示层开发全部前推到浏览器端
利用xmlhttp主动向服务器请求数据，根据请求的数据修改页面中的显示控件
优点
不会造成页面闪烁
适合传递大量数据
更适合传递具有层次关系的数据
传输量更小
对返回结果（xml）的处理更方便
B/S间传递的全部是纯XML数据，表示层与业务层实现了天然的分离

缺点
需要开发人员掌握JavaScript
需要浏览器支持（IE、Mozilla）
xmlhttp请求数据的两种方式
同步
异步
同步方式
适合少量数据
需要等待传输结束
var xmlhttp = XmlHttp.create();
xmlhttp.open(“POST", ‘queryUsr.action', false);
xmlhttp.send(req);
异步方式
适合大量数据
无需等待传输结束
需要一个回调函数
function f1() {
     alert(xmlhttp.responseXML);
}
var xmlhttp = XmlHttp.create();
xmlhttp.open("GET","/hwsvr2/qe",true);
xmlhttp.onreadystatechange=f1;
xmlhttp.send(null);

开发FAQ
如何创建xmlhttp对象？
引入WebFx xmlextras脚本
<script type="text/javascript" src="../js/xmlextras.js"></script>
<script>
   var xmlhttp = XmlHttp.create();
   xmlhttp.open("POST", ‘queryUsr.action', false);
   ......
何时使用POST/GET方法？
需要构造并发送xml参数对象时使用POST
不需要发送参数时使用GET
如何创建并发送参数对象？
引入ares_common.js
<script type="text/javascript" src="../js/ares_common.js"></script>
<script>
   var req = createReq();
   req = addParam(req, 'usrid', ‘test’);
   xmlhttp.send(req);

何时使用同步/异步？
一般使用同步
大数据量时可以考虑使用异步
使用异步时需要回调函数
function f1() {
     alert(xmlhttp.responseXML);
}
var xmlhttp = XmlHttp.create();
xmlhttp.open("GET","/hwsvr2/qe",true);
xmlhttp.onreadystatechange=f1;
xmlhttp.send(null);

如何发送xmlhttp请求？
带参数发送：
xmlhttp.send(req);
不带参数发送：
xmlhttp.send(null);
如何取得并操纵xmlhttp返回结果？
返回结果是一个DOM对象
prompt(‘返回结果', xmlhttp.responseXML.xml);
var nodes = xmlhttp.responseXML.selectNodes("//data/item");
for(var i = 0; i < nodes.length; i++) {
   node = nodes[i];
   id =node.selectSingleNode('roleid').nodeTypedValue;
   selectItem(id, true);
}