《XMLHTTPRequest对象.ppt》由会员分享，可在线阅读，更多相关《XMLHTTPRequest对象.ppt（15页珍藏版）》请在金锄头文库上搜索。
1、第第4章章 XMLHttpRequest对象对象第四章（XMLHttpRequest对象）8/11/20241lXMLHttpRequestXMLHttpRequestXMLHttpRequestXMLHttpRequest对象概述对象概述对象概述对象概述lXMLHttpRequestXMLHttpRequestXMLHttpRequestXMLHttpRequest对象属性和方法对象属性和方法对象属性和方法对象属性和方法l基本的基本的基本的基本的AJAXAJAXAJAXAJAX框架框架框架框架lAJAXAJAXAJAXAJAX必须解决的问题必须解决的问题必须解决的问题必须解决的问题l XML
2、HttpRequest对象对象 XMLHttpRequest对象是整个Ajax技术中的核心，异步发送请求。异步发送请求是根本，局部刷新只是表面的现象。Ajax离开了XMLHttpRequest对象，将失去与服务器异步通信的能力。 XMLHttpRequest是一套可以在JavaScript、VBScript、Jscript等脚本语言中使用的API，它通过HTTP协议异步地向服务器发送请求，并可以获取从服务器返回的响应 XMLHttp是客户端同HTTP服务器通讯的协议，客户端通过XMLHTTP对象向服务器发送请求，并使用微软XML文档对象模型（DOM）来处理服务器的响应。8/11/20242概述
3、概述第四章（XMLHttpRequest对象）l XMLHttpRequest的方法的方法abort()：停止发送当前请求getAllResponseHeaders()：获取服务器返回的全部响应头04/01getResponseHeader(“headerLabel”)：根据响应头的名字，获取对应的响应头open(“method”,”URL”,asyncFlag,“username”,“password”)：建立与服务器URL的连接，并设置请求的方法，以及是否使用异步请求。如果远程服务器需要使用用户名和密码8/11/20243属性和方法属性和方法第四章（XMLHttpRequest对象）参数名
4、参数名说明说明Method字符串型。HTTP请求的方法，例如POST、GET、PUT、HEAD、DELETE等，大小写不敏感URL字符串型。请求的URL地址，可以为绝对地址或相对地址asyncFlag布尔型。指定此请求是否为异步方式，默认为true；如果是异步方式，则当状态改变时会调用onreadystatechange属性指定回调函数Username字符串型。当服务器需要身份验证时，在此指定用户名Password字符串型。验证信息中的密码部分。如果用户名为空，则此值将被忽略send(content)：发送请求，其中content是请求参数setRequestHeader(“label”,”v
5、alue”)：在发送请求之前，先设置请求头用POST方法提交请求时 XMLHttpRequest.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”)提交COOKIE时 XMLHttpRequest.setRequestHeader(“COOKIE”,”cookiename=cookievalue”)提交XML XMLHttpRequest.setRequestHeader(“Content-Type”,”text/xml”)注：如果存在已命名的注：如果存在已命名的HTTP头，则会被新的定义覆盖，此方法必须在头
6、，则会被新的定义覆盖，此方法必须在open方法后调用方法后调用8/11/20244属性和方法属性和方法第四章（XMLHttpRequest对象）参数名参数名说明说明label字符串型。头名称value字符串型。值l XMLHttpRequest的的属性属性onreadystatechange：用于指定XMLHttpRequest对象状态改变时的时间处理函数readyState：XMLHttpRequest对象的处理状态04/02responseText：用于获取服务器的响应文本responseXML：用于获取服务器响应的XML文档对象8/11/20245属性和方法属性和方法第四章（XMLHtt
7、pRequest对象）状态码状态码说明说明0XMLHttpRequest对象还没有完成初始化1XMLHttpRequest对象开始发送请求2XMLHttpRequest对象的请求发送完成3XMLHttpRequest对象开始读取服务器的响应4XMLHttpRequest对象读取服务器响应结束status：服务器返回的状态码，只有当服务器的响应已经完成时，才会有该状态码statusText：服务器返回的状态文本信息，只有当服务器的响应已经完成时，才会有该状态文本信息04/038/11/20246属性和方法属性和方法第四章（XMLHttpRequest对象）状态码状态码说明说明200服务器响应正常
8、304该资源在上次请求之后没有任何修改，这通常用于缓存机制。使用GET时尤其注意400无法找到请求的资源401访问资源的权限不够403没有权限访问资源404需要访问的资源不存在405需要访问的资源被禁止407访问的资源需要代理身份验证414请求的URL太长500服务器内部错误lXMLHttpRequest对象的运行周期对象的运行周期（1）Ajax应用先从创建XMLHttpRequest对象开始，XMLHttpRequest对象允许通过客户端脚本来发送HTTP请求。第一步总是要创建一个XMLHttpRequest实例，然后使用它发送请求，这种请求方式可以是GET或POST（2）XMLHttpRe
9、quest发送完之后，服务器的响应何时到达？应如何处理响应？当XMLHttpRequest对象的状态改变时，将触发其onreadystatechange事件，为XMLHttpRequest对象的onreadystatechange事件指定事件处理函数，改事件处理函数可以在XMLHttpRequest状态改变时被触发，这个事件处理函数称为回调函数（3）XMLHttpRequest状态改变，且readyState为4时，表明服务器的响应已经完成，此时可以处理服务器响应（4）使用事件处理函数监听XMLHttpRequest状态的改变，当XMLHttpRequest的readyState为4，且sta
10、tus为200时，事件处理函数处理服务器响应（5）进入事件处理函数后，仍需借助XMLHttpRequest来获取服务器响应，调用responseText方法或responseXML方法获取服务器的响应，至此XMLHttpRequest对象的运行周期结束（6）JS通过DOM操作将服务器响应动态加载到HTML页面中8/11/20247搭建基本的搭建基本的AJAX框架框架第四章（XMLHttpRequest对象）l创建创建XMLHttpRequest对象对象XMLHttpRequest在不同的浏览器中的实现完全不同，IE采用ActiveX Object实现，而Firefox、Opera等浏览器则采用
11、不同的方式实现这个对象。即使是IE，不同版本也有不同的实现方式。因此在创建XMLHttpRequest对象时，必须尽量考虑到目前已经存在的各种浏览器，采用通用代码来创建XMLHttpRequest对象。8/11/20248搭建基本的搭建基本的AJAX框架框架第四章（XMLHttpRequest对象）function createXMLHttpRequest() if(window.XMLHttpRequest) objXMLHttp=new XMLHttpRequest(); else var MSXML=MSXML2.XMLHTTP.5.0, MSXML2.XMLHTTP.4.0, MSXM
12、L2.XMLHTTP.3.0, MSXML2.XMLHTTP, Miscrosoft.XMLHTTP;for(var n=0;nMSXML.Length;n+) tryobjXMLHttp=new ActiveXObject(MSXMLn);break; catch(e)l 发送简单请求发送简单请求04/04 简单请求，指不包含任何参数的请求。这种请求通常用于自动刷新的应用，例如证交所的实时信息发送，这种请求通常用于公告性质的响应，公告性质的响应无须客户端的任何请求参数，而服务器将根据业务数据自动生成。对于简单请求，因为无须发送请求参数，因而采用POST和GET并没有太大区别步骤：步骤：（1）
13、初始化XMLHttpRequest对象（2）打开与服务器的链接，打开链接时，指定发送请求的方法；采用GET或POST；指定是否采用异步（3）设置监听XMLHttpRequest状态改变的事件处理函数（4）发送请求8/11/20249搭建基本的搭建基本的AJAX框架框架第四章（XMLHttpRequest对象）l 发送发送GET请求请求04/05 GET请求用于从服务器上获取数据。GET请求将所有请求参数转换成一个查询字符串，并将该字符串添加到请求的URL之后，因而可在请求的URL后看到请求参数名、请求参数值。如果将某个表单的action属性设置为GET，则请求会将表单中各字段的名和值转换成字符
14、串，并附加到URL之后。 GET请求传送的数据量较小，一般不能大于2KB注意：注意：通过OPEN方法打开与服务器的连接时，设置使用GET方法如需发送请求参数，应将请求参数转成查询字符串，并追加到请求URL之后8/11/202410搭建基本的搭建基本的AJAX框架框架第四章（XMLHttpRequest对象）l 发送发送POST请求请求04/06 POST请求用于向服务器发送数据。POST请求则通过HTTP POST机制，将请求的参数以及对应的值放在HTML Header中传输，用户看不到明码的请求参数值 步骤步骤：（1）使用OPEN方法打开连接时，指定使用POST方式发送请求（2）设置正确的请
15、求头，POST请求通常应设置Content-Type请求头（3）发送请求，把请求参数转为查询字符串，将该字符串作为send()方法的参数即可8/11/202411搭建基本的搭建基本的AJAX框架框架第四章（XMLHttpRequest对象）l处理响应的时机处理响应的时机 获得服务器的响应很简单，主要依赖于两个属性：responseText和responseXML。但并不是任意时刻调用XMLHttpRequest对象的两个属性都可以获取服务器响应。如果服务器响应没有结束或者没有生成正确的响应，则调用这两个属性将不能取得正确的响应。 在XMLHttpRequest与服务器的通信过程中，XMLHtt
16、pRequest的readyState属性可动态监控服务器的响应，当值为4时标明服务器响应已经成功。 服务器响应完成后，还需要判断响应是否正确，将借助XMLHttpRequest对象的status属性，该属性代表服务器响应的状态码，服务器响应正确状态码为200，如果没有发送请求，而是直接从浏览器缓存读取响应，状态码为304 由此可见 ，当readystate等于4，且status状态码为200或304时，客户端就可以开始处理服务器的响应了8/11/202412搭建基本的搭建基本的AJAX框架框架第四章（XMLHttpRequest对象）if(objXMLHttp.readyState=4& (
17、objXMLHttp.status=200 | objXMLHttp.status=304)l使用文本响应使用文本响应 使用responseText用于生成文本响应，该属性将返回服务器响应的字符串，使用文本响应适用于响应简单字符串的情形，基本不包含太多格式。l使用使用XML响应响应04/08 使用responseXML用于生成XML响应，借助于浏览器接卸XML文档的能力，JS可以访问到XML文档的节点值，一旦访问到节点值，就可以通过DOM动态加载到页面中显示出来。8/11/202413搭建基本的搭建基本的AJAX框架框架第四章（XMLHttpRequest对象）2024/8/1114谢谢大家谢谢大家！第四章（XML语言）
