JavaScript之Ajax之美~

时间：2016-11-20 19:18:44 阅读：248 评论：0 收藏：0 [点我收藏+]

　　JavaScript之Ajax之美~

　　曾经有一段时期，因为开发人员对JavaScript的滥用导致其遭受了一段时间的冷门时期，不被大家看好，后来，到了2005年，Google公司的很多技术都是用了ajax之后，JavaScript才又火热了起来，可以说，是Ajax拯救了JavaScript，就目前来说，熟练使用Ajax已经成为了所有web开发人员必须掌握的技能。那么Ajax又是什么呢？它的作用是什么呢?

第一部分：Ajax简介

　　Ajax即Asynchronous JavaScript +XML的简写，这一技术能够向服务器请求额外的数据而无需卸载页面，会带来更好地用户体验。Ajax的核心是XMLHttpRequest对象（简称XHR，这一对象受到chrome、safari、FF、opera等主流浏览器的支持），这是由微软首先引入的一个特性，IE 浏览器使用 ActiveXObject，后来浏览器提供商都提供了相同的实现。XHR对象的存在，意味着当用户点击之后，不必刷新页面也可以从后台取得新数据，也就是说，可以试用XHR对象取得新数据，然后通过DOM方式将新数据插入到页面中，达到对网页的某部分进行更新的效果。值得注意的是：虽然，Ajax中包含了xml，但是我们在无需刷新页面就得到的数据不一定是xml数据。

第二部分：XHR对象的创建

　　上面讲到，Ajax的核心是XMLHttpRequest对象，那么我们如何创建一个XMLHttpRequest对象呢？

　　首先，我们应当知道：所有浏览器都支持XMLHttpRequest对象，其中IE5和IE6使用ActiveXObject对象。并且现在所有浏览器（IE7+、FireFox、Chrome、Safari以及Opera）均内建了XMLHttpRequest对象。于是创建XMLHttpRequest对象的语法是：

var xhr = new XMLHttpRequest（）;

　　刚刚提到老版本的Internet Explorer(IE5和IE6)使用的是ActiveXObject对象，所以语法是：

var axo = new ActiveXObject("Microsoft.XMLHTTP");

　　注意：其中传入的“Microsoft.XMLHTTP”是不能改变的。

　　于是，为了应对所有的现代浏览器（包括IE5和IE6），请首先检查是否支持XMLHttpRequest对象：如果支持，则创建XMLHttpRequest对象；如果不支持，则创建ActiveXObject对象：

var xmlHttp=null;
if(window.XMLHttpRequest)
{   
    xmlHttp=new XMLHttpRequest();
}
else
{
    xlmHttp=new ActiveXObject("Microsoft.XMLHTTP");
}

　　关于这个应对所有现代浏览器的代码应当注意：

我将xmlHttp的值设置为null，是因为null值表示一个空对象指针，而这也正是使用typeof操作符检测null值是会返回“object”的原因，因此：如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null而不是其他值。
之所以可以试用window.XMLHttpRequest来检测其是否存在，是因为XMLHttpRequest是window对象的属性。

第三部分：XHR对象的用法(属性与方法等)

　　上面两部分，我们介绍XHR对象是什么以及怎么创建，这一部分我将谈一谈XHR对象的用法。

　　⑴.open（）方法

　　既然XHR是一个对象，那么它就一定有自己的属性和方法。在使用XHR对象时，要调用的第一个方法是open()。它接受3个参数：

要发送的请求的类型：get、post、put、delete等等。
请求的URL（这个URL既可以是绝对路径，也可以是相对路径）。
是否异步发送请求的布尔值：true表示异步发送请求，false表示同步发送请求。

　举例如下：

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

　　此时，这段代码会启动一个针对example.php的GET请求。注意：open()方法并不会真正的发送请求而只是启动一个请求以备发送。那么怎么才能发送特定的请求呢，这是就要用到send()方法了。

　　⑵.send（）方法

　　刚刚说到open()方法，只是开启（open），还没有发送，而send才是真正地发送。它接受一个参数：

作为请求主体发送的数据

　　注意：如果不需要通过请求主体发送数据，则必须传入null。一般get请求不需要传入参数，而对于post请求，如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。这一部分会详细介绍，下面举一个简单例子：

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

　　(3).XHR对象的几个属性

　　通过send()发送之后，会接受到响应，响应的数据会自动填充XHR对象的属性。主要有以下几种：

responseText:作为响应主体被返回的文本
responseXML：如果响应的内容类型是"text/xml"或"application/xml",这个属性中将保存包含着相应数据的XML DOM文档。
status：响应的http状态
statusText:Http状态的说明

　　在接收到响应后，一般是先检查status属性，来确定响应是否成功返回，一般状态代码200表示成功（以2开头即表示成功），这是responseText就可以被访问了。而状态代码为304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本，因此这种响应也是有效的。于是可以通过下面的代码检测这两种状态：

	xhr.open("get","example.php",false);
	xhr.send(null);
	if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
		alert(xhr.responseText);
	}else{
		alert("Request waw unseccessful:"+"xhr.status");
	}

　　XHR对象的readystate属性

　　使用Ajax我们当然还是希望发送异步请求的：如果发送同步请求，那么一旦网卡住了，这个页面就不会有任何反应而是继续等待响应，但是发送异步请求，即使网卡住，也不用担心，因为它是异步的。而readystate属性可以检测到请求/响应过程的当前活动阶段。它有5个取值，分别如下：

技术分享

　 关键：只要readystate的值改变（比如从0变为1，从1变为2等等），那么每次地改变都会触发readystatechange事件。并且可以通过这个时间检测每次状态变化后的readystate的值。当值为4是最重要的，因为这事所有的数据已经准备就绪。看一个例子：

	var xhr=new XMLHttpRequest();
	xhr.open("get","example.php",false);
	xhr.onreadystatechange=function(){
		if(readystate==4){
			if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
				alert(xhr.responseText);
			}else{
				alert("Request waw unseccessful:"+"xhr.status");
			}
		}
	};
	xhr.send(null);

　　　注意以下几点：

xhr.onreadystatechange前面有一个on，这是因为我们使用的是DOM0级方法为XHR对象添加了时间处理程序，没有利用addEventListener这种DOM2级方法，是因为并非所有的浏览器都支持DOM2级方法。
这个例子中我们没有使用this对象，是因为onreadystatechange时间处理程序的作用域问题。如果使用this对象，在有的浏览器中会导致函数执行失败或者导致发生错误。因此，使用实际的XHR对象实例便利那个是一种较为可靠的方式。

　　(4).abort（）方法

　　在接受到响应之前，我们还可以使用abort()方法来取消异步请求，如下所示：