Lecture13AsynchronousJavaScriptandXML(AJAX)(C).pptVIP

* * * * * * * * * * * * * * * * * * * * * * * * * * * Web 2.0 Programming – Asynchronous JavaScript and XML (AJAX) * / 27 * South China University of Technology Web Programming School of Computer Science and Engineering, South China University of Technology 第13讲 异步JavaScript和XML (AJAX) 概要 同步 vs. 异步 XMLHttpRequest Prototype中的Ajax Ajax的局限 调试 Ajax 服务器与浏览器的交互 浏览器如何与用户交互? 它什么时候发送一个请求? 同步网络通信 同步: 用户必须等待新的页面加载完毕 在网页中使用传统的通信模式(点击, 等待, 刷新) 几乎所有带有新数据的变化都会导致页面刷新 Web应用 与 Ajax Web应用: 一个类似桌面应用的动态网站 一种连续的用户体验而不是分离的页面 例如: Gmail, Google Maps, Google Docs and Spreadsheets, Flickr Ajax: 异步JavaScript和XML 不是一种编程语言; 而是使用JavaScript的一种特别途径 在后台从服务器获取数据 允许动态更新一个页面 避免“点击-等待-刷新” 模式 例子: Google Suggest 什么是 AJAX ？ AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。 有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。 Google Suggest 在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。 Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。 异步网络通信 异步: 当页面装载数据的时候, 用户仍然能够保持交互 通信模式因为Ajax而成为可能 更新数据而网页不用刷新 概要 同步 vs. 异步 XMLHttpRequest Prototype中的Ajax Ajax的局限 调试 Ajax XMLHttpRequest JavaScript 包含一个能够从网络服务器上获取文件的 XMLHttpRequest对象 IE5+, Safari, Firefox, Opera, Chrome, 等浏览器支持 (有少量的兼容性问题) 可以 异步地 完成这些 (在后台中, 对用户透明) 使用 DOM 把获取的文件内容放进当前页面中 听起来很好!... ... 但它用起来很繁重, 而且有各种各样的浏览器兼容问题 Prototype提供一种更好的对Ajax的封装, 因此我们将使用Prototype代替它 一个典型的Ajax请求 用户点击, 调用一个事件句柄 句柄代码创建一个XMLHttpRequest 对象 XMLHttpRequest 对象从服务器请求页面 服务器检索合适的数据并返回 当数据到达时XMLHttpRequest 触发一个 event 这事件通常叫做 callback 你能够对这个事件附加一个句柄函数 你能够调用事件句柄处理并显示这些数据 概要 同步 vs. 异步 XMLHttpRequest Prototype中的Ajax Ajax的局限 调试 Ajax Prototype 的 Ajax 模型 构造一个Prototype的Ajax.Request对象使用Ajax向服务器请求一个页面 构造器接受2个参数: 需要获取的URL, 以字符串的形式, 一系列的选项, 以 key : value 配对的形式组成一个数组放在 {} 括号中 (一个匿名JS对象) 把粗糙的XMLHttpRequest中的难看的细节隐藏起来; 在所有的浏览器中都能运行得很好 Prototype 的 Ajax 方法和属性 传递给Ajax.Request构造器的选项 在Ajax.Request对象中你能够处理的事件 选项 描述 method 如何从服务器上获取请求(默认使用post) parameters 需要传回