使用Ajax异步调用
一、Ajax介绍
- Ajax指异步Javascript和XML,Ajax带来用户体验的改变,页面进行局部的异步刷新;
- AJAX = DHTML (HTML、CSS、JavaScript ) + XMLHttpRequest 对象 ;
- 传统web交互模型,浏览器直接将请求发送给服务器,服务器响应直接发给浏览器;而Ajax交互模型,浏览器首先将请求发送Ajax引擎(以XMLHttpRequest为核心),Ajax引擎再将请求发送给服务器,服务器响应先发给Ajax引擎,再由引擎传给浏览器显示。
二、Ajax的使用
- 创建XMLHttpRequest对象;
- 将状态触发器绑定到一个函数;
- 使用open方法建立与服务器的连接;
- 向服务器发送数据;
- 在回调函数中对返回数据进行处理。
xmlHttpReq.open("GET", "url?key=value");
xmlHttpReq.open("POST", "url");
xmlHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttpReq.send("name=xxx&pwd=xxx");
if(xmlHttpReq.readyState == 4) {
if(xmlHttpReq.status == 200) {
}
}
三、Ajax案例
- 通过离开焦点发送Ajax请求验证用户名是否存在;
var xmlHttpReq = createXMLHttpRequest();
xmlHttpReq.onreadystatechange = function() {
if(xmlHttpReq.readyState == 4) {
if(xmlHttpReq.status == 200) {
}
}
};
xmlHttpReq.open("GET", "checkUser?username=" + username);
xmlHttpReq.send(null);
四、jQuery的Ajax
- jQuery库提供了方便的Ajax实现
load(url, [data], [callback])
jQuery.get(url, [data], [callback])
jQuery.post(url, [data], [callback])
jQuery.ajax(options)
jQuery.getJSON(url, [data], [callback])
- 简单示例
$(function(){
$("#mybutton").bind("click", function(){
$("#mydiv").load("URL地址");
});
});