日期:2014-05-16  浏览次数:20658 次

ajax入门详解(一)

?

l?一个实例

在开始正式讲解 Ajax之前,首先让我们先来看看Google Map使用Ajax改善其产品设计的效果。

1.? 在浏览器地址栏中输入http://maps.google.com打开Google Map的界面。

2.? 在页面顶端的搜索框中输入“China”,单击“Search”按钮。

3.? 单击地图右上角的“Satellite”按钮,切换到卫星界面。

4.? 调整地图左上角的尺寸,方法或者缩小当前区域。可以看到,地图区域的图象根据标尺的位置快速的变换。

5.? 按住鼠标左键,拖拽地图,地图区域的图象随着鼠标的移动而移动这个过程的图象是实时更新的。效果如下图所。



?

?

?

由上可以明显的看出,当用户拖动地图进行操作的时候,Web页上的地图立即发生相应的变化,页面却没有刷新,当按住鼠标左键移动地图的时候,地图跟着移动,这个过程是快速的,而期间用户没有想服务器提交表单或和单击一个超链接。如果用传统的Web应用程序交互思维来理解,这个过程是难以理解的,这正是Ajax的魅力。

l什么是Ajax?

在研究ajax之前首先让我们先来讨论一个问题 ——什么是Web 2.0 。听到 Web 2.0 这个词的时候,应该首先问一问 “Web 1.0 是什么?虽然很少听人提到 Web 1.0,实际上它指的就是具有完全不同的请求和响应模型的传统 Web。比如,到 hdu.edu.cn 网站上点击一个按钮。就会对服务器发送一个请求,然后响应再返回到浏览器。该请求不仅仅是新内容和项目列表,而是另一个完整的 HTML 页面。因此当 Web 浏览器用新的 HTML 页面重绘时,可能会看到闪烁或抖动。事实上,通过看到的每个新页面可以清晰地看到请求和响应。

  Web 2.0(在很大程度上)消除了这种看得见的往复交互。比如在 Google Maps 上,你可以拖动地图,放大和缩小,只有很少的重绘操作。当然这里仍然有请求和响应,只不过都藏到了幕后。作为用户,体验更加舒适,感觉很像桌面应用程序。这种新的感受和范型就是当有人提到 Web 2.0 时您所体会到的。

  需要关心的是如何使这些新的交互成为可能。显然,仍然需要发出请求和接收响应,但正是针对每次请求/响应交互的 HTML 重绘造成了缓慢、笨拙的 Web 交互的感受。因此很清楚,我们需要一种方法使发送的请求和接收的响应只