Ajax的工作原理和过程
1.Ajax的工作原理
Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax异步请求
请求过程：浏览器(当前页面不会丢弃) --> Ajax引擎(http协议) --> Web服务器
响应过程：Web服务器 --> 准备部分数据 ---> Ajax引擎(http协议) --> dom编程
2.Ajax的工作过程
(1)创建Ajax引擎对象(XMLHttpRequest(其它)、ActiveXObject(ie))
var xhr =newXMLHttpRequest();// msie7+、firefox、chrome、opera
var xhr =newActiveXObject("msie浏览器的版本号");// msie7-
(2)调用xhr.open()方法打开服务器之间的连接
//请求方式post|get/请求的URL/true: 异步请求的异步 false: 异步请求的同步xhr.open("get|post","url",true|false);
(3)发送异步请求
(4).获取服务器端的响应数据
3.例子
// 创建Ajax引擎对象
(function(){
// msie7+、firefox、chrome、opera
if (window.XMLHttpRequest){
window.xhr = new XMLHttpRequest();
}else{// ms ie7-
// ActiveXObject();
// 定义msie浏览器版本号
var xmls = ["MSXML2.XMLHTTP.7.0",
"MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"Microsoft.XMLHTTP"];
for (var i = 0; i < xmls.length; i++){
try{
window.xhr = new ActiveXObject(xmls[i]);
break;
}catch(e){
alert(e);
}
}
}
})();
window.onload = function(){
document.getElementById("btn").onclick = function(){
var userId = document.getElementById("userId").value;
var pwd = document.getElementById("pwd").value;
xhr.open("get", "login?userId=" + userId + "&pwd=" + pwd, true);
// 设置请求头，用来告诉浏览器对我的请求进行form-urlencode编码
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if (xhr.status == 200){
var res = xhr.responseText;
document.getElementById("div").innerHTML = res;
}
}
};
};
};
JQuery异步请求
$.ajax(url, {
type : "get|post", // 请求方式
data : "{key:vlaue,key:value}", // 请求参数
dataType : "html|text|json|script|xml|jsonp", // 服务器响应回来的数据类型
async : true|false, // 异步还同步
success : function(data){ // 请求成功回调的函数
// data : 响应数据
},
error : function(){ // 请求失败回凋的函数
}
});
$.get(
"get.action",
"userId=" + userId,
function(data, status){
if (status == "success"){
$("#res").html(data);
}
},
"text"
);
$.getJSON(
"getJSON.action",
"userId=" + userId,
function(data, status){
if (status == "success"){
$("#res").html(data.name + "==" + data.age);
}
}
);
$.getScript(
"getScript.action",
function(data, status){
if (status == "success"){}
}
);
$("#div").load(
"data/menu.html",
function(data, status){
if (status == "success"){
}
}
);
$.post(
"post.action",
params,
function(data, status){
if (status == "success"){
$("#res").html(data);
}
},
"text"
);
