js-Ajax与Comet

Ajax与Comet：

1、Ajax技术的核心是XHR(XMLHTTPRequest对象)

创建xhr对象：

function createXHR(){

      if(typeof XMLHttpRequest != "undefined"){

           return new XMLHttpRequest();

      }else if(typeof ActiveXObject !="undefined"){

           if(typeof arguments.callee.activeXString !="string"){

                 var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],

          i,len;

              for(i=0,len=versions.length;i<len;i++){

                    try{

                  new ActiveXObject(versions[i]);

                  arguments.callee.activeXString=versions[i];

                  break;

                    }catch(ex){

                         //跳过

                    }

              }

           }

           return new ActiveXObject(arguments.callee.activeXString);

      }else{

           throw new Error("No XHR object available.");

      }

}

2、使用XHR对象：open（），send（）

1)     open（）方法，接收3个参数，要发送的请求类型，请求的URL，表示是否异步发送请求的布尔值

xhr.open("get”,”example.php”,false);

调用open（）方法并不会真正发送请求，而只是启动一个请求以备发送

2)     发送特定的请求，必须像下面这样调用send()方法：

xhr.open("get”,”example.php”,false);

xhr.send（null）；

send（）方法接收一个参数，即要作为请求主体发送的数据，如果不需要通过请求主体发送数据，就必须传入null，这个参数对于有些浏览器来说是必须的，调用send()方法之后，请求就会被分派到服务器

3)     请求同步的时候，js代码会等到服务器响应之后再继续执行，收到响应后，响应的数据会自动填充XHR对象的属性

responseText：作为响应主体被返回的文本

responseXML：如果响应的内容类型是“text/xml“或”application/xml”，该属性中将保存包含着响应数据的XML DOM文档

status：响应的HTTP状态

statusText：HTTP状态的说明

收到响应后，第一步先检查status属性，以确定响应已经成功返回，

if((xhr.status>=200 && xhr.status<300) || xhr.status==304){

//将http状态代码为200作为成功的标记

//状态代码为304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本

alert(xhr.responseText);

}else{

alert("Request was unsucessful："+ xhr.status);

}

4)     发送异步请求，检测XHR对象的readyState属性，表示请求/响应过程的当前活动阶段

属性可取的值：

0：未初始化，尚未调用open（）方法

1：启动，已经调用open（）方法，但尚未调用send（）方法

2：发送，已经调用send（）方法，但尚未接收到响应

3：接收，已经接收到部分响应数据

4：完成，已经接收到全部响应数据，而且已经在客服端使用了

必须在调用open（）方法之前指定onreadystatechange事件处理程序才能够确保跨浏览器兼容性

var xhr=createXHR();

xhr.onreadystatechange=function(){

if(xhr.readyState==4){

     if((xhr.status>=200 && xhr.status<300) || xhr.status==304){

              alert(xhr.responseText);

        }else{

              alert("Request was unsucessful："+ xhr.status);

        }

     }

};

xhr.open("get","example.js",true);

xhr.send(null);

5)     调用xhr.abort（）方法，XHR对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性

3、HTTP头部信息：每个HTTP请求和响应都会带有相应的头部信息，XHR对象提供了操作这两种头部（请求头部以及响应头部）信息的方法

1)     默认情况下，发送XHR请求的同时，还会发送下列头部信息：

Accept：浏览器能够处理的内容类型

Accept-Charset：浏览器能够显示的字符集

Accept-Encoding：浏览器能够处理的压缩编码

Accept-Language：浏览器当前设置的语言

Connection：浏览器与服务器之间连接的类型

Cookie：当前页面设置的任何Cookie

Host：发出请求的页面所在的域

Referer：发出请求的页面的URI

User-Agent：浏览器的用户代理字符串

2)     使用setRequestHeader（）方法可以设置自定义的请求头部信息，接收2个参数：头部字段的名称，头部字段的值，方法放置在open（）之后，send（）之前

3)     getRequestHeader（）方法取得相应的响应头部信息，getAllResponseHeaders（）方法可以取得包含所有头部信息的长字符串

var myHeader=xhr.getResponseHeader("MyHeader");

var allHeader=xhr.getAllResponseHeader();

4、查询字符串中的每个参数的名称以及值都需要使用encodeURIComponent进行编码，然后才放到URI的末尾，并且所有的名值对都必须由&分开

xhr.open("get","example.php?name1=value1&name2=value2",true);

 

function addURLParam(url,name,value){

  url+=(url.indexOf("?")==-1 ? "?" : "&");

  url+=encodeURIComponent(name)+ "=" +encodeURIComponent(value);

  return url;

}

5、post：

var xhr=createXHR();

xhr.onreadystatechange=function(){

      if(xhr.readyState==4){

           if((xhr.status>=200 && xhr.status<300) || xhr.status==304){

               alert(xhr.responseText);

        }else{

               alert("Request was unsucessful："+ xhr.status);

        }

      }

};

xhr.open("get","example.js",true);

xhr.setRequestHander("Content-Type","application/x-www-form-urlencoded");

var form=document.getElementById("user-info");

xhr.send(serialize(form));

6、FormData

var data=new FormData();

data.append("name","zhang");

 

//传入表单元素

var data=new FormData(document.forms[0]);

//直接传给send

xhr.open("get","example.js",true);

var form=document.getElementById("user-info");

xhr.send(new FormData(form));

7、超时设置：

xhr.open("get","example.js",true);

xhr.timeout=1000;   //仅适用于ie8+

xhr.ontimeout=function(){

      alert("ddddddddd");

}

xhr.send(null);

8、overrideMimeType（）方法可以保证将响应当做Xml而非纯文本来显示

overrideMimeType("text/xml")

9、进度事件：

1)     针对xhr操作：

loadstart：子啊接收到响应的第一个字节时触发

progress：在接收响应期间不断触发

error：在请求发生错误的时候触发

abort：在因为调用abort（）方法而终止连接时触发----用于停止正在进行的请求

load：在接收到完整的响应数据时触发

loaded：在通信完成或者触发error，abort，load事件后触发

2)     必须在open之前添加onprogress事件处理程序

var xhr=createXHR();

xhr.οnlοad=function(event){

     if(((xhr.status>=200 && xhr.status<300) || xhr.status==304){

           alert(xhr.responseText);

     }else{

           alert("Request was unsucessful："+ xhr.status);

     }

};

xhr.οnprοgress=function(event){

     var divStatus=document.getElementById("status");

     if(event.lengthComputable){

     divStatus.innerHTML="Received"+event.position+"of"+event.totalSize+"bytes";

     }

     //event.lengthComputable表示进度信息是否可用布尔值

     //event.position表示已经接收的字节数

     //event.totalSize根据Content-Length响应头部确定的预期字节数

};

xhr.open("get","example.js",true);

xhr.send(null);

10、将withCredentials属性设置为true，可以指定某个请求应该发送请求

11、跨浏览器的CORS

 

转载于:https://www.cnblogs.com/zhanghuiyun/p/5161626.html