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 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;

原文链接：https://www.f2er.com/ajax/163003.html

猜你在找的Ajax相关文章