Ajax学习小结

一.Ajax介绍和引擎对象的创建

<script>function createAjax(){var request=false;//window对象中有XMLHttpRequest存在就是非IE，包括（IE7，IE8）if(window.XMLHttpRequest){request=new XMLHttpRequest();if(request.overrideMimeType){request.overrideMimeType("text/xml");}//window对象中有ActiveXObject属性存在就是IE}else if(window.ActiveXObject){var versions=['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];for(var i=0; i<versions.length; i++){try{request=new ActiveXObject(versions[i]);if(request){return request;}}catch(e){request=false;}}}return request;}//注意： 要每次请求都要使用一个新的XMLHttpRequest/*如果使用get将数据传给服务器，则服务器就使用$_GET就直接通过Url将数据传给服务器使用POST时一定要使用ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  */ var ajax=null;function show(){var helloobj=document.getElementById("hello");ajax=createAjax();ajax.onreadystatechange=function(){if(ajax.readyState==4){if(ajax.status==200){var dom=ajax.responseXML;var users=dom.getElementsByTagName("user");alert(users.length);}else{alert("页面请求失败");}}}ajax.open("post", "users.xml", true);ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");ajax.send("username=lisi&email=1111111111");}</script>

二.使用Ajax对象中的属性个方法完成对服务器的请求和响应
1.方法
abort()//停止当前请求
getAllResponseHeader()//作为字符串返回完整的header
getResponseHeader("headerLabel")//作为字符串返回单个header标签
open(method,url,[,asyncFlag,[username,[password]]])//设置未决请求的目标URL，方法和其他参数
send(conten)//发送请求
setRequestHeader("label","value")//设置header并和请求一起发送
2.属性
onreadystatechange //状态改变触发器
readyState//对象状态（0-未初始化；1-读取中；2-已读取；3-交互中；4-完成）
responseText//服务器进程返回数据的文本版本
responseXML//服务器进程返回数据的兼容DOM的XML文档对象
atus//服务器返回的状态码，如：404=“文件未找到”，200=“成功”
statusText//服务器返回的状态文本信息

三.自定义对象简化Ajax的操作

1.测试页面代码

<script src="ajax.js"> </script><script>var ajax=Ajax();    ajax.get("server.php?username=zhangsan&email=aaa@bbb", function(data){alert(data);}); ajax.post("server.php", "username=value&aaa=bb", function(data){alert(data);}); ajax.post("server.php", {username:"zs",age:10,sex:"nan"});</script>

2.Ajax对象代码：

function Ajax(recvType){var aj=new Object();aj.recvType=recvType ? recvType.toUpperCase() : 'HTML' //HTML XMLaj.targetUrl='';aj.sendString='';aj.resultHandle=null;aj.createXMLHttpRequest=function(){var request=false;//window对象中有XMLHttpRequest存在就是非IE，包括（IE7，IE8）if(window.XMLHttpRequest){request=new XMLHttpRequest();if(request.overrideMimeType){request.overrideMimeType("text/xml");}//window对象中有ActiveXObject属性存在就是IE}else if(window.ActiveXObject){var versions=['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];for(var i=0; i<versions.length; i++){try{request=new ActiveXObject(versions[i]);if(request){return request;}}catch(e){request=false;}}}return request;}aj.XMLHttpRequest=aj.createXMLHttpRequest();aj.processHandle=function(){if(aj.XMLHttpRequest.readyState == 4){if(aj.XMLHttpRequest.status == 200){if(aj.recvType=="HTML")aj.resultHandle(aj.XMLHttpRequest.responseText);else if(aj.recvType=="XML")aj.resultHandle(aj.XMLHttpRequest.responseXML);}}}aj.get=function(targetUrl, resultHandle){aj.targetUrl=targetUrl;if(resultHandle!=null){aj.XMLHttpRequest.onreadystatechange=aj.processHandle;aj.resultHandle=resultHandle;}if(window.XMLHttpRequest){aj.XMLHttpRequest.open("get", aj.targetUrl);aj.XMLHttpRequest.send(null);}else{aj.XMLHttpRequest.open("get", aj.targetUrl, true);aj.XMLHttpRequest.send();}}aj.post=function(targetUrl, sendString, resultHandle){aj.targetUrl=targetUrl;if(typeof(sendString)=="object"){var str="";for(var pro in sendString){str+=pro+"="+sendString[pro]+"&";}aj.sendString=str.substr(0, str.length-1);}else{aj.sendString=sendString;}if(resultHandle!=null){aj.XMLHttpRequest.onreadystatechange=aj.processHandle;aj.resultHandle=resultHandle;}aj.XMLHttpRequest.open("post", targetUrl);aj.XMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");aj.XMLHttpRequest.send(aj.sendString);}return aj;}

四.Ajax使用步骤

1.创建Ajax对象//request=new XMLHttpRequest（）;或request=new ActiveXObject();
2.请求服务//ajax.open()
3.发送信息//ajax.send()
4.设置监听//ajax.onreadystatechange;