XMLHTTPRequest对象.ppt

第4章XMLHttpRequest对象 第四章 XMLHttpRequest对象 2 6 2020 1 XMLHttpRequest对象概述XMLHttpRequest对象属性和方法基本的AJAX框架AJAX必须解决的问题 XMLHttpRequest对象XMLHttpRequest对象是整个Ajax技术中的核心 异步发送请求 异步发送请求是根本 局部刷新只是表面的现象 Ajax离开了XMLHttpRequest对象 将失去与服务器异步通信的能力 XMLHttpRequest是一套可以在JavaScript VBScript Jscript等脚本语言中使用的API 它通过HTTP协议异步地向服务器发送请求 并可以获取从服务器返回的响应XMLHttp是客户端同HTTP服务器通讯的协议 客户端通过XMLHTTP对象向服务器发送请求 并使用微软XML文档对象模型 DOM 来处理服务器的响应 2 6 2020 2 概述 第四章 XMLHttpRequest对象 XMLHttpRequest的方法abort 停止发送当前请求getAllResponseHeaders 获取服务器返回的全部响应头 04 01 getResponseHeader headerLabel 根据响应头的名字 获取对应的响应头open method URL asyncFlag username password 建立与服务器URL的连接 并设置请求的方法 以及是否使用异步请求 如果远程服务器需要使用用户名和密码 2 6 2020 3 属性和方法 第四章 XMLHttpRequest对象 send content 发送请求 其中content是请求参数setRequestHeader label value 在发送请求之前 先设置请求头用POST方法提交请求时XMLHttpRequest setRequestHeader Content type application x www form urlencoded 提交COOKIE时XMLHttpRequest setRequestHeader COOKIE cookiename cookievalue 提交XMLXMLHttpRequest setRequestHeader Content Type text xml 注 如果存在已命名的HTTP头 则会被新的定义覆盖 此方法必须在open方法后调用 2 6 2020 4 属性和方法 第四章 XMLHttpRequest对象 XMLHttpRequest的属性onreadystatechange 用于指定XMLHttpRequest对象状态改变时的时间处理函数readyState XMLHttpRequest对象的处理状态 04 02 responseText 用于获取服务器的响应文本responseXML 用于获取服务器响应的XML文档对象 2 6 2020 5 属性和方法 第四章 XMLHttpRequest对象 status 服务器返回的状态码 只有当服务器的响应已经完成时 才会有该状态码statusText 服务器返回的状态文本信息 只有当服务器的响应已经完成时 才会有该状态文本信息 04 03 2 6 2020 6 属性和方法 第四章 XMLHttpRequest对象 XMLHttpRequest对象的运行周期 1 Ajax应用先从创建XMLHttpRequest对象开始 XMLHttpRequest对象允许通过客户端脚本来发送HTTP请求 第一步总是要创建一个XMLHttpRequest实例 然后使用它发送请求 这种请求方式可以是GET或POST 2 XMLHttpRequest发送完之后 服务器的响应何时到达 应如何处理响应 当XMLHttpRequest对象的状态改变时 将触发其onreadystatechange事件 为XMLHttpRequest对象的onreadystatechange事件指定事件处理函数 改事件处理函数可以在XMLHttpRequest状态改变时被触发 这个事件处理函数称为回调函数 3 XMLHttpRequest状态改变 且readyState为4时 表明服务器的响应已经完成 此时可以处理服务器响应 4 使用事件处理函数监听XMLHttpRequest状态的改变 当XMLHttpRequest的readyState为4 且status为200时 事件处理函数处理服务器响应 5 进入事件处理函数后 仍需借助XMLHttpRequest来获取服务器响应 调用responseText方法或responseXML方法获取服务器的响应 至此XMLHttpRequest对象的运行周期结束 6 JS通过DOM操作将服务器响应动态加载到HTML页面中 2 6 2020 7 搭建基本的AJAX框架 第四章 XMLHttpRequest对象 创建XMLHttpRequest对象XMLHttpRequest在不同的浏览器中的实现完全不同 IE采用ActiveXObject实现 而Firefox Opera等浏览器则采用不同的方式实现这个对象 即使是IE 不同版本也有不同的实现方式 因此在创建XMLHttpRequest对象时 必须尽量考虑到目前已经存在的各种浏览器 采用通用代码来创建XMLHttpRequest对象 2 6 2020 8 搭建基本的AJAX框架 第四章 XMLHttpRequest对象 functioncreateXMLHttpRequest if window XMLHttpRequest objXMLHttp newXMLHttpRequest else varMSXML MSXML2 XMLHTTP 5 0 MSXML2 XMLHTTP 4 0 MSXML2 XMLHTTP 3 0 MSXML2 XMLHTTP Miscrosoft XMLHTTP for varn 0 n MSXML Length n try objXMLHttp newActiveXObject MSXML n break catch e 发送简单请求 04 04 简单请求 指不包含任何参数的请求 这种请求通常用于自动刷新的应用 例如证交所的实时信息发送 这种请求通常用于公告性质的响应 公告性质的响应无须客户端的任何请求参数 而服务器将根据业务数据自动生成 对于简单请求 因为无须发送请求参数 因而采用POST和GET并没有太大区别步骤 1 初始化XMLHttpRequest对象 2 打开与服务器的链接 打开链接时 指定发送请求的方法 采用GET或POST 指定是否采用异步 3 设置监听XMLHttpRequest状态改变的事件处理函数 4 发送请求 2 6 2020 9 搭建基本的AJAX框架 第四章 XMLHttpRequest对象 发送GET请求 04 05 GET请求用于从服务器上获取数据 GET请求将所有请求参数转换成一个查询字符串 并将该字符串添加到请求的URL之后 因而可在请求的URL后看到请求参数名 请求参数值 如果将某个表单的action属性设置为GET 则请求会将表单中各字段的名和值转换成字符串 并附加到URL之后 GET请求传送的数据量较小 一般不能大于2KB注意 通过OPEN方法打开与服务器的连接时 设置使用GET方法如需发送请求参数 应将请求参数转成查询字符串 并追加到请求URL之后 2 6 2020 10 搭建基本的AJAX框架 第四章 XMLHttpRequest对象 发送POST请求 04 06 POST请求用于向服务器发送数据 POST请求则通过HTTPPOST机制 将请求的参数以及对应的值放在HTMLHeader中传输 用户看不到明码的请求参数值步骤 1 使用OPEN方法打开连接时 指定使用POST方式发送请求 2 设置正确的请求头 POST请求通常应设置Content Type请求头 3 发送请求 把请求参数转为查询字符串 将该字符串作为send 方法的参数即可 2 6 2020 11 搭建基本的AJAX框架 第四章 XMLHttpRequest对象 处理响应的时机获得服务器的响应很简单 主要依赖于两个属性 responseText和responseXML 但并不是任意时刻调用XMLHttpRequest对象的两个属性都可以获取服务器响应 如果服务器响应没有结束或者没有生成正确的响应 则调用这两个属性将不能取得正确的响应 在XMLHttpRequest与服务器的通信过程中 XMLHttpRequest的readyState属性可动态监控服务器的响应 当值为4时标明服务器响应已经成功 服务器响应完成后 还需要判断响应是否正确 将借助XMLHttpRequest对象的status属性 该属性代表服务器响应的状态码 服务器响应正确状态码为200 如果没有发送请求 而是直接从浏览器缓存读取响应 状态码为304由此可见 当readystate等于4 且status状态码为200或304时 客户端就可以开始处理服务器的响应了 2 6 2020 12 搭建基本的AJAX框架 第四章 XMLHttpRequest对象 if objXMLHttp readyState 4 objXMLHttp status 200 objXMLHttp status 304 使用文本响应使用responseText用于生成文本响应 该属性将返回服务器响应