一、宏观Ajax
二、原理
无Ajax访问浏览器：
通过Ajax访问浏览器：
从图中我们可以看出，使用Ajax和不使用Ajax最大的区别是：在用户和服务器之间加了—个中间层(AJAX引擎),个人觉得它就像一个缓冲池，不用等待服务端的响应后才能进行下一步动作，将响应跟用户操作解耦和。
Ajax 的原理：由事件触发，创建一个 XMLHttpRequest 对象，把 HTTP 方法（ Get/Post ）、目标 URL 、是否异步以及请求返回后的回调函数callback()设置到 XMLHttpRequest 对象，通过 XMLHttpRequest 向服务器发送请求，请求发送后继续响应用户的界面交互，只有等到请求真正从服务器返回的时候才调用 callback() 函数，对响应数据进行处理。三、Ajaxdemo
1.异步刷新（无匿名函数）demo1
<span style="font-size:14px;"><span style="font-size:18px;"> //1.创建Ajax核心对象XMLHttpRequest
var xmlHttp;
function createXMLHttpRequest(){
//表示当前浏览器不是ie,如firefox
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
//2.创建Ajax对象，完成用户代码的判断
function validate(field){
//alert(document.getElementById("userId").value);
alert(field.value+"validate");
if(trim(field.value).length !=0){
//创建Ajax核心对象XMLHttpRequest
createXMLHttpRequest();
//添加一个时间，就不会读取过期缓存了
var url="user_validate.jsp?userId="+ trim(field.value)+"&time="+new Date().getTime();
//设置请求方式为get,请求的url,异步提交
xmlHttp.open("GET",url,true);
//将方法的地址赋值给onreadystatechange属性,<span style="font-family:Microsoft YaHei;"> </span>把callback函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数。
xmlHttp.onreadystatechange=callback;
//将设置信息发送到Ajax引擎
xmlHttp.send(null);
}else{
document.getElementById("spanUserId").innerHTML="";
}
}
function callback(){
alert(xmlHttp.readyState+"callback");
//设置Ajax引擎状态为成功
if (xmlHttp.readyState==4){
//Http协议状态为成功
if(xmlHttp.status==200){
//取得相应文本
//alert(xmlHttp.responseText);
if(trim(xmlHttp.responseText)!=""){
document.getElementById("spanUserId").innerHTML="<font color='red'>"+ xmlHttp.responseText+"</font>";
}else{
document.getElementById("spanUserId").innerHTML="";
}
}else{
alert("请求失败，错误码="+xmlHttp.status);
}
}</span></span>
2.异步刷新（包含匿名函数）demo2
<span style="font-size:14px;"><span style="font-size:18px;">function validate(field){
if(trim(field.value).length !=0){
//创建Ajax核心对象XMLHttpRequest
var xmlHttp=null;
//表示当前浏览器不是ie,如firefox
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//添加一个时间，就不会读取过期缓存了
var url="user_validate.jsp?userId="+ trim(field.value)+"&time="+new Date().getTime();
alert(xmlHttp.readyState);
//设置请求方式为get,异步提交，readystate状态为1
xmlHttp.open("GET",true);
//将方法的地址赋值给onreadystatechange属性,每个状态改变后，都要触发的事件
xmlHttp.onreadystatechange=function(){
alert(xmlHttp.readyState);
//设置Ajax引擎状态为成功
if (xmlHttp.readyState==4){
//Http协议状态为成功
if(xmlHttp.status==200){
//取得相应文本
//alert(xmlHttp.responseText);
if(trim(xmlHttp.responseText)!=""){
//从服务器进行返回的DOM兼容的文档数据对象
document.getElementById("spanUserId").innerHTML="<font color='red'>"+ xmlHttp.responseText+"</font>";
}else{
document.getElementById("spanUserId").innerHTML="";
}
}else{
alert("请求失败，错误码="+xmlHttp.status);
}
}
};
//将设置信息发送到Ajax引擎
xmlHttp.send(null);
}else{
document.getElementById("spanUserId").innerHTML="";
}
}</span></span>
结论：这个两个demo不仅仅是对上述Ajax原理的一个验证，添加了打印xmlHttp.readyState的打印，也让我们更加清晰的看到Ajax不同状态的改变。以第二个例子举例，alert的结果是0,1,2,3,4.没用调用open方法之前，readyState的状态是0，随后每调匿名函数一次，状态值都会发生改变，依次是1,4.
匿名函数，顾名思义，就是没有名字的函数。在demo1中没有使用匿名函数，demo2把XMLHttpRequest实例化放到了validate类里面，callback函数变成了匿名函数，var xmlHttp，全局变量放到了类里面。匿名函数可以有效的保证在页面上写入JavaScript,而不会造成全局变量的污染。
四、总结
Ajax挺好玩的，让我们不用弹出框就能看到输入信息的反映，用户体验度不错。因为只需要进行局部的刷新，所以调用的服务端的资源是很有针对性的，不会存在费力不讨好的现象。网上看到一些言论，说Ajax也有缺点，将web网站的站内信息暴漏了出来，安全问题需要谨慎对待。
很久之前，学习Ajax真的云里雾里，现在真的有一种，蓦然回首，那人却在灯火阑珊处的感觉。
原文链接：https://www.f2er.com/ajax/162654.html