Ajax其实是一个缩写词,其全称是“Asynchronous JavaScript and XML”即异步JavaScript和XML。从字面上来看Ajax至少包含了三个部分。
— Asynchronous异步:说明Ajax的交互方式是异步的。传统的网页交互方式都是通过用户填写表单(form),通过用户提交表单时向远端Web服务器发送一个请求,服务端接收表单,并从请求对象(Request)中取出用户提交的表单的信息并处理然后返回结果并呈现,至此用户在网页上完成一次网页刷新。而Ajax采用的异步交互技术,是浏览器使用内置JavaScript对象XmlHttpRequest(这是一个非常重要的对象,在后面将会对它做详细阐述)向服务器端发起一个异步的请求,在请求发起于返回期间并不刷新页面,用户在当前页面的一切操作并不会受到阻塞,用户可以在此期间操作页面上的一切元素,这样使许多以前不能实现的应用得以实现,如Google Map的地图拖动后的地图异步加载。假想如果每拖动一次页面将会刷新一次来加载地图,可以预见得到的用户体验将是难以忍受的。
— JavaScript:此处的JavaScript指的是应用于浏览器上的客户端脚本。JavaScript作为一种主流的浏览器客户端脚本技术,具有良好的开放性、易用性及灵活性,因此也奠定了它在Ajax技术中的核心地位,这也使得好多人觉得Ajax技术实际上是JavaScript脚本技术的一种拓展。实际上Ajax技术正是许多Web技术揉合的结果,JavaScript正是其中一项占有核心地位的应用技术。要学习Ajax首先了解和学习JavaScript是很重要的。
— XML:作为近年来热门技术之一,在众多领域发挥了其巨大的优势与潜能。同样在Ajax技术中XML占有至关重要的作用,浏览器在使用XmlHttpRequest向服务端发送和返回请求的时候正是使用了XML来包裹和传送数据。Ajax的提出者Jesse James Garrett在最初提出此概念的时候希望XML能作为标准的Ajax数据传输方式,但在实际运用中人们发现后来提出的JSON(JavaScript Object Notation)在Ajax应用中比XML更为易用和高效,特别是JSON在JavaScript中的灵活使得人们在实际应用中更为乐于使用JSON来传送数据。
Ajax技术除了主要包括这三方面外还包括许多重要的重要的技术,如DOM(Document Object Model),XHTML+CSS等在此就不一一列举。可以说Ajax技术是集多种技术为一体的综合性技术解决方案,提出了一种Web技术应用的新方式,利用它我们可以从一个新的角度来看待Web应用程序,能向一个新的方向去发展Web应用。
前面已经叙述了Asynchronous(异步)是
Ajax的基本工作方式。但具体来说
Ajax在浏览器和服务端之间是怎么样个异步法,
和传统的synchronous(同步)交互方式又有怎么样的区别呢?
首先我们来说明两种交互方式的区别,对于传统模式来说客户端在浏览器中进行了一系列的操作以后通过提交表单向服务端发起请求,此时客户端网页刷新等待服务端返回结果,在这期间客户端浏览器存在一个“空白期”,即等待服务端返回页面数据的时间,在此期间用户除了等待之外不能进行任何操作,直到服务端处理完逻辑返回结果,用户才能继续操作。这样的模式是在万维网服务和浏览器诞生之初就已确定的标准交互模式,对于简单的Web应用,如注册用户是填写提交表单,这样的模式能很好达到目的并完成业务,对于用户来说短暂的等待和并不频繁的提交动作也是合理并且能够接受的。
但对于需要频繁与为服务端交互数据的情况,传统的刷新方式就显得笨拙而低效,此时
Ajax就有了用武之地。在
Ajax的异步交互模式中,我们看到在客户端除了用户能看得见Browser UI元素外,还存在一个
Ajax engine的层级,Browser UI将用户的操作提交给
Ajax engine处理,
Ajax engine将用户的数据和操作分析后再与远端服务器交互,并得到远端服务器返回的数据,
Ajax engine将这些返回的数据处理以后再将这些数据呈现在Browser UI上。在整个过程中可以看到客户端浏览器并没有存在一个“空白期”,这样用户并没有感觉到在交互的整个过程中有任何的等待期,用户可以在交互过程中浏览页面上的任何信息,或者对页面元素进行任何操作,这样对于用户来说具有较好的体验。相比之下两种交互方式,
Ajax只是在客户端多了一个
Ajax engine的层级,只是在客户端计算机多了一些额外的资源消耗。实际上
Ajax技术对于节约服务端、客户端以及网络带宽资源都有重要意义。