浅谈ajax（一）

对于学习web开发的同学来说，在很多地方都看过或听过ajax。那究竟什么是ajax呢？按照经典三段式的形式（what，why，how），来认识一下“神秘”的ajax。

what

2005年，Jesse James Garrett发表了一篇在线文章，题为“Ajax：A new Approach to Web Applications”。他在这篇文章里介绍了一种技术，用他的话说，就叫Ajax。

Ajax即“Asynchronous Javascript And XML”（异步JavaScript和XML），Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

---

上面是一种比较官方的说法，虽然很严谨，但是对于没有接触过Ajax的同学来说，很是难以理解。这里我拿一个打电话的例子，来形象说明。可能不够准确，但是确实很容易理解。

客户端与服务器的连接，就好比你拿着手机与A通话。如果A向你问了一个问题，而你不会，只能先去请教B。这时你该怎么做呢？是不是只能挂断A的电话而去拨打B的电话。也就意味着客户端与服务器端失去了连接，转而建立新的连接。

还有另一种可能，你比较有钱，买了两部手机。那么，你就完全不需要挂断A的电话了。你需要做的仅仅是要A先等等，然后拨打B的电话，询问答案，知道后可以立刻告诉A。

Ajax就可以实现无须刷新整个网页，就可以在后台与服务器进行少量数据交换后，更新部分网页。

why

我们来看看为什么要使用Ajax呢？

特点

• 使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。
• Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
• Ajax 可使因特网应用程序更小、更快，更友好。
• Ajax 是一种独立于 Web 服务器软件的浏览器技术。

应用

• 表单驱动的交互
  传统的表单提交，在文本框输入内容后，点击按钮，后台处理完毕后，页面刷新，再回头检查是否刷新结果正确。使用Ajax，在点击sunmit按钮后，立刻进行异步处理，并在页面上快速显示了更新后的结果，这里没有整个页面刷新的问题。
• 深层次的树的导航
  深层次的级联菜单（树）的遍历是一项非常复杂的任务，使用JavaScript来控制显示逻辑，使用Ajax延迟加载更深层次的数据可以有效的减轻服务器的负担。
• 用户间的交流响应
  在众多人参与的交流讨论的场景下，最不爽的事情就是让用户一遍又一遍刷新页面以便知道是否有新的讨论出现。新的回复应该以最快的速度显示出来，而把用户从分神的刷新中解脱出来，Ajax是最好的选择。
• 类似投票等场景
  对于类似这样的场景中，如果提交过程需要达到40秒，很多的用户就会直接忽略过去而不会参与，但是Ajax可以把时间控制在1秒之内，从而更多的用户会加入进来。
• 过滤场景
  对数据使用过滤器，按照时间排序，或者按照时间和名称排序，开关过滤器等等。任何要求具备很高交互性数据操纵的场合都应该用JavaScript，而不是用一系列的服务器请求来完成。在每次数据更新后，再对其进行查找和处理需要耗费较多的时间，而Ajax可以加速这个过程
• 文本输入场景
  在文本框等输入表单中给予输入提示，或者自动完成，可以有效的改善用户体验，尤其是那些自动完成的数据可能来自于服务器端的场合，Ajax是很好的选择。

how

那么究竟应该怎么使用Ajax呢？这一点相信是很多同学都迫切想知道的，那么有用的技术代码究竟是如何？

XMLHttpRequest对象

Ajax的核心技术是XMLHttpRequest对象（简称XHR），这是由Microsoft首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。通过XHR对象取得新数据，然后再通过DOM将新数据插入到页面中。

在IE5中，XHR对象是通过MSXML库中的一个ActiveX对象实现的。如果你想兼容IE7之前的版本，那么你还需要额外编写一个函数。在这篇博文中，我只用到原生的XHR对象（如果有需求，可以自行百度谷歌或者留言）。

XHR的用法

在使用XHR对象时，需要调用的第一个方法是open（），它接受3个参数：要发送的请求类型，如：“get”“post”，请求的url和表示是否异步发送请求的布尔值。
例：
xhr.open("get","url.php",true);
这行代码会启动针对url.php的GET请求，好比你点击了一个跳转到url.php的a链接。

调用open（）方法并不会真正发送请求，而是请求一个请求以备发送。

要发送真正的请求，必须像下面这样调用send（）方法。
xhr.open("get","url.php",true);
xhr.send(null)
在收到响应后，响应的数据会自动填充XHR对象属性，相关属性简介如下。

• responseText：作为响应主体被返回的文本；
• responseXML：如果响应的内容类型是“text/xml”或是“application/xml”，这个属性中将保存包含着响应数据的XML DOM文档。
• status：响应的HTTP状态说明。200说明成功，304表示请求资源未被修改。

在异步的运用中还有一个很重要的属性readyState，该属性表示请求/响应过程的当前活动状态。这个属性的可取值如下。

• 0：为初始化。尚未调用open（）方法。
• 1：启动。已经调用open（）方法。
• 2：发送。已经调用send（）方法。
• 3：接受。已经接收到不会响应数据。
• 4：完成。已经接受全部响应内容。

只要readyState的属性值由一个值变成另一个值，都会出发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。不过，必须在调用open（）之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。

GET请求

var xhr = new XMLHttpRequest();xhr.onreadystatechange = function  () {    if(xhr.readyState == 4){        if((xhr.status >= 200 && xhr.status <300) || xhr.status == 304){            alert(xhr.responseText());        }else{            alert("Request was unsuccessful:" + xhr.status);        }    }}xhr.open("get","url.php?id=5",true);xhr.send(null);

POST请求

var xhr = new XMLHttpRequest();xhr.onreadystatechange = function  () {    if(xhr.readyState == 4){        if((xhr.status >= 200 && xhr.status <300) || xhr.status == 304){            alert(xhr.responseText());        }else{            alert("Request was unsuccessful:" + xhr.status);        }    }}xhr.open("post","url.php",true);xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");var form = document.getElementById("user-info");xhr.send(serialize(form));

这篇博客中只是给出了get和post的简单示例，详细用法，我将在下一篇中讲到。