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

使用Ajax发送异步请求 课程内容 使用Ajax发送异步请求 XMLHttpRequest对象详解 什么是 XMLHttpRequest 对象？ XMLHttpRequest 对象是开发者的梦想，因为您能够： 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加载后从服务器接收数据 在后台向服务器发送数据 所有现代的浏览器都支持XMLHttpRequest 对象。 创建 XMLHttpRequest 对象 通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。 在所有现代浏览器中（包括 IE 7）： 实例 使用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 作为该方法的参数即可： XMLHttpRequest 对象 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。 尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。 XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。 XMLHttpRequest浏览器支持 XMLHttpRequest 得到了所有现代浏览器较好的支持。唯一的浏览器依赖性涉及 XMLHttpRequest 对象的创建。在 IE 5 和 IE 6 中，必须使用特定于 IE 的 ActiveXObject() 构造函数。