Ajax2_使用Ajax发送异步请求

readyState HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性 的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。 5个状态中每一个都有一个相关联的 非正式的名称，下表列出了状态、名称 和含义：
readyState 的值不会递减，除非当一个 请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增 加的时候，都会触发 onreadystatechange 事件句柄。
创建静态页面原型
创建XMLHttpRequest 创建
要实现这种功能， 要实现这种功能，必须非常熟悉一个 JavaScript 对象， 对象，即 XMLHttpRequest。这个小小的对象实 。 际上已经在几种浏览器中存在一段时间了， 际上已经在几种浏览器中存在一段时间了，它是 Ajax 的核心。该对象的几个常用方法和属性： 的核心。该对象的几个常用方法和属性：
onreadystatechange方法 onreadystatechange
open() 初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
设置回调函数
由于是异步请求，请求发出后 方法不会等待服务器处理完成， 由于是异步请求，请求发出后JavaScript 方法不会等待服务器处理完成， 因此代码将继续执行，就是说，将退出该方法而把控制返回给表单。 因此代码将继续执行，就是说，将退出该方法而把控制返回给表单。用 户可以继续输入信息，应用程序不会等待服务器。 户可以继续输入信息，应用程序不会等待服务器。 当服务器完成请求之后，需要指定该如何处理响应。XMLHttpRequest 当服务器完成请求之后，需要指定该如何处理响应。 对象的onreadystatechange属性允许指定一个回调函数反向调用 属性允许指定一个回调函数反向调用Web 对象的 属性允许指定一个回调函数反向调用 页面中的代码。 页面中的代码。 当服务器完成请求之后，会查看 对象， 当服务器完成请求之后，会查看XMLHttpRequest对象，特别是 对象 onreadystatechange属性。然后调用该属性指定的任何方法。之所以 属性。然后调用该属性指定的任何方法。 属性 称为回调是因为由服务器向网页发起调用，无论网页本身正在做什么。 称为回调是因为由服务器向网页发起调用，无论网页本身正在做什么。 这就是称之为异步的原因：用户在一层上操作表单， 这就是称之为异步的原因：用户在一层上操作表单，而在另一层上服务 器响应请求并触发onreadystatechange属性指定的回调方法。 属性指定的回调方法。 器响应请求并触发 属性指定的回调方法
onreadystatechange
每次 readyState 属性改变的时候调用 的事件句柄函数。当 readyState 为 3 时，它也可能调用多次
onreadystatechange方法 onreadystatechange
abort() 取消当前响应，关闭连接并且结束 任何未决的网络活动。 这个方法把 XMLHttpRequest 对象 重置为 readyState 为 0 的状态，并且 取消所有未决的网络活动。例如，如果 请求用了太长时间，而且响应不再必要 的时候，可以调用这个方法。
onreadystatechange方法 onreadystatechange
getResponseHeader() 响应头部的值。 返回指定的 HTTP 响应头部的值。其参数 响应头部的名称。 是要返回的 HTTP 响应头部的名称。可以使用 任何大小写来制定这个头部名字， 任何大小写来制定这个头部名字，和响应头部 的比较是不区分大小写的。 的比较是不区分大小写的。 该方法的返回值是指定的 HTTP 响应头部 的值， 的值，如果没有接收到这个头部或者 则为空字符串。 readyState 小于 3 则为空字符串。如果接收 到多个有指定名称的头部， 到多个有指定名称的头部，这个头部的值被连 接起来并返回， 接起来并返回，使用逗号和空格分隔开各个头 部的值。 部的值。
设置回调函数（ 设置回调函数（续）
它是在调用send() 需要特别注意的是该属性在代码中设置的位置 —— 它是在调用 之前设置的。发送请求之前必须设置该属性， 之前设置的。发送请求之前必须设置该属性，这样服务器在回答完成请 求之后能够查看该属性！ 求之后能够查看该属性！ 注意，这里 是个函数名称， 注意，这里updatePage是个函数名称，不能写成 是个函数名称 不能写成updatePage() 函数调 用的形式！这表示将 用的形式！这表示将updatePage()函数运行的返回结果赋值给 函数运行的返回结果赋值给 onreadystatechange属性。体会JavaScript中函数也是对象的特征。 属性。体会 中函数也是对象的特征。 属性 中函数也是对象的特征
尝试创建 XMLHttpRequest 对象 如果失败,先尝试使用较新版本的 如果失败 先尝试使用较新版本的Microsoft浏览器创建 Microsoft 兼容 先尝试使用较新版本的 浏览器创建 的对象（ ），如果失败 的对象（Msxml2.XMLHTTP），如果失败（尝试使用较老版本的 ），如果失败（ Microsoft浏览器创建 Microsoft兼容的对象（Microsoft.XMLHTTP） 浏览器创建 兼容的对象（ 兼容的对象 ） 如果全部失败，则保证 的值仍然为false 如果全部失败，则保证request的值仍然为 的值仍然为
onreadystatechange方法 onreadystatechange
send() 发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法 的可选请求体。
onreadystatechange方法 onreadystatechange
setRequestHeader() 向一个打开但未发送的请求设置或 添加一个 HTTP 请求。
创建 XMLHttpRequest 对象
通过一行简单的 JavaScript 代码，我 们就可以创建 XMLHttpRequest 对象。 在所有现代浏览器中（包括 IE 7）：
实例
使用Ajax发送异步请求示例 发送异步请求示例 使用 发送异步请求
考虑以下情景： 考虑以下情景：
当用户输入邮编后， 当用户输入邮编后，系统自动填充相应 的城市和省份
检查request是否仍然为 检查 是否仍然为false（如果一切顺利就不会是false） （如果一切顺利就不会是 ） 是否仍然为 如果出现问题则使用JavaScript警告通知用户出现了问题 警告通知用户出现了问题 如果出现问题则使用
建立到服务器的请求
准备好XMLHttpRequest对象，就可以建立到服务器 对象， 准备好 对象 的请求了。 的请求了。
XMLHttpRequest 对象
XMLHttpRequest 对象提供了对 HTTP 协议的 完全的访问，包括做出 POST 和 HEAD 请求以 及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应， 并且能够以文本或者一个 DOM 文档的形式返 回内容。 尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文 本文档。 XMLHttpRequest 对象是名为 AJAX 的 Web 应 用程序架构的一项关键功能。
onreadystatechange方法 onreadystatechange
getAllResponseHeaders() 把 HTTP 响应头部作为未解析的字 符串返回。 如果 readyState 小于 3，这个方 法返回 null。否则，它返回服务器发送 的所有 HTTP 响应的头部。头部作为单 个的字符串返回，一行一个头部。每行 用换行符 "\r\n" 隔开。
首先结合一些表单中的数据来构造 首先结合一些表单中的数据来构造URL： 结合一些表单中的数据来构造 ：
方法用于转义不能用明文正确发送的任何字符。 注：escape() 方法用于转义不能用明文正确发送的任何字符。 比如， 比如，空格将被转换成字符 %20，从而能够在 URL 中传递 ， 这些字符。 这些字符。 然后建立请求： 然后建立请求：
responseText
目前为止从服务器接收到的响应体（不包括 头部），或者如果还没有接收到数据的话，就 是空字符串。 如果 readyState 小于 3，这个属性就是 一个空字符串。当 readyState 为 3，这个属 性返回目前已经接收的响应部分。如果 readyState 为 4，这个属性保存了完整的响 应体。 如果响应包含了为响应体指定字符编码的 头部，就使用该编码。否则，假定使用 Unicode UTF-8。
open()：建立到服务器的新请求 ： send()：向服务器发送请求 ： readyState：提供当前 HTML 的就绪状态 ： status：服务器响应的状态代码 ： responseText：服务器返回的请求响应文本 ：
创建XMLHttpRequest（续） （ 创建
创建跨浏览器的XMLHttpRequest对象： 对象： 创建跨浏览器的 对象
XMLHttpRequest浏览器支持 浏览器支持
XMLHttpRequest 得到了所有现代浏览器 较好的支持。唯一的浏览器依赖性涉及 XMLHttpRequest 对象的创建。在 IE 5 和 IE 6 中，必须使用特定于 IE 的 ActiveXObject() 构造函数。
XMLHttpRequest属性
通常使用其中的前三个参数。事实上，即使需要异步连接， 通常使用其中的前三个参数。事实上，即使需要异步连接，通常指定第 更容易理解。 三个参数为 “true”，这样更容易理解 ，这样更容易理解
wk.baidu.com
使用XMLHttpRequest 使用 发送请求
配置好之后，就可以使用send() 一旦请求用 open() 配置好之后，就可以使用 方法发送请求了， 方法只有一个参数， 方法发送请求了，send() 方法只有一个参数，就是要 发送的内容。 发送的内容。 但是我们前面通过URL本身已经发送了 本身已经发送了zipcode的值， 的值， 但是我们前面通过 本身已经发送了 的值 传递数据， 所以这里不需要通过 send() 传递数据，只要传递 null 作为该方法的参数即可： 作为该方法的参数即可：
创建XMLHttpRequest（续） （ 创建
注意不要被这些花括号迷住了眼睛，下面分别介绍每一步 注意不要被这些花括号迷住了眼睛，下面分别介绍每一步:
作为判断条件， 创建一个新变量 request 并赋值 false。使用 false 作为判断条件， 。 表示还没有创建 XMLHttpRequest 对象 增加try/catch块： 块 增加
建立到服务器的请求（ 建立到服务器的请求（续）
方法来建立请求 建立请求。 使用 XMLHttpRequest 对象的 open() 方法来建立请求。该方法有五个 参数： 参数：
request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发 ：发送请求的类型。 ， 送 HEAD 请求 url：要连接的 URL ： asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的， ： ， 。该参数是可选的， 默认为 true username：如果需要身份验证，则可以在此指定用户名。该可选参数没有 ：如果需要身份验证，则可以在此指定用户名。 默认值 password：如果需要身份验证，则可以在此指定口令。该可选参数没有默 ：如果需要身份验证，则可以在此指定口令。 认值
使用Ajax发送异步请求 发送异步请求 使用
课程内容
使用Ajax发送异步请求 发送异步请求 使用 XMLHttpRequest对象详解 对象详解
什么是 XMLHttpRequest 对象？
XMLHttpRequest 对象是开发者的梦想， 因为您能够： 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加载后从服务器接收数据 在后台向服务器发送数据 所有现代的浏览器都支持 XMLHttpRequest 对象。