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);

??????????????????