Ajax学习总结

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

在这个Ajax对象文件里，实现了创建完整对象，和ajax常用的get，和post方法。

如何使用，下面演示。

 

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

有问题，大家多多提出。