javascript：Ajax与Comet

Posted 2020-10-27 LittleGirl_MyBaby

一：使用XMLHttpRequest对象

　　ajax的核心是XMLHttpRequest对象。IE7以下的浏览器XHR定义方法不同。对于较高级的浏览器 var xhr = new XMLHttpRequest().　

var xhr  = new XMLHttpRequest();
xhr.open()
xhr.send(null)

xhr.open接收三个参数，第一个为发送方式get或者post。第二个参数是URL,第三个参数是布尔值，是否是异步。

xhr.send(null),参数为向服务器发送的数据，如果没有，必须写上null.

浏览器的响应数据作为xhr的属性：respenseText,responseXML,status,statusText。status的状态为200表示成功，状态为304表示内容没有被修改，可以直接使用缓存。

　　2）异步请求下，xhr的属性readyState,表示当前活动状态，等于4时表示成功，每当状态改变时都会调用onreadystatechange()事件，该事件的定义必须放在xhr.open函数之前。

　　xhr.abort()取消异步请求

　　3）设置和获取http请求的头部信息

　　　　通过方法xhr.setRequestHeader(头部字段名称名称，要设置的值)进行设置。

　　　　获取响应的头部信息：xhr.getResponseHeader(头部字段名称) ， getAllResponseHeaders()获取所有的头部信息

　　4）get请求--url字符串编码问题

　　　　url中的每个字符串必须要使用encodeURLComponent()进行编码，例如example.php?name1=value1&name2=value2

　　5) post请求

　　　　向服务器发送数据，xhr.send(data)。FormData对象，定义发送的表单对象，var data = new FormData(),data.append(key,value),FormData对象是在xhr2级中出现的。

　　6）timeout 超时设定

　　　　xhr.timeout  = 1000hs。当超时时会触发ontimeout事件，xhr.ontimeout = function(){}

var xhr  = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if (xhr.readystate == 4)       {
    try{
    if((xhr.statue>=200 && xhr.status<=300)||xhr.status==304)          {xhr.responseText}
}  
catch(ex){//假设有ontimeout处理事件}
}       
}

xhr.open();
xhr.timeout = 1000;
xhr.ontimeout = function(){}
xhr.send(null)

　　　

二：使用XMLHttpRequest事件

　　进度事件：有以下6个进度事件。loadstart、progress、error、abort、load、loadend。

　　1) 使用load事件优化：

var xhr  = new XMLHttpRequest();
xhr.onload = function(){
      
    try{
    if((xhr.statue>=200 && xhr.status<=300)||xhr.status==304)          {xhr.responseText}
}  
catch(ex){//假设有ontimeout处理事件}
      
}

xhr.open();
xhr.timeout = 1000;
xhr.ontimeout = function(){}
xhr.send(null)

浏览器只要接收到服务器响应，不管状态如何都会触发load事件，因此必须要检查status.

 　　2)使用progress事件创建进度条

　　　　onprogress事件接收到一个event对象，event对象有个属性target,指向XHR对象，另外还包括lengthComputabel(布尔值，表示是否可用), totalsize , position。

三：跨域Ajax通信的限制

　　CORS（跨域资源共享），其基本思想是自定义http头部信息，让浏览器与服务器进行沟通，从而决定请求是成功还是要失败。