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