第07部分-Ajax技术应用.pptVIP

6.1 Ajax介绍 Ajax (Asynchronous JavaScript and XML)不是一个新的技术，事实上，它是一些旧有的成熟技术以一种全新的更加强大的方式整合在一起。 Ajax的关键技术： 使用XHTML(HTML)和CSS构建标准化的展示层 使用DOM进行动态显示和交互 使用XML和JSON进行数据交换和操纵 使用XMLHttpRequest异步获取数据 使用JavaScript将所有元素绑定在一起 传统Web应用与Ajax应用的比较 异步请求不等待服务器响应。发送请求后应用程序继续运行。用户仍然可以在Web表单中输入数据，甚至离开表单。没有旋转的皮球或者沙漏，应用程序也没有明显的冻结。服务器异步地响应请求，完成后告诉原来的请求者工作已经结束。 结果是，应用程序感觉不 那么迟钝或者缓慢，而是响应迅速、交互性强，感觉快多了。 6.2 AJAX技术核心 XMLHttpRequest对象 DOM与HTML DOM与XML 面向对象的Javascript 6.4 用Ajax实现城市邮政编码查询 考虑以下情景： 当用户输入邮编后，系统自动填充相应的城市和省份。 1. 创建静态页面原型 2.创建XMLHttpRequest 要实现这种功能，必须非常熟悉一个 JavaScript 对象，即 XMLHttpRequest。这个小小的对象实际上已经在几种浏览器中存在一段时间了，它是Ajax 的核心。该对象的几个常用方法和属性： open()：建立到服务器的新请求 send()：向服务器发送请求 readyState：提供当前 HTML 的就绪状态 status：服务器响应的状态代码 responseText：服务器返回的请求响应文本 2.创建XMLHttpRequest（续） 创建跨浏览器的XMLHttpRequest对象： 2.创建XMLHttpRequest（续） 创建一个新变量 request 并赋值 false，表示还没有创建 XMLHttpRequest 对象。 增加try/catch块： 尝试创建 XMLHttpRequest 对象 如果失败,先尝试使用较新版本的Microsoft浏览器创建 Microsoft 兼容的对象（Msxml2.XMLHTTP），如果失败（尝试使用较老版本的Microsoft浏览器创建 Microsoft兼容的对象（Microsoft.XMLHTTP） 如果全部失败，则保证request的值仍然为false 检查request是否仍然为false（如果一切顺利就不会是false） 如果出现问题则使用JavaScript警告通知用户出现了问题 3. 建立到服务器的请求 准备好XMLHttpRequest对象，就可以建立到服务器的请求了。 首先结合一些表单中的数据来构造URL： 注：escape() 方法用于转义不能用明文正确发送的任何字符。比如，空格将被转换成字符 %20，从而能够在 URL 中传递这些字符。 然后建立请求： 4. 设置回调函数 由于是异步请求，请求发出后JavaScript 方法不会等待服务器处理完成，因此代码将继续执行，就是说，将退出该方法而把控制返回给表单。用户可以继续输入信息，应用程序不会等待服务器。 当服务器完成请求之后，需要指定该如何处理响应。XMLHttpRequest对象的onreadystatechange属性允许指定一个回调函数反向调用Web页面中的代码。 4. 设置回调函数（续） 当服务器完成请求之后，会看XMLHttpRequest对象，特别是 onreadystatechange属性。然后调用该属性指定的方法。 之所以称为回调是因为由服务器向网页发起调用，无论网页本身正在做什么。这就是称之为异步的原因：用户在一层上操作表单，而在另一层上服务器响应请求并触发onreadystatechange属性指定的回调方法。 4. 设置回调函数（续） 需要特别注意的是该属性在代码中设置的位置 —— 它是在调用send()之前设置的。发送请求之前必须设置该属性，这样服务器在回答完成请求之后能够调用该属性指定的方法！ 注意，这里updatePage是个函数名称，不能写成updatePage() 函数调用的形式！这表示将updatePage()函数运行的返回结果赋值给onreadystatechange属性。体会JavaScript中函数也是对象的特征。 5. 用XMLHttpRequest发送请求 一旦请求用 open() 配置好之后，就可以使用send()方法发送请求了，send() 方法只有一个参数，就是要发送的内容。 但是前面通过URL本身已经发送了zipcode的值，所以这里不需要通过 send() 传递数据，只要传递 null