- 1、本文档共9页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
ajax与语法详解
l 一个实例
在开始正式讲解 Ajax之前,首先让我们先来看看Google Map使用Ajax改善其产品设计的效果。
1. 在浏览器地址栏中输入打开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。比如,到 网站上点击一个按钮。就会对服务器发送一个请求,然后响应再返回到浏览器。该请求不仅仅是新内容和项目列表,而是另一个完整的 HTML 页面。因此当 Web 浏览器用新的 HTML 页面重绘时,可能会看到闪烁或抖动。事实上,通过看到的每个新页面可以清晰地看到请求和响应。 Web 2.0(在很大程度上)消除了这种看得见的往复交互。比如在 Google Maps 上,你可以拖动地图,放大和缩小,只有很少的重绘操作。当然这里仍然有请求和响应,只不过都藏到了幕后。作为用户,体验更加舒适,感觉很像桌面应用程序。这种新的感受和范型就是当有人提到 Web 2.0 时您所体会到的。 需要关心的是如何使这些新的交互成为可能。显然,仍然需要发出请求和接收响应,但正是针对每次请求/响应交互的 HTML 重绘造成了缓慢、笨拙的 Web 交互的感受。因此很清楚,我们需要一种方法使发送的请求和接收的响应只 包含需要的数据而不是整个 HTML 页面。惟一需要获得整个新 HTML 页面的时候就是希望用户看到 新页面的时候。 但多数交互都是在已有页面上增加细节、修改主体文本或者覆盖原有数据。这些情况下,Ajax 和 Web 2.0 方法允许在不 更新整个 HTML 页面的情况下发送和接收数据。对于那些经常上网的人,这种能力可以让您的应用程序感觉更快、响应更及时,让他们不时地光顾您的网站。
因此在这里,我们是时候可以对ajax做出一个完整的解释了,Adaptive Path公司的Jesse James Garrett这样定义Ajax:
Ajax不是一种技术。实际上,它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含:
基于XHTML和CSS标准的表示;
使用Document Object Model进行动态显示和交互;
使用XMLHttpRequest与服务器进行异步通信;
使用JavaScript绑定一切。
这非常好,但为什么要以Ajax命名呢?其实术语Ajax是由Jesse James Garrett创造的,他说它是“Asynchronous JavaScript + XML的简写”。
l Ajax工作原理
通过上述的定义,我们应该已经知道Ajax的组成了,即他是由XHTML,XML,CSS,DOM,XMLHttpRequest,JavaScript等技术综合而成的,然而,真正使用Ajax能实现异步通信,要真正实现这种绚丽的奇迹,必须非常熟悉一个JavaScript 对象,即 XMLHttpRequest。因此我们要了解Ajax的工作原理,就要从理解XMLHttpRequest这个对象开始。
下面给出将要用于该对象的很少的几个 方法和属性。
·open():建立到服务器的新请求。 ·send():向服务器发送请求。 ·abort():退出当前请求。 ·readyState:提供当前 HTML 的就绪状态。 ·responseText:服务器返回的请求响应文本。
‘onreadystatechange:回调方法
·responseXML:服务器返回的请求响应XML形式组织的文本。
下面我们简单的介绍一下这几个方法的作用。
l 创建一个XMLHttpRequest
首先需要创建一个新变量并赋给它一个 XMLHttpRequest 对象实例。这在 JavaScript 中很简单,只要对该对象名使
您可能关注的文档
- 60个与英文阅读网站强力推荐.doc
- 6.4_与万有引力理论的成就1(上课用).ppt
- 6.3 与遗传信息的表达.ppt
- 6.田与素萍-CUTIS的预防.ppt
- 61口与语英语聊天室网站介绍.ppt
- 65个与精彩句子速记3000英语单词..doc
- 60天与雅思通过考试全过程.ppt
- 6789与习题答案.doc
- 688河胨心高考词汇.doc
- 69-4与6-康涅狄格大学.doc
- 第十一章 电流和电路专题特训二 实物图与电路图的互画 教学设计 2024-2025学年鲁科版物理九年级上册.docx
- 人教版七年级上册信息技术6.3加工音频素材 教学设计.docx
- 5.1自然地理环境的整体性 说课教案 (1).docx
- 4.1 夯实法治基础 教学设计-2023-2024学年统编版九年级道德与法治上册.docx
- 3.1 光的色彩 颜色 电子教案 2023-2024学年苏科版为了八年级上学期.docx
- 小学体育与健康 四年级下册健康教育 教案.docx
- 2024-2025学年初中数学九年级下册北京课改版(2024)教学设计合集.docx
- 2024-2025学年初中科学七年级下册浙教版(2024)教学设计合集.docx
- 2024-2025学年小学信息技术(信息科技)六年级下册浙摄影版(2013)教学设计合集.docx
- 2024-2025学年小学美术二年级下册人美版(常锐伦、欧京海)教学设计合集.docx
文档评论(0)