JavaScript中使用远程脚本


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技术时,各浏览器之间代码的差异就将显现出来。



相关阅读:
一个用JSP做的日历
记录oracle数据库库表变动
远程安全使用MySQL GUI工具
Unix/Linux历史和大事记(图)
PHP高级教程(9):PHP错误处理
让Access2007数据库文件自动瘦身
Javascript让媒体通过指定的按钮播放
Apache负载均衡设置方法: mod_proxy
Javascript & DHTML DOM基础和基本API
Oracle表连接的奇怪问题
php中用数组的方法设置cookies
使弱类型的语言JavaScript变强势
PHP4在WinXP下IIS和Apache2服务器上的安装实例
使用静态类实现JSP自定义标签
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 CMS SQL jQuery C# C++ java Android IOS oracle MongoDB PostgreSQL SQLite 交通频道 G4722 G1875 G215 G569 G421 G6733 G7577 G8906 G1235 G4916 G7291 G1953 G245 G662 G1570 G6285 G719 G1836 G1346 G4781 G4908 G289 G6781 G9290 G7358 G1928 G1815 G325 G132 G4901 G6012 G6290 G7131 G5367 G184 G151 G5303 G1136 G6481 G7028 G575 G1744 G7660 G7693 G2344 G4937 G1234 G1814 G6252 G1492 G253 G2926 G883 G9275 G1231 G556 G241 G1306 G7646 G8103 G600 G1858 G9678 G6160 G7156 G825 G1125 G7249 G1809 G1350 G432 G9466 G7067 G785 G6404 G4663 G7008 G150 G823 G1514 G7529 G1201 G2353 G205 G7629 G9409 G6147 G677 G390 G8016 G9239 G456 G828 G8045 G491 G7145 G397 G7012 G1021 G6482 G2322 G7264 G1301 G9247 G96 G1294 G7133 G4824 G7005 G1653 G5307 G1213 G822 G4837 G1422 G411 G6227 G1571 G359 G1882 G6074 G7678 G21 G7077 G1272 G8918 G9645 G461 G1254 G1846 G8021 G7303 G1104 G76 G82 G621 G218 G8533 G2341 G8543 G555 G8013 G4802 G1364 G1153 G1342 G1861 G8905 G590 G4780 G668 G9261 G1304 G1638 G1395 G2914 G8003 G7158 G1833 G1873 G8128 G1856 G1841 G8709 G7346 G4612 G2103 G835 G8712 G381 G7240 G8932 G507 G29 G4054 G6273 G6752 G426 G211 G9473 G7119 G2333 G1567 G6153 G360 G4011 G5301 G7648 G8010 G8015 G6706 G614 G423 G8557 G9465 G72 G6018 G8901 G7030 G123

丹东 云霄 辽中 德阳 克拉玛依 惠山 招远 昭通 铁岭西 延吉西 军粮城北 定西 晋中 许昌东 郫县 诏安 七台河 高碑店东 南昌 延安 敦化 铜陵北 嵩明 鲘门 扬中 龙里北 舟山 洛阳 运城北 鞍山 西昌 邵阳北 绍兴 白山 三明 肇东 陵水 衡山西 嘉善 宜都 泰兴 泉州 汉口 东胜西 昌图西 锦州南 安阳东 怀化 黄南 亚龙湾 扬州 温州 南翔北 福安 金山北 永川东 安达 曲阜东 郑州西 天门 绍兴北 涪陵北 阳泉北 三亚 葫芦岛北 徐州 阳江 辽源 新泰 阿坝 孝感北 三穗 金寨 保山 高安 安阳 牟平 西双版纳 信阳 繁昌西 哈尔滨北 达州 新余 沈阳南 四平 扶余北 伊宁 郴州西 济源 水家湖 民权北 福鼎 如皋 奉化 全州南 安庆 太姥山 武汉 乐清 皮口 武昌 茂名 邯郸 资阳 马鞍山 三水南 泰安 包头东 衡阳东 南丰 仙桃西 安吉 罗源 山海关 平湖 惠州 资阳北 淄博 丹阳 莱州 巴东 关岭 盐城 锦州 格尔木 益阳 大英东 吉林 湛江 临安 襄汾西 渑池南 当涂东 辽阳 徐水 贺州 韶关 光明城 邯郸东 普安县 南江口 铜川 五龙背东 张家港 烟台南 萍乡北 青堆 长乐 江门 台州 衡水 湘潭北 闽清北 高邑西 盖州西 石柱县 潮汕 肇庆 泰康 邵东 湖州 余姚 平凉 宜宾 增城 沧州 都匀 防城港 鹰潭北 海东西 福田 余姚北 岳池 广州北 南安 蓬莱 瓦房店西 李石寨 葛店南 海安 无锡东 上饶 通辽 四会 桂林西 砀山南 兰州 滨海 龙口 绅坊 莱西 石林西 深圳 大连北 成都 上海西 孝感 杏树屯 德清 嘉兴

Copyright © 2016 phpStudy |