当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript中使用远程脚本

Javascript
JS+XML 省份和城市之间的联动实现代码
ie与firefox下的event使用说明与详细区别
Jquery 学习笔记(二)
jQuery技巧大放送 学习jquery的朋友可以看下
使用jQuery简化Ajax开发 Ajax开发入门
jQuery入门 构造函数
JavaScript iframe的相互操作浅析
JavaScript null和undefined区别分析
JavaScript 替换Html标签实现代码
jQuery 标题的自动翻转实现代码
JavaScript读取中文cookie时的乱码问题的解决方法
JavaScript 动态创建VML的方法
JavaScript Array扩展实现代码
javascript线性渐变一
javascript 线性渐变二
javascript 线性渐变三
滑动门式菜单 实现代码
extjs 学习笔记(三) 最基本的grid
javascript 操作cookies及正确使用cookies的属性
JavaScript 基础知识 被自己遗忘的

Javascript 中的 JavaScript中使用远程脚本


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 101 ::
收藏到网摘: n/a

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

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

这个Web开发新技术浪潮的核心正是一种我们熟知的语言:JavaScript,以及在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(http://maps.google.com)使用了远程脚本技术动态地将地图图像添加到Web页面中。当我们在页面的搜索栏中输入一个地点之后,主页面根本无须重新加载,该地点的地图图像将被动态地加载到页面上的地图区域中。另外,Google Maps还允许用户将地图拖动到一个新的位置,这时该位置的地图信息将被动态地加载到页面上的地图区域中,如图16-1所示。

图  16-1

2. Google Suggest

Google Suggest((http://labs.google.com/suggest/)是Google公司另一个重要的发明,它充分发挥了远程脚本技术的优势。第一眼看去,Google Suggest非常类似一个普通的Google 搜索页面。但是,当你开始在文本框中输入搜索关键字时,它将会显示一个建议项目的下拉列表框,并在下拉列表框中显示与关键字相关的、你可能感兴趣的条目。在建议关键字或者短语的右边,还列出了搜索该条目所返回的记录条数,如图16-2所示。

图  16-2

16.1.2  Ajax

在2005年,Jesse James Garrett写了一篇题为“Ajax: A New Approach to Web Applications(Ajax:Web应用开发的崭新道路)”的文章(该文章的URL为:www.adaptivepath.com/publications/essays/archives/000385.php)。在这篇文章中,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技术时,各浏览器之间代码的差异就将显现出来。