Ajax(0):理论简介

2005年，Jesse James Garrett 发表了一篇在线文章，题为“Ajax : A new Approach to Web Application”，Ajax技术诞生。Ajax是Asynchronous JavaScript and XML的缩写，这一技术的核心是XMLHttpRequest对象(简称xhr)，xhr能够以异步方式从服务器取得数据，然后再通过DOM将新数据插入到页面中，整个过程中页面没有刷新。虽然名字中包含XML，但它并不仅限于和XML文档一起使用，它可以接收任何形式的文本文档。Ajax通信与数据格式无关，这种技术就是无需刷新页面即可从服务器取得数据，但不一定是XML数据。

XMLHttpRequest的用法：

在使用xhr之前，首先要得到xhr对象，下面的函数可以做到这一点：

<script>
	function getXmlHttpRequest(){
		var xhr=null;
		if((typeof XMLHttpRequest)!='undefined'){
			xhr=new  XMLHttpRequest();
		}else{
			xhr=new ActiveXObject('Microsoft.XMLHttp');
		}
		return xhr;
	}
</script>

得到了xhr对象后，就可以使用了。使用xhr时，要调用的第一个方法时open( )方法，它接受3个参数：要发送的请求的类型(get或post)、请求的URL和表示是否为异步请求的布尔值。譬如：

xhr.open("get","example.PHP",true);

布尔值true表示发送的是异步请求。需要注意的是：调用open( )方法并不会真正发送请求，要实际发送请求，必须调用send( )方法。

xhr.open("get",true);
xhr.send(null);

这里的send( )方法接收一个参数，即要作为请求主体发送的数据。对于get请求，send( )方法的参数必须为null。对于post请求，调用send( )方法时必须传入参数。

服务器收到请求，开始调用相关组件对请求进行处理，最后返回响应数据。当服务器返回响应时，响应的数据自动填充到xhr对象的属性中。

XMLHttpRequest对象的属性如下：

① responseText: 作为响应主体返回的文本。

② responseXML: 如果响应的内容类型为"text/xml"或"application/xml"，那么这个属性中将保存响应数据的XML DOM文档。

③ status: 服务器返回的状态码。

④ readyState: xhr对象与服务器通讯的状态，可以有5个取值：

0: 未初始化。尚未调用open方法
1: 启动。已经调用open方法，尚未调用send方法
2: 发送。已经调用send方法，但尚未接收到响应。
3: 接收。已经接收到部分响应数据。
4: 完成。已经接收到全部响应数据。

只要readystate属性的值发生变化，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readystate的值。通常，我们只对readystate的值为4的阶段感兴趣，因为这时所有数据都已经返回过来了。不过必须在调用open( )方法之前指定onreadystatechange事件处理程序才能确保跨浏览器的兼容性。所以一般流程为：

<script>
var xhr=getXmlHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.status==200){
if(xhr.readystate==4){
//响应数据已经全部返回，可以取得数据并进行操作
}else{
//响应数据暂时还不可用，继续等待
}
}else{
//请求失败
}
}
xhr.open("get",true);
xhr.send(null);
</script>

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

猜你在找的Ajax相关文章