zoukankan      html  css  js  c++  java
  • 21. javacript高级程序设计-Ajax与Comet

    1. Ajax与Comet

    1.1 XMLHttpRequest对象

    IE5是第一款引入XHR对象的浏览器,IE5中是通过MSXML库中的一个ActiveX对象实现的。因此在IE中可能存在MSXML2.XMLHttp, MSXML2.XMLHttp.3.0, MSXML2.XMLHttp.6.0,要支持旧浏览器,可以使用如下函数:

    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;

                               }cath(ex){

                               }

                        }

                 }

                 return new ActiveXObject(arguments.callee.activeXString);

          }else{

                 throw new Error('NO XHR object.');

          }

    }

    1.2 XHR用法

    使用XHR对象,第一个方法是open(),第一个参数表示方法,第二个参数表示请求地址,第三个参数表示是否异步传递数据。

    第二步调用send()方法,

    第三部根据 返回状态判断执行对应方法

    (1). 等到服务器响应后,响应数据会自动填充XHR对象的属性。

    l responseText:作为响应主体返回的数据

    l responseXML:响应内容是XML DOM文档数据,内容类型是“text/xml”或者“application/xml”

    l status:响应的状态

    l statusText:响应的状态说明

    (2). 针对异步请求,可以检测XHR对象的readyState属性,

    l 0:未初始化

    l 1:启动

    l 2:发送

    l 3:接收

    l 4:完成

     

    var xhr = createXHR();

    xhr.onreadystatechange = function(){ //必须在open方法前指定

      if(xhr.readystate == 4){

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

    alert(xhr.responseText);

    }else{

    alert(‘error’);

    }

    }

    }

    xhr.open(‘get’,’ex.php’,true);

    xhr.send(null);

    1.3 GET请求

    var xhr = createXHR();

    xhr.onreadystatechange = function(){ //必须在open方法前指定

      if(xhr.readystate == 4){

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

    alert(xhr.responseText);

    }else{

    alert(‘error’);

    }

    }

    }

    xhr.open(‘get’,’ex.php?uid=xx’,true); //URL地之后传递参数

    xhr.send(null);

    1.4 POST请求

    var xhr = createXHR();

    xhr.onreadystatechange = function() { //必须在open方法前指定

          if (xhr.readystate == 4) {

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

                        alert(xhr.responseText);

                 } else {

                        alert(‘error’);

                 }

          }

    }

    xhr.open(‘post’, ’ex.php’, true);

    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //发送前指定传输类型

    xhr.send(form.data);//参数在send是传输

    1.5 跨资源请求

    IE8通过XDomainRequest对象支持CORS,其他浏览器通过XHR对象原生支持CORS,图像Ping和JSONP是另外两种跨浏览器通信技术。

  • 相关阅读:
    学习笔记之pandas
    学习笔记之Nearest-Neighbour Searching with PostGIS
    学习笔记之Gurobi
    python基础之装饰器
    python作业
    python的位置参数、默认参数、关键字参数、可变参数区别
    python文件处理
    python基础之文件处理
    python基础之条件和循环
    python基础之函数
  • 原文地址:https://www.cnblogs.com/SLchuck/p/4509924.html
Copyright © 2011-2022 走看看