Ajax2_使用Ajax发送异步请求

处理服务器响应
请求发送后,用户可以继续使用 表单( 请求发送后,用户可以继续使用Web表单(同时服务器在处理请 表单 求).而当服务器完成了请求处理,服务器查看 ).而当服务器完成了请求处理, 而当服务器完成了请求处理 onreadystatechange属性确定要调用的方法.除此以外,可以 属性确定要调用的方法.除此以外, 属性确定要调用的方法 将应用程序看作其他应用程序一样,无论是否异步.换句话说, 将应用程序看作其他应用程序一样,无论是否异步.换句话说, 不一定要采取特殊的动作编写响应服务器的方法, 不一定要采取特殊的动作编写响应服务器的方法,只需要改变表 单或其它的页面结构, 单或其它的页面结构,让用户访问另一个 URL 或者做响应服务 器需要的任何事情. 器需要的任何事情. 处理函数(仅弹出简单的警告): 处理函数(仅弹出简单的警告):
0:请求没有发出(在调用 open() 之前) :请求没有发出( 之前) 1:请求已经建立但还没有发出(调用 send() 之前) :请求已经建立但还没有发出( 之前) 2:请求已经发出正在处理之中(这里通常可以从响应得到内容头部) :请求已经发出正在处理之中(这里通常可以从响应得到内容头部) 3:请求已经处理,响应中通常有部分数据可用,但是服务器还没有完成响应 :请求已经处理,响应中通常有部分数据可用, 4:响应已完成,可以访问服务器响应并使用它 :响应已完成,
建立到服务器的请求( 建立到服务器的请求(续)
方法来建立请求 建立请求. 使用 XMLHttpRequest 对象的 open() 方法来建立请求.该方法有五个 参数: 参数:
request-type:发送请求的类型.典型的值是 GET 或 POST,但也可以发 :发送请求的类型. , 送 HEAD 请求 url:要连接的 URL : asynch:如果希望使用异步连接则为 true,否则为 false.该参数是可选的, : , .该参数是可选的, 默认为 true username:如果需要身份验证,则可以在此指定用户名.该可选参数没有 :如果需要身份验证,则可以在此指定用户名. 默认值 password:如果需要身份验证,则可以在此指定口令.该可选参数没有默 :如果需要身份验证,则可以在此指定口令. 认值
创建XMLHttpRequest(续) ( 创建
注意不要被这些花括号迷住了眼睛,下面分别介绍每一步 注意不要被这些花括号迷住了眼睛,下面分别介绍每一步:
作为判断条件, 创建一个新变量 request 并赋值 false.使用 false 作为判断条件, . 表示还没有创建 XMLHttpRequest 对象 增加try/catch块: 块 增加
输入了错误的URL请求将得到 请求将得到404错误码,它表示该页面不存在 错误码, 输入了错误的 请求将得到 错误码 403和401错误码表示所访问的数据受到保护或者禁止访问 和 错误码表示所访问的数据受到保护或者禁止访问
无论哪种情况, 中得到的.换句话说, 无论哪种情况,这些错误码都是从完成的响应 中得到的.换句话说,服 务器执行了请求( 就绪状态是4) 务器执行了请求(即HTTP就绪状态是 )但是没有返回客户机预期的数 就绪状态是 状态. 据.因此除了就绪状态外,还需要检查HTTP状态.我们期望的状态码是 因此除了就绪状态外,还需要检查 状态 200,它表示一切顺利.如果就绪状态是4而且状态码是 ,它表示一切顺利.如果就绪状态是 而且状态码是 而且状态码是200,就可以处 , 理服务器的数据了,而且这些数据应该就是要求的数据( 理服务器的数据了,而且这些数据应该就是要求的数据(而不是错误或 者其他有问题的信息) 者其他有问题的信息)
使用Ajax发送异步请求 发送异步请求 使用
课程内容
使用Ajax发送异步请求 发送异步请求 使用 XMLHttpRequest对象详解 对象详解
使用Ajax发送异步请求示例 发送异步请求示例 使用 发送异步请求
考虑以下情景: 考虑以下情景:
当用户输入邮编后, 当用户输入邮编后,系统自动填充相应 的城市和省份
检查request是否仍然为 检查 是否仍然为false(如果一切顺利就不会是false) (如果一切顺利就不会是 ) 是否仍然为 如果出现问题则使用JavaScript警告通知用户出现了问题 警告通知用户出现了问题 如果出现问题则使用
建立到服务器的请求
准备好XMLHttpRequest对象,就可以建立到服务器 对象, 准备好 对象 的请求了. 的请求了.
处理服务器响应( 处理服务器响应(续)
运行以上代码,根据浏览器的不同,在表单停止弹出警告之前会看到两次, 运行以上代码,根据浏览器的不同,在表单停止弹出警告之前会看到两次, 三次甚至四次警告.原因在于还没有考虑 就绪状态, 三次甚至四次警告.原因在于还没有考虑HTTP就绪状态,这是请求 响应 就绪状态 这是请求/响应 循环中的一个重要部分 HTTP就绪状态(readyState)表示请求的状态或情形.它用于确定该请 就绪状态( 就绪状态 )表示请求的状态或情形. 求是否已经开始,是否得到了响应或者请求 响应模型是否已经完成 响应模型是否已经完成. 求是否已经开始,是否得到了响应或者请求/响应模型是否已经完成.它还 可以帮助确定读取服务器提供的响应文本或数据是否安全.在Ajax应用程 可以帮助确定读取服务器提供的响应文本或数据是否安全. 应用程 序中需要了解五种就绪状态: 序中需要了解五种就绪状态:
通常使用其中的前三个参数.事实上,即使需要异步连接, 通常使用其中的前三个参数.事实上,即使需要异步连接,通常指定第 更容易理解. 三个参数为 "true",这样更容易理解 ,这样更容易理解
使用XMLHttpRequest 使用 发送请求
配置好之后,就可以使用send() 一旦请求用 open() 配置好之后,就可以使用 方法发送请求了, 方法只有一个参数, 方法发送请求了,send() 方法只有一个参数,就是要 发送的内容. 发送的内容. 但是我们前面通过URL本身已经发送了 本身已经发送了zipcode的值, 的值, 但是我们前面通过 本身已经发送了 的值 传递数据, 所以这里不需要通过 send() 传递数据,只要传递 null 作为该方法的参数即可: 作为该方法的参数即可:
尝试创建 XMLHttpRequest 对象 如果失败,先尝试使用较新版本的 如果失败 先尝试使用较新版本的Microsoft浏览器创建 Microsoft 兼容 先尝试使用较新版本的 浏览器创建 的对象( ),如果失败 的对象(Msxml2.XMLHTTP),如果失败(尝试使用较老版本的 ),如果失败( Microsoft浏览器创建 Microsoft兼容的对象(Microsoft.XMLHTTP) 浏览器创建 兼容的对象( 兼容的对象 ) 如果全部失败,则保证 的值仍然为false 如果全部失败,则保证request的值仍然为 的值仍然为
设置回调函数( 设置回调函数(续)
它是在调用send() 需要特别注意的是该属性在代码中设置的位置 —— 它是在调用 之前设置的.发送请求之前必须设置该属性, 之前设置的.发送请求之前必须设置该属性,这样服务器在回答完成请 求之后能够查看该属性! 求之后能够查看该属性! 注意,这里 是个函数名称, 注意,这里updatePage是个函数名称,不能写成 是个函数名称 不能写成updatePage() 函数调 用的形式!这表示将 用的形式!这表示将updatePage()函数运行的返回结果赋值给 函数运行的返回结果赋值给 onreadystatechange属性.体会JavaScript中函数也是对象的特征. 属性.体会 中函数也是对象的特征. 属性 中函数也是对象的特征
设置回调函数
由于是异步请求,请求发出后 方法不会等待服务器处理完成, 由于是异步请求,请求发出后JavaScript 方法不会等待服务器处理完成, 因此代码将继续执行,就是说,将退出该方法而把控制返回给表单. 因此代码将继续执行,就是说,将退出该方法而把控制返回给表单.用 户可以继续输入信息,应用程序不会等待服务器. 户可以继续输入信息,应用程序不会等待服务器. 当服务器完成请求之后,需要指定该如何处理响应.XMLHttpRequest 当服务器完成请求之后,需要指定该如何处理响应. 对象的onreadystatechange属性允许指定一个回调函数反向调用 属性允许指定一个回调函数反向调用Web 对象的 属性允许指定一个回调函数反向调用 页面中的代码. 页面中的代码. 当服务器完成请求之后,会查看 对象, 当服务器完成请求之后,会查看XMLHttpRequest对象,特别是 对象 onreadystatechange属性.然后调用该属性指定的任何方法.之所以 属性.然后调用该属性指定的任何方法. 属性 称为回调是因为由服务器向网页发起调用,无论网页本身正在做什么. 称为回调是因为由服务器向网页发起调用,无论网页本身正在做什么. 这就是称之为异步的原因:用户在一层上操作表单, 这就是称之为异步的原因:用户在一层上操作表单,而在另一层上服务 器响应请求并触发onreadystatechange属性指定的回调方法. 属性指定的回调方法. 器响应请求并触发 属性指定的回调方法
处理服务器响应( 处理服务器响应(续)
与大多数跨浏览器问题一样,这些就绪状态的使用也不尽一致. 与大多数跨浏览器问题一样,这些就绪状态的使用也不尽一致. 实际上很少出现就绪状态从0到 , , 再到 再到4, 实际上很少出现就绪状态从 到1,2,3再到 ,一些浏览器从不 报告0或 而直接从 开始,然后是3和 , 而直接从2开始 报告 或1而直接从 开始,然后是 和4,其他浏览器则报告所有 的状态.还有一些则多次报告就绪状态1. 的状态.还有一些则多次报告就绪状态 . 对于Ajax编程,需要直接处理的惟一状态就是就绪状态4,它表 编程,需要直接处理的惟一状态就是就绪状态 , 对于 编程 示服务器响应已经完成,可以安全地使用响应数据了.基于此, 示服务器响应已经完成,可以安全地使用响应数据了.基于此, 回调函数做如下调整: 回调函数做如下调整:
open():建立到服务器的新请求 : send():向服务器发送请求 : readyState:提供当前 HTML 的就绪状态 : status:服务器响应的状态代码 : responseText:服务器返回的请求响应文本 :
创建XMLHttpRequest(续) ( 创建
创建跨浏览器的XMLHttpRequest对象: 对象: 创建跨浏览器的 对象
首先结合一些表单中的数据来构造 首先结合一些表单中的数据来构造URL: 结合一些表单中的数据来构造 :
方法用于转义不能用明文正确发送的任何字符. 注:escape() 方法用于转义不能用明文正确发送的任何字符. 比如, 比如,空格将被转换成字符 %20,从而能够在 URL 中传递 , 这些字符. 这些字符. 然后建立请求: 然后建立请求:
修改后就可以保证服务器的处理已经完wk.baidu.com, 修改后就可以保证服务器的处理已经完成,现在就会看到只显示 一次警告信息了
处理服务器响应( 处理服务器响应(续)
以上代码看起来似乎不错, 以上代码看起来似乎不错,但是还有一个问题 —— 如果服务器响应请求 并完成了处理但是报告了一个错误怎么办?服务器端代码应该是由 并完成了处理但是报告了一个错误怎么办?服务器端代码应该是由Ajax, , JSP,普通HTML表单或其他类型的代码调用的,但只能使用传统的 ,普通 表单或其他类型的代码调用的, 表单或其他类型的代码调用的 Web专用方法报告信息.而在 Web 世界中,HTTP状态码(status)可 专用方法报告信息. 世界中, 状态码( 专用方法报告信息 状态码 ) 以处理请求中可能发生的各种问题,比如: 以处理请求中可能发生的各种问题,比如:
创建静态页面原型
创建XMLHttpRequest 创建
要实现这种功能, 要实现这种功能,必须非常熟悉一个 JavaScript 对象, 对象,即 XMLHttpRequest.这个小小的对象实 . 际上已经在几种浏览器中存在一段时间了, 际上已经在几种浏览器中存在一段时间了,它是 Ajax 的核心.该对象的几个常用方法和属性: 的核心.该对象的几个常用方法和属性: