译者注:
这是我第一次翻译文章,翻译得不好大家不要扔鸡蛋哦(鸡蛋很贵的哦~~).我是根据意思来译的,和原文出入很大,在译的过程中根据实际情况作了修改,使得文章更符合”中国国情”.
前言:
作为一个Web程序员我们经常要碰到需要获取客户邮寄地址的情况,我们要求用户输入姓名和详细地址.地址这部分通常由国家,省份和城市组成. 当用户选择国家之后把信息发送到服务器,服务器检索出这个国家所对应的省,把省绑定到页面再返回给客户端,同样当用户选择省之后就从数据库里检索出相应的城市再返回.
在这个过程中存在一个问题,在用户选择了国家和省份之后都需要刷新页面.
再举个例子,我要订购一张CD,那我就要先选择大类,再选择子类,说不定子类下面还有子类,这样一直到找到相应的CD.这个过程就要不停的刷新页面,这个过程实在让人有点难以忍受.不只给客户一种不好的体验,同时在这个过程中也增加了服务器的负担.
减少页面的反复刷新的一种方法就是通过客户端脚本来实现.当用户访问页面时把所有信息都发送给客户端,如所有目录和子目录的信息,然后通过客户端编程,当用户选择一级目录时,通过脚本把相应的二级目录绑定上去就可以了.这样就不用进行页面的刷新了.
这样看上去很完美,其实不然,如果少量数据还能操作,但当数据量非常大的时候这根本是件不可能的事,总不可能把整个数据库的数据都发给客户吧?~
AJAX能做些什么?
有问题,肯定有解决的方法,这时就要我们的AJAX上场了.AJAX不用反复的刷新页面,也不用把所有数据一次性发送到客气端.你完全可以在运行的时候来取得需要的数据,而这个过程用户是不容易觉察到的,也就是说对用户几乎是透明的.整个过程的核心就在于你能随时从服务器上得到数据,而且是你想要的数据.这样我们在前言里讲到的问题就可以解决了.
网站的传统工作方式
图注:客户端发送请求和接收数据是同步的.也就是你发送了的请求后接下去就是接收数据.
使用AJAX后,上面的情况将不复存在,你会充分感受到AJAX的魅力,因为数据只有在需要时才会向服务器请求.
使用AJAX后的工作方式:
AJAX的本质
AJAX的核心是远程调用能力,这正是AJAX的本质所在.
在客户端,远程调用是通过XMLHttpRequest 或者 JavaScript 的 ‘remote scripting’ 来实现.
在服务器端我们是通过动态网页(比如:ASP,PHP,JSP)来监听和满足客户端的请求.这样就可以充分发挥动态网页的优势了,可以根据不同的请求返回相应的数据.比如服务器端接受一个查询请求,然后根据应用程序的逻辑返回数据,客户端请求”page.asp?productname=笔“时我们可以根据数据库,把与笔有关的数据返回给客户端.
AJAX示例
我将给大家演示一个用AJAX从服务器端取得数据的例子.这个例子非常简单,在服务端的业务逻辑也非常简单.在这个例子里,我将从服务器端脚本得到一个简单的字符串,当然在实际的使用中你完全可以做得很复杂,比如说返回一个XML的数据.假设有一座楼, 一楼住的是 Jim, Charlie 和 Aqua,二楼住的是Jerry, Mary 和 Cherry,三楼住的是Jack, Jill 和 Harry.整个楼的人员分布列表如下
1楼 : Jim, Charlie and Aqua.
2楼: Jerry, Mary and Cherry.
3楼: Jack, Jill and Harry.
下面我们通过ASP.net来实现这个例子. 这个例子的作用就是显示某层楼上的住户名单.在Default.html页面里有一个下拉菜单,当用户选择时将触发事件,从服务器上取得数据,然后显示在页面里. 在我们的例子里有两个页面,一个是Default.html,另外一个是用于返回数据的AjaxFrontEnd.aspx页面. Default.html用来调用AjaxFrontEnd.aspx并显示得到的数据, AjaxFrontEnd.aspx用于提供数据.