什么是xmlhttp
一种浏览器不离开页面主动向服务器请求数据的技术
一种基于XML和HTTP的通信协议
采用XML格式发送请求和接收响应
发送请求和接收响应使用标准的HTTP协议
一种浏览器不离开页面主动向服务器请求数据的技术
一种基于XML和HTTP的通信协议
采用XML格式发送请求和接收响应
发送请求和接收响应使用标准的HTTP协议
Why xmlhttp?
特点
跳开传统的基于form的请求/响应模式
把表示层开发全部前推到浏览器端
利用xmlhttp主动向服务器请求数据,根据请求的数据修改页面中的显示控件
优点
不会造成页面闪烁
适合传递大量数据
更适合传递具有层次关系的数据
传输量更小
对返回结果(xml)的处理更方便
B/S间传递的全部是纯XML数据,表示层与业务层实现了天然的分离
特点
跳开传统的基于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);
需要开发人员掌握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);
如何创建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);
}
带参数发送:
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);
}