2014年Ajax2_使用Ajax发送异步请求38052028.pptVIP

小结 Ajax应用的开发确实有些繁琐，实际上，现在有很多成熟稳定的Ajax工具葙封装了以上诸多细节，是的Ajax编程更加容易。但是如果不知道应用程序在做什么，就很难发现其中的问题。 XMLHttpRequest对象是Ajax应用的核心，必须非常熟悉。 Ajax应用的基本流程： 创建XMLHttpRequest对象 从Web表单中获取需要的数据 设置要连接的URL 建立到服务器的连接 设置服务器在完成后要运行的回调函数 发送请求 * 结束 * AJFJDSHFDHGKHFKLGHSKHGLKDHGJHLKSHDGJLSHLGDHSLHG * 07/16/96 * ## * 07/16/96 * ## 使用Ajax发送异步请求 * AJFJDSHFDHGKHFKLGHSKHGLKDHGJHLKSHDGJLSHLGDHSLHG 课程内容 使用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属性。然后调用该属性指定的任何方法。之所以称为回调是因为由