XMLHTTPRequest对象.ppt

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