位置:海鸟网 > IT > JavaScript >

JavaScript中使用远程脚本

Internet自发源以来,一直使用的是一种具有事务特征的(transaction-like)通信模型。在这种通信模型中,客户端浏览器向服务器发送请求,而服务器则向客户端返回响应,在返回响应时客户端浏览器将加载页面或者重新加载页面。这就是典型的HTTP通信,HTTP协议被设计用来按照“请求/响应”模式进行工作。但是这种无状态的通信模型却给开发人员带来了极大的不便,这不但使得一个Web应用程序需要包含数个页面,并且导致用户的体验变得杂乱而又缺乏连贯性。

在2000年之后,人们开始寻求和发展一些新的Web开发技术,这些新技术既能增强Web用户体验,又能使Web应用程序易于开发和维护。随着新技术在Web上的应用,使得Web应用程序具备了与传统桌面应用程序类似的执行方式和可用性。很快,开发人员去芜存精,使用这些技术为Web应用程序提供了更为丰富的功能。

这个Web开发新技术浪潮的核心正是一种我们熟知的语言:,以及在JavaScript中使用远程脚本(remote scripting)的功能。

16.1  什么是远程脚本

本质上,远程脚本技术允许客户端通过JavaScript向服务器发送请求,并接收服务器响应的数据,而无须刷新整个Web页面。Web应用程序开发人员可以使用远程脚本技术来创建一种新的Web应用程序,使得页面仅仅进行局部的刷新,以重新加载所需要的部分新数据,而无须重新加载整个Web页面。这种新型的Web应用程序可以使用户获得连贯和一致的使用体验。

“远程脚本”这个术语具有广泛的含义,JavaScript中有多种技术都可以实现远程脚本。这些技术综合使用框架(frame)或内嵌框架(iframe)技术、在document中动态添加<script/>元素、以及使用JavaScript向服务器发送HTTP请求等技术。在最近几年中,使用JavaScript发送请求的技术受到人们的普遍欢迎。这些新技术仅仅使页面的局部进行刷新,而无须重新加载整个Web页面,远程脚本不但有效地减小了服务器发送给浏览器的数据量,又能使得Web页面的工作方式更像一个传统的桌面应用程序。

16.1.1  远程脚本可以用来干什么

远程脚本的概念为开发人员打开了一道通向高级Web应用开发的大门,使用远程脚本技术,Web程序员可以开发出无论在形式上还是在功能上,都类似于传统桌面应用程序的Web应用。

现在,已经有大量的商业网站充分利用了远程脚本技术的价值。这些网站看起来更像是一个桌面应用程序,而不是一个Web站点,这正是远程脚本技术的魅力所在。

搜索引擎巨头Google为我们提供了两个最著名的Web站点:Google Maps和Google Suggest,这两个Web站点充分发挥了远程脚本技术的威力。

1. Google Maps

Google Maps充分利用了Google Earth所提供的地图信息,并被设计用来和现存的商业地图站点进行竞争。Google Maps()使用了远程脚本技术动态地将地图图像添加到Web页面中。当我们在页面的搜索栏中输入一个地点之后,主页面根本无须重新加载,该地点的地图图像将被动态地加载到页面上的地图区域中。另外,Google Maps还允许用户将地图拖动到一个新的位置,这时该位置的地图信息将被动态地加载到页面上的地图区域中,如图16-1所示。

图  16-2

16.1.2  

在2005年,Jesse James Garrett写了一篇题为“Ajax: A New Approach to Web Applications(Ajax:Web应用开发的崭新道路)”的文章(该文章的URL为:)。在这篇文章中,Garrett陈述了这样一种观点:Web应用程序与桌面应用程序之间在交互性上的差距将会变得越来越小。他还引用了Google Maps和Google Suggest的例子作为证明。Garrett将这种Web开发的新方法命名为“Asynchronous JavaScript + XML(异步JavaScript+XML)”,简称为Ajax。尽管Ajax这一新术语直到2005年才被创造出来,但是实际上Ajax底层的技术和方法就是远程脚本,远程脚本技术早在Ajax出现之前就已经存在了多年。现在,很多开发人员将远程脚本和Ajax这两个术语视为同一事物。Ajax的所有概念都可以归结为使用远程脚本来实现客户端/浏览器之间的通信。

注意:

实际上,在本章中无论何处提到Ajax这一术语,都可将其视为远程脚本技术。

16.1.3  浏览器支持

Web应用程序总需要在浏览器中运行,因此,Ajax技术与本书中所讨论的所有高级JavaScript概念一样,也受到浏览器功能和特性的限制,而且不同浏览器对Ajax技术的支持也可能有所不同。但幸运的是,Ajax的绝大部分功能和常见形式都受到了以下浏览器的支持:

●       Internet Explorer 5+

●       Firefox 1+

●       Opera 9+

●       Safari 2+

隐藏框架技术是一种常见的Ajax方法,当我们在这些浏览器中使用隐藏框架技术时,各种浏览器之间的代码几乎是完全相同的,这是由于各种浏览器的BOM模型都采用了相同的方式来处理页面中的框架(本章稍后的内容将对此进行介绍)。但是,当我们在这些浏览器中使用了其他形式的Ajax技术时,各浏览器之间代码的差异就将显现出来。