Ajax2使用Ajax发送异步请求.ppt

使用Ajax发送异步请求 课程内容 使用Ajax发送异步请求 XMLHttpRequest对象详解 使用Ajax发送异步请求示例 考虑以下情景： 当用户输入邮编后，系统自动填充相应的城市和省份 创建静态页面原型 创建XMLHttpRequest 要实现这种功能，必须非常熟悉一个 JavaScript 对象，即 XMLHttpRequest。这个小小的对象实际上已经在几种浏览器中存在一段时间了，它是Ajax 的核心。该对象的几个常用方法和属性： open()：建立到服务器的新请求 send()：向服务器发送请求 readyState：提供当前 HTML 的就绪状态 status：服务器响应的状态代码 responseText：服务器返回的请求响应文本 创建XMLHttpRequest（续） 创建跨浏览器的XMLHttpRequest对象： 创建XMLHttpRequest（续） 注意不要被这些花括号迷住了眼睛，下面分别介绍每一步: 创建一个新变量 request 并赋值 false。使用 false 作为判断条件，表示还没有创建 XMLHttpRequest 对象 增加try/catch块： 尝试创建 XMLHttpRequest 对象 如果失败,先尝试使用较新版本的Microsoft浏览器创建 Microsoft 兼容的对象（Msxml2.XMLHTTP），如果失败（尝试使用较老版本的Microsoft浏览器创建 Microsoft兼容的对象（Microsoft.XMLHTTP） 如果全部失败，则保证request的值仍然为false 检查request是否仍然为false（如果一切顺利就不会是false） 如果出现问题则使用JavaScript警告通知用户出现了问题 建立到服务器的请求 准备好XMLHttpRequest对象，就可以建立到服务器的请求了。 首先结合一些表单中的数据来构造URL： 注：escape() 方法用于转义不能用明文正确发送的任何字符。比如，空格将被转换成字符 %20，从而能够在 URL 中传递这些字符。 然后建立请求： 建立到服务器的请求（续） 使用 XMLHttpRequest 对象的 open() 方法来建立请求。该方法有五个参数： request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求 url：要连接的 URL asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值 password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值 通常使用其中的前三个参数。事实上，即使需要异步连接，通常指定第三个参数为 “true”，这样更容易理解。 使用XMLHttpRequest发送请求 一旦请求用 open() 配置好之后，就可以使用send()方法发送请求了，send() 方法只有一个参数，就是要发送的内容。 但是我们前面通过URL本身已经发送了zipcode的值，所以这里不需要通过 send() 传递数据，只要传递 null 作为该方法的参数即可： 设置回调函数 由于是异步请求，请求发出后JavaScript 方法不会等待服务器处理完成，因此代码将继续执行，就是说，将退出该方法而把控制返回给表单。用户可以继续输入信息，应用程序不会等待服务器。 当服务器完成请求之后，需要指定该如何处理响应。XMLHttpRequest对象的onreadystatechange属性允许指定一个回调函数反向调用Web页面中的代码。 当服务器完成请求之后，会查看XMLHttpRequest对象，特别是 onreadystatechange属性。然后调用该属性指定的任何方法。之所以称为回调是因为由服务器向网页发起调用，无论网页本身正在做什么。这就是称之为异步的原因：用户在一层上操作表单，而在另一层上服务器响应请求并触发onreadystatechange属性指定的回调方法。 设置回调函数（续） 需要特别注意的是该属性在代码中设置的位置 —— 它是在调用send()之前设置的。发送请求之前必须设置该属性，这样服务器在回答完成请求之后能够查看该属性！ 注意，这里updatePage是个函数名称，不能写成updatePage() 函数调用的形式！这表示将updatePage()函数运行的返回结果赋值给onreadystatechange属性。体会JavaScript中函数也是对象的特征。 处理服务器响应 请求发送后，用户可以继续使用Web表单（同时服务器在处理请求）。而当服务器完成了请求处理，服务器查看onreadystatechan