《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语言)