• 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.onload=function(event){

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

               alert(xhr.responseText);

         }else{

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

         }

    };

    xhr.onprogress=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

  • 相关阅读:
    身份证相关类
    微信开发相关文档
    password、文件MD5加密,passwordsha256、sha384、sha512Hex等加密
    图的割点(边表集实现)
    动态库DLL中类的使用
    吴恩达机器学习笔记_第三周
    Android官方开发文档Training系列课程中文版:性能优化建议
    简单算法汇总
    Gson解析第三方提供Json数据(天气预报,新闻等)
    Java字节码 小结
  • 原文地址:https://www.cnblogs.com/zhanghuiyun/p/5161626.html
Copyright © 2020-2023  润新知