一.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 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', '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;