JS基本部分3

21.XMLHttpRequest对象详解

XMLHttpRequest包含了一些基本的属性和方法，XMLHttpRequest正是通过这些属性和方法与服务器通信的。Ajax则依赖于XMLHttpRequest来完成与服务器的通信。

XMLHttpRequest的方法：

abort()：停止发送当前请求

getAllResponseHeaders()：获取服务器返回的全部响应头

getResponseHeader()：根据响应头的名字，获取对应的响应头

open("method","URL","asyncFlag")：建立与服务器URL的连接，并设置请求的方法，以及是否使用异步请求

XMLHttpRequest的属性：

onreadystatechange：该属性用于指定XMLHttpRequest对象状态改变时的事件处理函数

readyState：XMLHttpRequest对象的处理状态

responseText：获取服务器的相应文本

responseXML：获取服务器的XML文档对象

status：该属性是服务器的返回的状态码，只有当服务器的相应已经完成时，才会有该状态码

statusText：是服务器返回的状态文本信息，只有当服务器的相应已经完成时，才会有该状态文本信息

 

XMLHttpRequest对象的几种状态：

0：XMLHttpRequest对象还没有完成初始化

1：XMLHttpRequest对象开始发送请求

2：XMLHttpRequest对象的请求发送完成

3：XMLHttpRequest对象开始读取服务器的响应

4：XMLHttpRequest对象读取服务器响应结束

 

服务器常用的状态码及其对应的含义：

200：服务器相应正常

400：无法找到请求的资源

404：需要访问的资源不存在

500：服务器内部错误

 

//判断处理服务器响应的时机是否成熟，响应完成且响应正常

if(xmlrequest.readyState == 4){

       if(xmlrequest.status == 200){

             //信息已经成功返回，开始处理信息   

       }else{

             //页面不正常信息

       }

}

 

22.Ajax必须解决的问题

跨浏览器问题

安全性问题：通常建议JavaScript只能读取和修改同源文档的属性，这种策略称为同源策略(Same Origin Policy，简称SOP)

性能问题：

for(;;)，while()，for(in)：for(in)效率最差，因为它需要查询Hash键

如果需要遍历数组，应该先缓存数组长度

尽量少用eval

尽量使用+=、-=、*=、\=

当需要将数字转换成字符时，采用如下方式：""+1

当需要将浮点数转换成整形时，应该使用Math.floor()或者Math.round()，而不是使用parseInt

尽量使用JSON格式来创建对象

当使用数组时，也尽量使用JSON格式的语法

对字符串进行循环操作，例如替换、查找，应使用正则表达式

最后一个基本的原则，对于大的JavaScript对象，因为创建时时间和空间的开销都比较大，因此应该尽量考虑采用缓存，考虑使用池的技术管理。

 

xmlrequestPool.js

//使用literal语法定义一个对象XMLHttp

var XMLHttp =

{

      //定义第一个属性，该属性用于缓存XMLHttpRequest对象的数组

      XMLHttpRequestPool:[],

      //对象的第一个方法，该方法用于返回一个XMLHttpRequest对象

      getInstance:function()

      {

              //从XMLHttpRequest的对象池中取出一个闲置的对象

              for(var i = 0; i < this.XMLHttpRequestPool.length; i++)

             {

                    //readyState为0或者为4，都表示当前的XMLHttpRequest对象为闲置的对象

                    if(this.XMLHttpRequestPool[i].readyState==0||this.XMLHttpRequestPool[i].readyState==4)

                    {

                           return this.XMLHttpRequestPool[i];

                    }

             }

             //如果没有空闲的，将再次创建一个新的XMLHttpRequest对象

             this.XMLHttpRequestPool[this.XMLHttpRequestPool.length] = this.createXMLHttpRequest();

             //返回刚刚创建的XMLHttpRequest对象

             return this.XMLHttpRequestPool[this.XMLHttpRequestPool.length-1]; 

      },

      //创建新的XMLHttpRequest对象

      createXMLHttpRequest:function()

      {

             //DOM2浏览器

             var objXMLHttp = new XMLHttpRequest();

             //IE浏览器

             var objXMLHttp = new ActiveXObject('xxx');

             return objXMLHttp;

      },

      //定义对象的第三个方法：发送请求(发送[POST,GET]，地址，数据，回调函数)

      sendRequest:function(method,url,data,callback)

      {

             var objXMLHttp = this.getInstance();

             with(objXMLHttp)

             {

                    try{

                          //增加一个额外的random请求参数，用于防止IE缓存服务器相应

                          if(url.indexOf("?")>0)

                          {

                                 url += "&random=" + Math.random();

                          }else

                          {

                                 url += "?random=" + Math.random();

                          }

                          //打开与服务器的连接

                          open(method,url,true);

                          //对于使用POST请求方式

                          if(method == "POST")

                          {

                                 //设定请求头

                                 setRequestHeader('Content-Type','application/x-www-form-urlencoded');

                                 send(data);

                          }

                          //对于采用GET请求

                          if(method == "GET")

                          {

                                 send(null);

                          }

                          //设置状态改变的回调函数

                          onreadystatechange = function()

                          {

                                  //当服务器的响应完成时，以及获得了正常的服务器响应

                                  if(objXMLHttp.readyState == 4 && objXMLHttp.status == 200)

                                  {

                                          callback(objXMLHttp);

                                  }

                          }

 

                    }catch(e){alert(e);}

             }

      }

};