ajax和comet
阅读原文时间:2023年07月09日阅读:1

一,XMLHttpRequest对象
  IE5是最早引入XHR对象的浏览器,XHR对象是通过MSXML库中的一个ActiveX对象实现的
  使用MSXML库中的XHR对象,编写一个函数如下

  function ceateXHR(){
    if(typeof argument.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(argument.callee.activeXString);
  }

  IE7+,Firefox,Opera,CHrome和safari中支持原生XHR对象,
  var xhr = new XMLHttpRequest();
  为了兼容以上所有,使用下列函数

  function createXHR(){
    if(typeof XMLHttpRequest != "undefined"){
      return new XMLHttpRequest();
    }else if(typeof ActiveXobject != "undefined"){
      if(typeof argument.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]);
            argument.callee.activeXString = versions[i];
            break;
          }catch(ex){
            //跳过
          }
        }  
      }
      return new ActiveXObject(argument.callee.activeXString);
    }else{
      throw new Error("No XHR object available");
    }
  }

  创建对象,var xhr = createXHR();
1,XHR的用法
  open(请求的类型(get或post),请求的URL,是否异步发送的布尔值),
  要点:URL相对于执行代码的当前页面(可以使用绝对路径),open方法不会真的发送请求只是启动一个请求以备发送
  send(作为请求主体发送的数据),发送特定的请求,可以传人null,调用函数后请求会被派送到服务器
  如果请求时同步的,js代码会等到服务器响应之后执行,响应的数据会自动填充XHR对象的属性
    responseText:作为响应主体被返回的文本
    responseXML:如果响应的内容类型是text/xml,application/xml,这个属性会保存包含响应数据的XML DOM文档
    status:响应的http状态
    statusText:http状态的说明
  响应后,首先检查status属性,http状态200表示成功,此时responseText属性的内容就绪,内容类型正确的同时,responseXML也可以访问了
  状态304表示请求的资源没有被修改,可以直接使用浏览器中缓存的版本,
  xhr.open("get","example.text",false);
  xhr.send(null);
  if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304){
    alert(xhr.responseText);
  }else{
    alert("Request was unsuccessful:" + xhr.status);
  }
  一般情况下使用异步请求,此时js会继续执行不必等待服务器的响应,此时检测XHR的readyState属性,属性值如下
  0:未初始化,尚未调用open方法
  1:启动,调用了open方法,未调用send方法
  2,发送,调用了send方法,未接受到响应
  3,接收,接收到部分响应数据
  4,完成,接收到全部的响应数据,而且在客户端使用了
  只要readyState属性的值发生变化就会触发readystatechange事件,可以利用这个事件检测每次状态后的readyState的值
  必须在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 unsuccessful:" + xhr.status);
      }
    }
  };
  xhr.open("get","example",true);
  xhr.send(null);

  响应之前调用xhr.abort(),可以取消异步请求,由于内存原因,不建议重用XHR对象
2,HTTP头部信息
  每个http请求和响应都会带有相应的头部信息,XHR对象也提供了操作这两种头部信息的方式
  发送XHR请求的同时,会发送下列头部信息
    Accept:浏览器能够处理的内容类型
    Accept-Charset:浏览器能够显示的字符集
    Accept-Encoding:浏览器能够处理的压缩编码
    Accept-Language:浏览器当前设置的语言
    Connection:浏览器与服务器之间连接的类型
    Cookie:当前页面设置的任何cookie
    Host:发送请求的页面所在的域
    Referer:发送请求的页面的URL
    User-Agent:浏览器的用户代理字符串
    setRequestHeader(头部字段的名称,头部字段的值)方法可以自定义设置头部信息,在open和send方法之前调用此方法

    var xhr = createXHR();
    xhr.onreadystatechange = function(){
      if(xhr.readyState == 4){
        if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304){
          alert(xhr.reponseText);
        }else{
          alert("Request was unsuccessful :" + xhr.status);
        }
      }
    };
    xhr.open("get","example.php",true);
    xhr.setRequestHeader("MyHeader","MyValue");
    xhr.send(null);

  调用XHR对象的getResponseHeader()方法,传人头部字段名称,可以返回相应的响应头部信息
  getAllResponseHeaders()方法,取得一个包含所有头部信息的长字符串
  var myheader = xhr.getResponseHeader("myHeader");
  var allheader = xhr.getAllResponseHeader();
  服务器端,可以利用头部信息向浏览器发送额外的,结构化的数据,没有自定义的情况下,getAllResponseHeader()方法会返回如下
    Date:sun,14 Nov 2004 18:04:03 GMT
    Server: Apache/1.3.29(Unix)
    Vary:Accept
    X-Powered-By:PHP/4.3.8
    Connection:close
    Content-Type:text/html;charset=iso-8859-1
3,GET请求
  用于向服务器查询某些信息,可以将查询字符串追加到URL末尾,
  查询字符串,每个参数的名称和值使用encodeURIComponent()进行编码,而且所有名值对使用&分隔
  xhr.open("get","example.php?name1=value&name2=value2",true);
  使用下面函数向现有的URL末尾添加查询字符串参数
  function addURLParam(url,name,value){
    url += (url.indexof("?") == -1 ? "?" : &);
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
  }
  使用下面函数来构建请求URL示例
  var url = "example.php";
  url = addURLParam(url,"name","Nicholas");
  xhr.open("get",url,true);
4,POST请求
  用于向服务器发送应该被保存的数据,
  post请求将数据作为请求的主体提交,请求的主体可以包含非常多的数据,格式不限
  发送post请求,要向send()方法中传人某些数据,可以是XML DOM文档,可以使字符串
  XHR模仿表单提交,首先将Content-type头部信息设置为application/x-www-form-urlencoded,然后以适当的格式创建一个字符串,可以使用serialize()     函数来创建字符串
  function submitData(){
    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 unsuccessful:" + xhr.status);         }       }     };   xhr.open("post","postexample.php",true);   xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");   var form = document.getElementById("user-info");   xhr.send(serialize(form));   }   php文件通过$_POST取得提交的数据     
  如果不设置Content-type头部信息,那么发送给服务器的数据不会出现在$_POST超级全局变量中,
  要访问同样的数据,使用$HTTP_RAW_POST_DATA
二,XMLHttpRequest2级
1,FormData
  为了实现表单数据的序列化,FormData类型为序列化表单以及创建与表单格式相同的数据
  var data = new FormData();
  data.append("name","Nicholas");
  append()方法接收两个参数,键值对,
  通过向FormData构造函数中传人表单元素,可以用表单元素的数据预先向其中填入键值对
  var data = new FormData(document.forms[0]);
  创建了FormData实例,直接传给XHR的send()方法

  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 unsuccessful :" + xhr.status);
      }    
    }
  };
  xhr.open("post","postexample.php",true);
  var form = document.getElementById("user-info");
  xhr.send(new FormData(form));

  XHR对象能够识别传人的数据类型是FormData的实例,并配置适当的头部信息
2,超时设定
  XHR对象的timeout属性,表示请求在等待响应多少时间之后就终止,给timeout属性设置一个值,在超过了这个值后,
  就会调用ontimeout事件处理程序

  var xhr = createXHR();
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      try{
        if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304){
          alert(xhr.responseText);
        }else{
          alert("Request was unsuccessful:" + xhr.status);
        }
      }catch(ex){
        //假设由ontimeout事件处理程序处理
      }
    }
  };
  xhr.open("get","timeout.php",true);
  xhr.timoeout = 1000;
  xhr.ontimeout = function(){
    alert("Request did not return in a second.");
  };
  xhr.send(null);

3,overrideMimeType()方法
  Firefox最早引入了overrideMimeType()方法,用于重写XHR响应的MIME类型,可以把响应当做XML而非纯文本来处理
  var xhr = createXHR();
  xhr.open("get","text.php",true);
  xhr.overrideMimeType("text/XML");
  xhr.send(null);
三,进度事件
  Progress Events规范定义了与客户端服务器通信有关的事件
  loadstart:在接收到响应数据的第一个字节时触发
  progress:在接收响应期间持续不断的触发
  error:在请求发生错误时触发
  abort:因为调用abort()方法而终止连接时触发
  load:在接收到完整的响应数据时触发
  loadend:在通信完成,或者触发了error,abort,load事件后触发(尚未被任何浏览器支持)
1,load事件
  firefox引入了load事件,用于替代readystatechange事件
  响应接收完毕后触发load事件,没有必要去检测readyState属性了,
  onload会接收到event对象,target属性就指向XHR对象,可以访问到XHR对象的所有方法和属性
  对于不支持的浏览器

  var xhr = createXHR();
  xhr.onload = function(){
    if((xhr.status >=200 && xhr.status <= 300) || xhr.status == 304){
      alert(xhr.responseText);
    }else{
      alert("Request was unsuccessful:" + xhr.status);
    }
  };
  xhr.open("get","alertEvents.php",true);
  xhr.send(null);

2,progress事件
事件在浏览器接收数据期间周期性触发,
onprogress事件处理程序会接收到一个evnet对象,其target属性是XHR对象
包含额外的三个属性:lengthComputable(进度信息是否可用的布尔值),position(已经接收的字符数),totalSize(根据Content-Length响应头部确定的预期字节数)

var xhr = createXHR();
xhr.onload = function(){
  if((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304){
    alert(xhr.responsText);
  }else{
    alert("Request was unsuccessful" + xhr.status);
  }
};
xhr.onprogress = function(event){
  var divStatus = document.getElementById("status");
  if(event.lengthComputable){
    divStatus.innerHTML = "Recevied " + event.position + "Of" + event.totalSize + "bytes";
  }
};
xhr.open("get","alertEvent.php",true);
xhr.send(null);

四,跨源资源共享(CORS)
  思想是使用自定义的http头部,让浏览器与服务器进行沟通,从而决定请求或响应的成功与否
  请求的origin头部,包含请求页面的源信息(协议,域名,端口),
  如果服务器认为是可接受的,在Origin-Control-Allow-Origin头部中回发相同的源信息,如果是公共资源,可以回发*
1,IE对CORS的实现
  IE8引入XDR类型,类似XHR对象,但能实现安全可靠的跨域通信,区别如下
  cookie不会随请求发送,也不会随响应返回
  只能设置请求头部信息中的Content-type字段
  不能访问响应头部信息
  只支持GET和POST请求
  XDR使用方法,创建一个XDomainRequest的实例,调用open()方法,再调用send()方法,
  open()方法只接收两个参数,请求类型的UR,XDR请求都是异步的,
  请求返回之后会触发load事件,响应的数据保存在responseText属性中
  var xdr = new XDomainRequest();
  xdr.onload = function(){
    alert(xdr.responseText);
  };
  xdr.open("get","http://www.somewhere-else.com/page/");
  xdr.send(null);
  接收到响应后,只能访问响应的原始文本,没有办法确定响应的状态代码,只要响应有效就会会触发load事件,
  失败就会触发error事件,遗憾的是,除了错误本身外,没有其他信息可用,因此唯一能够确定的就是请求未成功,
  检测错误可以指定一个onerror事件处理程序
  var xdr = new XDomainRequest();
  xdr.onload = function(){alert(xdr.responseText)};
  xdr.onerror = function(){alert("An error occurred.")};
  xdr.open("get","http://www.somewhere-else.com/page/");
  xdr.send(null);
  返回请求前调用abrot()方法会终止请求
  同样支持timeout属性和ontimeout事件
  var xdr = new XDomainRequest();
  xdr.onload = function(){alert(xdr.responseText);};
  xdr.onerror = function(){alert("An Error Occurred");};
  xdr.timeout = 1000;
  xdr.ontimeout = function(){alert("Request took too long.");};
  xdr.open("get","http://www.somewhere-else.com/page/");
  xdr.send(null);
  为了支持POST请求,XDR对象提供了contenType属性,用来表示发送数据的格式
  var xdr = new XDomainRequest();
  xdr.onload = function(){};
  xdr.onerror = function(){};
  xdr.open("post","http://www.somewhere-else.com/page/");
  xdr.contentType = "application/x-www-form-urlencoded";
  xdr.send("name1=value1&name2=value2");
2,其他浏览器对CORS的实现
  通过XMLHttpRequest对象实现对CORS的原生支持,请求另一个域中的资源,使用标准的XHR对象并在open方法中传人绝对的URL

  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 unsuccessful:" + xhr.status);
      }
    }
  };
  xhr.open("get","htt://www.somewhere-else.com/page/",true);
  xhr.send(null);

  跨域XHR对象有限制,
  不能使用setRequestHeader()设置自定义头部
  不能发送和接受cookie
  调用getAllResponseHeader()方法总会返回空字符串
3,Preflighted Request
  透明服务器验证机制支持开发人员使用自定义的头部,
  使用下列高级选项来发送请求时,就会向服务器发送一个Preflight请求,使用OPTIONS方法,发送下列头部
    Origin:与简单的请求相同
    Access-Control-Request-Method:请求自身使用的方法
    Access-Control-Request-Header:自定义的头部信息,多个头部用逗号分隔
    Origin:http://www.nczonline.net
    Access-Control-Request-Method:POST
    Access-Control-Request-Header:NCZ
  发送这个请求后,服务器可以决定是否允许这种类型的请求,服务器通过在响应中发送如下头部与浏览器进行沟通
    Access-Control-Allow-Origin:与简单请求相同
    Access-Control-Allow-Method:允许的方法,多个方法以逗号分隔
    Access-Control-Allow-Header:允许的头部,多个头部以逗号分隔
    Access-Control-Max-Age:应该将这个Prefight请求缓存多长时间(秒)
    Access-Control-Allow-Origin:http://www.nczonline.net
    Access-Control-Allow-Method:POST,GET
    Access-COntrol-Allow-Header:NZC
    Access-Control-Max-Age:1728000
  第一次发送这种请求时会多一个http请求
4,带凭据的请求
  默认情况下跨源请求不会提供凭据(cookie,HTTP认证,客户端SSL证明)
  通过将withCredentials属性设置为true,可以指定某个请求应该发送凭据
  如果服务器端接收带凭据的请求,会使用Access-Control-Allow-Credentials:true来响应
  如果服务器的响应中没有这个头部,浏览器就不会把响应交给javascript,responseText中将是空字符串status的值为0,调用onerror事件处理程序
5,跨浏览器的CORS

  function createCORSRequest(method,url){
    var xhr = new XMLHttpRequest();
    if("withCredentials" in xhr){
      xhr.open(method,url,true);
    }else if(typeof XDomainRequest != "undefined"){
      vxhr = new XDomainRequest();
      xhr.open(method,url);
    }else{
      xhr = null;
    }
    return xhr;
  }
  var request = createCORSRequest("get","http://www.somewhere-else.com/page/");
  if(request){
    request.onload = function(){
    //
  };
  request.send();
  }

  firefox,safari,chrome中的XMLHttpRequest对象和IE中XDomainRequest对象类似,共有属性方法如下
  abort(),用于停止正在进行的请求
  onerror(),用于替代onreadystatechange()检测错误
  onload(),用于替代onreadystatechange()检测成功
  responseText(),用于取得响应内容
  send(),用于发送请求
五,其他跨域技术
1,图像Ping
  使用img标签,动态的创建图像,使用onload和onerror事件处理程序来确定是否接收到了响应
  图形Ping是与服务器进行简单,单向,的跨域通信的一种方式
  请求的数据通过查询字符串形式发送的,响应的是任意内容,通常是像素图或204响应
  var img = new Image();
  img.onload = img.onerror = function(){};
  img.src = "http://www.example.com/test?name=Nicholas";
  请求从设置src属性那一刻开始,请求中发送了name参数
  图像Ping用于跟踪用户点击页面或动态广告曝光次数,
  两个缺点,只能发送get请求,无法访问服务器的响应文本,只能单向通信
2,JSONP
  被包含在函数调用中的JSON,
  callback({"name":"Nicholas"});
  JSONP包含两部分,回调函数和数据,回调函数是当响应到来时应该在页面中调用的函数,函数名一般在请求中指定
  数据就是传人回调函数中的JSON数据,例如:http://freegeoip.net/json/?callback=handleResponse,指定的函数名为handleResponse()
  JSONP是通过动态script元素使用的,使用时可以为src属性指定一个跨域URL
  function handleResponse(response){
    alert("you're at IP address" + resopnse.ip + ",which is in" + response.city + "," + response.region_name);
  }
  var script = document.createElement(script);
  script.src="http://freegeoip.net/json/?callback=handleResponse";
  document.body.insertBefore(script,document.body.firstChild);
  可以直接访问响应文本,支持在浏览器与服务器之间双向通信,但不能保证安全,确定JSONP请求是否失败不是很容易
  html5给script提供onerror事件处理程序,尚未得到任何任何浏览器支持,为此常通过设置计时器检测指定时间内是否收到了响应
3,Comet
  Ajax是一种从页面向服务器请求数据的技术,Comet是一种服务器向页面推送数据的技术
  Comet能够让信息近乎实时的被推送到页面上,非常适合处理体育比赛的分数和股票报价
  两种实现Comet的方式:长轮询和流
    长轮询:页面发起一个到服务器的请求,然后服务器一直保持连接打开,直到有数据可发送,
    发送完数据之后,浏览器关闭连接,随即又发起一个到服务器的新请求,这一过程在页面打开期间持续不断
    长轮询是服务器等待发送响应后发送数据
  HTTP流:浏览器向服务器发送一个请求,服务器保持连接打开,然后周期性向浏览器发送数据
  DOM浏览器中,通过监听readystatechange事件及检测readyState的值是否为3,利用XHR对象实现流

  function createStreamingClient(url,progress,finished){
    var xhr = new XMLHttpRequest(),received = 0;
    xhr.open("get",url,true);
    xhr.onreadystatechange = function(){
      var result;
      if(xhr.readyState == 3){
        //只取得最新数据并整理计数器
        result = xhr.responseText.substring(received);
        received += result.length;
        //调用progress回调函数
        progress(result);
      }else if(xhr.readyState == 4){
        finished(xhr.responseText);
      }
    };
    xhr.send(null);
    return xhr;
  }
  var client = createStreamingClient("streaming.php",function(data){
    alert("Received:" + data);},function(data){
    alert("Done!");
  });

4,服务器发送事件
1)SSE API
  创建到服务器的单向连接,服务器通过这个连接可以发送任意数量的数据,
  服务器响应的MIME类型必须是text/event-stream,支持长短轮询,和http流
  首先创建一个新的EventSource对象,并传进一个入口点:
  var source = new EventSource("Myevent.php");url要与创建对象的页面同域
  EventSource实例有个readyState属性,0表示正连接到服务器,1表示打开了连接,2表示关闭了连接
  还有open事件,在建立连接时触发,message事件,在服务器接收到新事件时触发,error事件,在无法建立连接时触发
  服务器发回的数据以字符串形式保存在event.data中
  默认情况下,EventSource对象会保持与服务器的活动连接,连接断开会重新连接
  强制断开使用close()方法,source.close()
2)事件流
  服务器事件会通过一个持久的http响应发送,这个响应的MIME类型为text/event-stream
  响应的格式为纯文本,最简单的情况是每个数据项前有data
  对于多个连续的以data开头的数据行,将作为多段数据解析,每个值之间有一个换行分隔符
  只有包含data:的数据行后有空行,才会触发messge事件,
  通过id:前缀可以给特定的事件指定一个关联的ID,位于data:行前面和后面皆可
  设置了ID,EventSource对象会跟踪上一次触发的事件,连接断开时,会向服务器发送一个包含名为last-Event-ID的特殊HTTP头部的请求,以便服务器知道     下一次触发的事件
5,Web Socket
  在一个单独的持久的连接上提供全双工,双向通信
  一个http请求发送到服务器已发起连接,取得服务器响应后,建立的连接使用http升级从http协议交换为web Socket协议
  ws://;wss://
  1)Web Socket API
  首先实例一个WebSocket对象并传人要连接的URL
  var socket = new WebSocket("ws://www.example.com/sever.php");
  必须给websocket构造函数传人绝对的URL,
  浏览器在实例化websocket对象后,马上尝试创建连接,readyState属性
    WebSocket.OPENING(0):正在建立连接
    WebSocket.OPEN(1):已经建立连接
    WebSocket.CLOSING(2):正在关闭连接
    WebSocket.CLOSE(3):已经关闭连接
  没有readystatechange事件,readyState永远是从0开始的
  关闭WebSocket,使用close方法
  2)发送和接收数据
  send()方法
  var socke = new WebSocket("ws://www.example.com/server.php");
  socket.send("hello world");
  websocket只能发送纯文本数据,对于复杂的结构,将数据序列化为JSON字符串,使用stringify()方法
  当服务器向客户端发来消息时,WebSocket对象会触发message事件,这个message事件与其他传递消息的协议类似,
  也是把返回的数据保存在event.data属性中
  socket.onmessage = function(event){
    var data = event.data;
    //处理数据
  }
  3)其他事件
    open:在成功建立连接时触发
    error:在发生错误时触发,连接不能持续
    close:在连接关闭时触发
  WebSocket对象不支持DOM2级事件监听器,必须使用DOM0级语法分别定义每个事件处理程序
  var socket = new WebSocket("ws://www.example.com/server.php");
  socket.onopen = function(){};
  socket.onerror = function(){};
  socket.onclose = function(){};
  只有close事件对象包含额外的三个属性
    wasClean:布尔值,表示连接是否已经明确的关闭
    code:服务器返回的数据状态码
    reason:字符串包含服务器发回的消息
6,SSE与Web Socket
  SSE,支持单向的从服务器读取数据
  WebSocket,支持双向通信
  SEE和XHR组合也可以实现双向通信
六,安全
  确保XHR访问的URl安全,通行的做法是验证发送请求者是否有权限访问相应的资源
  要求以SSL连接来访问可以通过XHR请求的资源
  要求每一次请求都附带经过相应算法计算得到的验证码
  要求发送POST而不是GET请求(对CSRF攻击没有作用)
  检查来源URL以确保是否可信,(对CSRF攻击没有作用,来源记录很容易伪造)
  基于cookie信息进行验证(对CSRF攻击没有作用,容易被伪造)

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章