从去年入行以来，一直用jquery封装的ajax操作，以至于今年上半年在花旗面试的时候别人问我ajax的原理是什么，我也无言以对。
现在闲下来整理一下技术，给自己扫一下盲。
黄金四部法：
首先创建xmlHttpRequest对象：
varxmlHttp;
functioncreateXMLHttpRequest(){
if(window.ActiveXObject){
//正对ie6以及更为古老的ie版本浏览器
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}elseif(window.XMLHttpRequest){
//正对Firefox,chrome,safari,opera以及ie7+浏览器
xmlHttp=newXMLHttpRequest();
}
}
定义返回操作:
varokFunc=function(){
if(xmlHttp.readyState==4){
//readyState从 0 到 4 发生变化。0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪
if(xmlHttp.status==200){
//status即是一般的http状态200为成功
$("#msg").html(xmlHttp.responseText);
}
}
}
执行资源请求命令:
varstartAjax=function(){
$("#msg").html("Loading...");
createXMLHttpRequest();
if(!xmlHttp){
returnalert('xmlHttpcreateFailed!');
}
xmlHttp.open("POST","ajax",true);//post请求
//xmlHttp.open("GET","ajax?test=dadada&t="+Math.random(),true);//t=Math.random()的作用是避免直接调用缓存，确保每次和服务器通信
xmlHttp.onreadystatechange=okFunc;
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//xmlHttp.send();
xmlHttp.send("test=dadada2");
//xmlHttp.send(text);其中的text仅针对post请求适用
}
鼠标事件操作：
$(document).ready(function(){
$("#start").click(startAjax);
});
当然在自己的项目中，直接使用这样的代码是不太合适的，可以对其进行封装或者直接使用jquery，重复造轮子费时费力不可取。
原文链接：https://www.f2er.com/ajax/165651.html