Ajax学习总结

最新推荐文章于 2022-04-14 11:32:18 发布

FsnailWang

最新推荐文章于 2022-04-14 11:32:18 发布

阅读量866

点赞数

分类专栏： PHP笔记

本文链接：https://blog.csdn.net/zixueit/article/details/11527873

版权

PHP笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Ajax学习总结。因为自己js的基础不是很好，学起来有点费劲，但还是基本上搞明白了,写下来分享一下。

学习Ajax注意事项

一、首先明确为什么要学习Ajax？

1) 浏览网页（不适用Ajax），当我们浏览一个网页的时候，单击之后便是空白的等待，非常的不友好。

2) 同样是浏览网页（使用Ajax），当我们在单击网页上某个元素后，不会是整个页面的刷新，页面完好，只是部分去请求服务器，然后将返回的数据以某种形式显示出来，很友好，这段时间，你可以继续浏览网页的其它元素。

何为ajax，即：ajax是一种异步交互技术。

二、使用Ajax的好处？

1)可以实现局部刷新，更友好。

2)按需取数据，减轻了服务器压力。

三、ajax的优缺点？

有点很明显。缺点就是各个浏览器创建对象的方式不同，比较麻烦。

四、ajax的应用？

引用很广，我所知道的经常用到的地方：唯一校验，无刷新页面等等。

五、学习步骤：（学习前必备，有一定的js，DOM，xml基础）

1、学习创建Ajax对象（因为IE的垄断思维，导致了我们创建个对象都很麻烦）

浏览器大可分成两种：
一种是IE系列的浏览器（IE5 IE5.5 IE6.0 ，IE7 IE8 IE9 IE10 IE11）
一种是非IE系列的浏览器（都是按W3C标准）FF Mozilla NetScape

2、认识Ajax引擎对象的一些属性和方法

abort()                           停止当前请求
getAllResponseHeaders()           作为字符串返回完整的headers
getResponseHeader("headerLabel") 作为字符串返回单个的header标签
设置要请求的目标 URL，方法，和其他参数
open("method","URL"[,asyncFlag[,"userName"[,"password"]]])
send(content)                     发送请求
setRequestHeader("label","value") 设置header并和请求一起发送

Ajax引擎对象中的属性
onreadyStatechange     状态改变的事件触发器
readyState             对象状态(integer):
   0 = 未初始化 M1=读取中 M2=已读取 M3=交互中 M4=完成

responseText            服务器进程返回数据的文本版本
responseXML             服务器进程返回数据的兼容DOM的XML文档对象
status                  服务器返回的状态码，如：404 ="文件未找到",200="成功"
statusText              服务器返回的状态文本信息

学习的时候，跟老师学写了一个ajax对象。大家可以保存下来，以后直接使用就行

function Ajax(recvType){
	var aj =new Object();  //创建一个空对象
	
	aj.recvType=recvType?recvType.toUpperCase():"HTML"; //HTML XML
	aj.targetUrl='';
	aj.sendString='';


	aj.createXMLHttpRequest=function(){  //创建Ajax对象的函数
		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.XMHTTP.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(); //创建ajax对象
	
	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);

			}
		}
	}

	//get方法
	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();
		}

	}
	
	//post方法
	aj.post=function(targetUrl,sendString,resultHandle){
		aj.targetUrl =targetUrl;

		if(typeof(sendString) == "object"){
			var str ="";

			for(var pro in sendString){ //用 for in方法 遍历对象属性
				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对象文件里，实现了创建完整对象，和ajax常用的get，和post方法。

如何使用，下面演示。

<script src="ajax.js"></script>

<script>
	var ajax =Ajax();
/*
	ajax.get("serv.php?username=zhangsan&email=aaa@bbb",function(data){
		alert(data);
	});
*/

/*
	ajax.post("serv.php","username=value&aaa=bb",function(data){
		alert(data);
	});
*/


	ajax.post("serv.php",{username:"zs",age:10,sex:"nan"},function(data){//post请求对象
 		alert(data);
	});


</script>

封装的这个对象，使用时，直接var ajax = new Ajax() 来个对象。然后ajax.get() 和 ajax.post() 就可以了，然后注意post的两种情况(请求数据是否为对象)。

有问题，大家多多提出。