javascript dom 学习笔记（三），ajax

Ajax最主要的优势在于页面的请求以异步的方式发送到服务器。

Ajax核心是XMLHttpRequest对象，是浏览器与服务器的中间人。

兼容所有浏览器

<span style="font-size:18px;">	function getHTTPObject(){ 
		if(typeof XMLHttpRequest == 'undefined'){ 
			XMLHttpRequest = function(){ 
				try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
				catch(e){}
				try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
				catch(e){}
				try{return new ActiveXObject("Msxml2.XMLHTTP");}
				catch(e){}
				return false;
			}
			return new XMLHttpRequest();			
		}

	}</span>

1. var request =  new getHTTPObject();
2. request.open("GET","example.txt",true);
3. request.onreadystatechange = function(){if(request.readyState==4){........}}
4. request.send(null);

XHR对象的readyState属性可取5个状态:

0:未初始化，尚未调用open()方法

1：启动。已经调用了open()方法，但是没调用send()方法

2：发送。调用了send()方法但是没接收响应

3：接收。已经接收到了部分响应数据

4：完成。接收完了所有数据，并且可供客户端使用。

在接收响应后，响应的数据会自动填充XHR对象的属性（status），属性简介：

responseText：作为响应主题被返回的文本

responseXML：如果响应的内容类型为text/xml或者application/xml这个属性中将包含着响应数据的XML DOM文档

status：响应的HTTP状态

statusText：HTTP状态的说明

在接收响应后第一步就是检查status属性，以确定响应已经成功返回。

完整过程：

<span style="font-size:18px;">var request = new getHTTPObject();	
	request.onreadystatechange = function(){ 
		if(request.readyState ==4){ 
			if(request.status>=200&&request.status<300||request.status==304){ 
				alert(request.responseText);
			}else{ 
				alert("数据返回成功"+request.status);
			}
		}
	} 
	request.open("GET",url,true);
	request.send(null);
</span>

这里的send()方法接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，必须传入null，因为这个参数对有些浏览器是必须的（未查到哪些浏览器需要保险起见还是加上null）。调用send()方法之后，请求就会被分派到服务器