一.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的操作
<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 XML aj.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','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;