HMLHttpRequest-对象详解.docx

HMLHttpRequest 对象详解与传统Web应用中发送请求不同，Ajax 必须以编程方式来发送请求。在请求发送出去之后，服务器相应会在适当的时候返回，但客户端浏览器不会自动加载这种异步响应，程序必须先调用HMLHttpRequest对象的responseText或responseXML来获取服务器响应，再通过DOM操作将服务器响应动态加载到当前页面中。2.1 XMLHttpRequest对象概述关于X MLHttpRequest最通用的定义是：XMLHttpRequest是一套可以在JavaScript、VBscript、JScript等脚本语言中使用的API，它通过HTTP协议异步地向服务器发送请求，并获取从服务器返回的响应。2.2 XMLHttpRequest的方法和属性2.2.1 XMLHttpRequest的方法（6个） abort():停止发送当前请求。 getAllResponseHeaders():获取服务器返回的全部响应头。 getResponseHeader(headerLabel):根据响应头的名字，获取对应的响应头。 open(method,URL,asyncFlag,userName,password):建立与服务器URL的连接，并设置请求的方法，以及是否使用异步请求。如果远程服务器需要用户名、密码，则提供对应信息。method:get/post;URL:second.jsp;asyncFlag:true/false; send(content):发送请求。其中content是请求参数，如没有建议设置为null setRequestHeader(label,value):在发送请求之前，先设置请求头。详细例子见文件夹022.2getAllResponseHeaders提示：调试程序时，应先保证服务器响应完全正确，再调试JavaScript代码。2.2.2 XMLHttpRequest 的属性（6个） onreadystatechange:该属性用于指定XMLHttpRequest对象状态（4个状态）改变时的事件处理函数。 readyState:该属性用于获取XMLHttpRequest对象的处理状态。 responseText:该属性用于获取服务器响应文本。 responseXML:该属性用于获取服务器响应的XML文档对象。 status:该属性是服务器返回的状态码，只有当服务器的响应已经完成时，才会有该状态码。 statusText:该属性是服务器返回的状态文本信息，只有当服务器的响应已经完成时，才会有该状态文本信息。1.onreadystatechange属性onreadystatechange属性用于指定XMLHttpRequest对象的状态改变时执行的函数。当其对象的状态改变时，该函数将被触发。也就是说，XMLHttpRequest对象是事件源，它可以引发赋给onreadystatechange属性值的那个函数的执行。对象每次改变状态时，即readyState属性值改变，都会触发监听该事件的事件处理器（指定的函数）。2.readyState属性readyState的属性有四种状态： 0: XMLHttpRequest对象还没有完成初始化。 1: XMLHttpRequest对象开始发送请求。 2: XMLHttpRequest对象的请求发送完成。 3: XMLHttpRequest对象开始读取服务器的响应。 4: XMLHttpRequest对象读取服务器响应结束。当readyState状态为2时，服务器可以获取XMLHttpRequest发送的请求参数。详细例子见文件夹022.2 readyState注意：以上两个属性名在IE中可以不区分大小写，但是在其他浏览器中要严格区分大小写。 只能写成onreadystatechange。为了保证更好的跨浏览器效果，建议严格区分大小写。3.status和statusText属性服务器的响应完成后，依然不能直接获取服务器响应。因为服务器响应也有很多种情况。例如浏览器访问一个并不存在的资源时，服务器自动生成错误提示页，上面显示HTTP Status 404，404表示资源不存在，即即使资源不存在或者服务器错误，服务器一样会产生响应。也就是说，即使程序判断XMLHttpRequest的readyState为4，即服务器响应已经完成，但从服务器获取的响应信息依然有可能是错误的（执行了，但结果不一定合理）。为了判断服务器响应是否正确，可以检测XMLHttpRequest的status属性或statusText属性。只有当服务器响应正常时，JavaScript才应该读取服务器响应信息，并将信息动态加载到目标页面。status常用状态码及含义如下： 200：服务器响应正常 304：该资源在上次请求之后没有任何修改。这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意。 400：无法找到请求的资源。 401：访问资源的权限不够。 403：没有权限访问资源。 404：需要访问的资源不存在。 405：需要访问的资源被禁止。 407：访问的资源需要代理身份验证。 414：请求的URL太长。 500：服务器内部错误（服务器中的代码出现问题）。如果想通过JavaScript获取服务器响应，必须：1.判断readyState值是否为4；2.判断status的值是否为200。详细例子见文件夹022.2status注意：实际应用中往往需要对服务器响应不正常的情况进行处理。如果服务器响应出现错误， 但页面没有输出任何提示，则对用户来说是一个巨大的困惑。2.3 发送请求2.3.1 发送简单请求所谓简单请求，是指不包含任何参数的请求。这种请求通常用于自动刷新的应用，例如证券交易所的实时信息发送。对于简单请求，因为无须发送请求参数，所以采用POST和GET方式并没有太大区别。XMLHttpRequest执行步骤：1. 初始化XMLHttpRequest对象。2. 打开与服务器的连接。打开连接时，指定发送请求的方法：采用POST或GET;指定是否采用异步方法（open()方法）。3. 设置监听XMLHttpRequest状态改变的事件处理函数（onreadystatechange赋值）。4. 发送请求（sent()方法）。如采用POST方法发送请求，可发送带参数的请求。open方法通常有三个参数：第一个参数指定发送请求的方式，只能是POST或GET，通常建议采用POST方式；第二个参数指定发送请求的服务器资源地址；第三个参数只能是true或false，用于指定是否采用异步方式发送请求。详细例子见文件夹022.3simple2.3.2 发送GET请求GET请求用于从服务器上获取数据，POST请求用于向服务器发送数据。GET请求将所有请求参数转换成一个查询字符串，并添加到请求的URL之后，因此可以在请求的URL后面看到请求参数名和请求参数值。 GET请求传送的数据量较小，一般不能大于2KB。POST传送的数据量较大，通常认为不受限制，但往往取决于服务器的限制。 POST请求通过HTTP POST机制，将请求的参数以及对应的值放在HTML Header中传输，用户看不到明码的请求参数值。当使用Ajax发送异步请求时，建议使用POST请求。虽然GET请求的请求参数是附加在URL之后的，但使用send方法时，还是应该为send方法传入参数。如果调用send方法时无需发送请求参数，则使用null作为参数即可，即send(null)。如果直接使用send()方法，则在IE中可以运行，在FF中将不能正常运行，因为FF等浏览器要求调用send()方法时必须传入参数。详细例子见文件夹022.3 get2.3.3 发送POST请求POST请求的适应性更广，可使用更大的请求参数，因此在使用Ajax发送请求时，尽量采用POST方式。发送POST请求通常需要如下三个步骤：1. 使用open方法打开连接时，指定使用POST方式发送请求。2. 设置正确的请求头，POST请求通常应设置Content-Type请求头。3. 发送请求，把请求参数转为查询字符串，将该字符串作为send()方法的参数。详细例子见文件夹022.3 post2.3.4 发送请求时的编码问题GET方式发送请求参数所用的字符集与客户端浏览器有关，不同浏览器在发送GET请求参数时使用了不同的字符串集。使用POST请求，尽量少用GET请求的理由： 处理GET请求的请求参数比较繁琐。 当请求参数包含的数据太多时，GET请求可能丢失请求参数。 当两次GET请求的请求参数相同是，IE将直接使用服务器上次的缓存，根本不会重新发送请求，这对于自动刷新页面相当不利。但是有个应对方法：不管是否要发送请求参数，发送Ajax请求时总是额外的增加一个随机数的参数，这样就可以保证每次请求都有不同的请求参数。处理编码乱码在Java中在.jsp文件中处理的，不需要在.html中另加处理。详细例子见文件夹022.3 encoding2.3.5 发送XML请求如果请求参数特别多，而且请求参数的结构关系复杂，则可以考虑发送XML请求。XML请求实质还是POST请求，只是在发送请求的客户端页面将请求参数封装成XML字符串的形式，服务器端则负责解析该XML。注意：在生成XML字符串时，为了避免系统对斜线/进行特殊处理，使用了转义，即在斜 线前增加反斜线详细例子见文件夹022.3 xmlRequest2.4 处理服务器响应完整的异步通信包括：发送请求、与服务器交互、获取服务器响应三个步骤。当服务器获得客户端请求参数后，开始处理（调用后台服务器端代码函数）；服务器处理结束并生成响应后（服务器端方法返回处理结果），客户端必须获得服务器响应（获取XMLHttpRequest对象的responseTest属性值或responseXML属性值），并对服务器响应进行处理，将响应动态加载在当前页面上（DOM操作）。2.4.1 处理的时机XMLHttpRequest对象的readyState属性可动态监控服务器的响应，当readyState=4时，表示服务器响应完成。如果服务器响应正常，则状态码为200，如果没发送请求，而是直接从浏览器缓存读取响应（如何读取？），则状态码为304。因此，当readyState=4,且status=200或304时，客户端就可以开始处理服务器响应了。2.4.2 使用文本响应获取服务器响应主要借助于HMLHttpRequest对象的如下两个属性： responseText：生成普通文本响应。 responseXML：生成XML响应。使用文本响应适用于响应简单的字符串情形（服务端返回值较简单）。2.4.3 使用JSON响应如果服务器需要生成特别复杂的响应，则可采用生成XML响应。但是与JSON格式的响应相比，XML响应有如下缺点： 同样的数据，转化为XML格式比转化为JSON格式的数据量更大。 使用XML响应必须在服务端生成符合XML格式的字符串，编程复杂。 浏览器获取XML响应后，需要使用DOM解析XML响应，编程复杂。故当服务器响应数据量较大，而且响应数据有复杂的结构关系时，使用JSON响应是很好的选择。详细例子见文件夹022.4 jsonResponseAjax技术的整个过程如下：XMLHttpRequest发送请求（send()方法），在与服务器交互过程中，其readyState状态可以监听到服务器的响应状态（readyState=4）；当服务器响应完成时，XMLHttpRequest负责解析服务器响应（responseText的属性值）；获取到响应后，解析出响应的数据，通过DOM操作来加载服务器响应。2.5 XMLHttpRequest 对象的运行周期整个Ajax技术紧紧围绕在XMLHttpRequest对象周围，了解XMLHttpRequest对象的运行周期，就是了解了Ajax应用的运行。1. Ajax应用总是从创建XMLHttpRequest对象开始，然后使用它来发送请求。2. XMLHttpRequest发送完之后，当其状态改变时，将触发其onreadystatechange事件，并执行onreadystatechange事件指定的事件处理函数（回调函数）。3. 当XMLHttpRequest对象的状态readyState改变，且值为4时，表示服务器响应完成，此时可以开始处理服务器响应。4. 通过JavaScript的事件机制，使用事件处理函数监听XMLHttpRequest状态的改变，当其readyState=4且status=200时，表示服务器正常响应，事件处理函数处理服务器响应。5. 进入事件处理函数后，通过XMLHttpRequest的responseText属性或responseXML属性获取服务器的响应。至此，XMLHttpRequest对象的运行周期结束。6. JavaScript通过DOM操作将服务器响应动态地加载到HTML页面中。2.6 Ajax必须解决的问题2.6.1 跨浏览器问题在创建XMLHttpRequest对象时，必须尽量考虑到目前已经存在的各种浏览器，采用更通用的代码来创建XMLHttpRequest对象。2.6.2 安全问题 JavaScript本身的安全性。 数据在网络上传输的安全性。 客户端调用远程服务的安全性。2.6.3 性能问题 关于JavaScript的循环。JavaScript提供三种循环：for(;)、while()、for(in)。其中for(in)的效率最差，for(;)和while()循环性能基本持平，但推荐使用for循环，如果循环变量递增或递减，不要单独对循环变量赋值，应该采用嵌套的+或-运算。 如果需要遍历数组，应该先缓存数组长度，将数组长度放入局部变量中，避免多次查询数组长度。 局部变量的房屋速度要比全局变量的访问速度更快，因为全局变量其实是window对象的成员，而局部变量是放在函数的堆栈里的。 尽量少使用eval，每次使用eval需要消耗大量时间，这时候使用JavaScript所支持的闭包可以实现函数模板。？ 尽量避免对象的嵌套查询。对于obj1.obj2.obj3.obj4这个语句，需要进行至少3次查询操作：先检查obj1中是否包含obj2，再检查obj2中是否包含obj3，然后检查obj3中是否包含obj4.这不是一个好策略，应该尽量利用局部变量，将obj4以局部变量保存，从而避免嵌套查询。 使用运算符时，尽量使用+=、-=、*=、=运算符，而不要直接进行赋值运算。 当需要将数字转换成字符时，采用如下方式：+1。从性能上来看，将数字转换成字符时，有如下公式：(+)String().toString()new String()。String()属于内部函数，所以速度很快；.toString()要查询原型中的函数，所以速度逊色一些；new String()需要重新创建一个字符串对象，速度最慢。 当需要将浮点数转换成整型时，应该使用Math.floor()或者Math.round()，而不是使用paresInt()该方法用于将字符串转换成数字。而且Math是内部对象，所以Math.floor()其实并没有多少查询方法和调用时间，速度是最快的。 尽量使用JSON格式来创建对象，而不是var obj = new Object()方法。因为前者是直接复制，而后者需要条用构造器，因而前者性能更好。 当需要使