Ajax 与 Comet(《JavaScript 高级程序设计》第 21 章笔记)

Ajax 与 Comet

1、XMLHttpRequest 对象

function createXML(){
    if (typeof XMLHttpRequest !="undefined"){
        return new XMLHttpRequest();
    }else if(typeof ActiveXobject!="undefined") {
        var versions=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP"],i,len;
        for (var 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 XHL object available);
}

1.1 XML 的用法

  • 使用 XML 对象时,要调用的第一个方法是 open() ,她接受 3 个参数:要发送的请求的类型(”get”“post”等)、请求的 URL 和表示是否异步发送的请求的布尔值。
xhr.open("get","example.txt",false);
xhr.send(null)

send() 方法只接受作为主体发送的数据,如果不需要通过请求主体发送数据,则必须传入 null
- [ ] responseText:作为响应主体被返回的文本。
- [ ] responseXML:如果响应的内容类型是”text/xml” 或 “application/xml”,这个属性中将确保存包含着响应数据的 XML DOM 文档。
- [ ] status:响应的 HTTP 状态。
- [ ] statusText:HTTP 状态的说明。
- 检测 XHR 对象的 readyState 属性,表示请求/响应过程的当前活动阶段。必须调用 open() 之前指定 onreadystatechange 事件处理程序才能确保跨浏览器兼容性。
- 在接收到响应之前可以调用 abort() 方法取消异步请求,xhr.abort(),调用这个方法,xhr 对象会停止触发事件。

1.2 HTTP 头部信息

  1. Accept:浏览器能够显示的内容类型;
  2. Accept-Charset: 浏览器能够接收的字符集;
  3. Accept-Encoding: 浏览器能够接收的编码方法;
  4. Accept-Language::浏览器申明能够接收的语言语言跟字符集的区别;
  5. Connection:浏览器与服务器之间连接的类型。
  6. cookie:当前页面设置的任何 cookie;
  7. host:发出请求的页面所在域;
  8. Referer: 发出请求的页面的URL。
  9. User-Agent: 浏览器的用户代理字符集。
    • 使用 setRequestHeader() 方法可以设置自定义的请求头部信息。这个方法接受两个参数:头部字段的名称和头部字段的值。要成功发送头部信息,必须调用 open() 方法之后且调用 send() 方法之前调用 setRequestHeader()。

1.3 GET 请求

使用 GET 请求经常会发生的查询字符串的格式有问题的错误。查询字符串中每个参数的名称和值都必须使用 encodeURIComponent() 进行编码,然后才能放到 URL 的末尾;而且所有名-值对儿都必须有和号(&)分隔。

1.1.4 POST 请求

POST 请求,通常用于服务器发送应该被保存的数据。

2、XHLHttpRequest 2级

2.1FormData

为序列化表单以及创建与表单格式相同的数据提供了便利。

新建FormData对象:

var formData = new FormData();

为它添加表单项:

formData.append(‘name’, ‘lisi’);
formData.append(‘age’, 12);

最后,直接传送这个FormData对象。这与提交网页表单的效果,完全一样。

xhr.send(formData);

ormData对象也可以用来获取网页表单的值:

var form = document.getElementById('myform');
  var formData = new FormData(form);
  formData.append('name', 'lisi'); // 添加一个表单项
  xhr.open('POST', form.action);
  xhr.send(formData);

2.2c超时设定

可以设置HTTP请求的时限,表示请求在等待响应多少毫秒之后就停止。在给timeout属性属性设置一个数值后,如果在规定的时间内浏览器还没有接收到响应,那么就会触发timeout事件,进而会调用ontimeout事件处理程序。

2.3 overrideMimeType()

3、进度事件

传送数据的时候,有一个progress事件,用来返回进度信息。
它分成上传和下载两种情况:
1. 下载的progress事件属于XMLHttpRequest对象
2. 上传的progress事件属于XMLHttpRequest.upload对象


  • loadstart:在接收到响应数据的第一个字节时触发
  • progress:在接收响应期间持续不断地触发
    • error:在请求发生错误时触发
  • abort:在因为调用abort()方法而终止连续时触发
  • load:在接收到完整的响应数据时触发
  • loadend:在通信完成或者触发error、abort或load事件后触发

每个请求都是从触发loadstart事件开始,接下来是一或多个progress事件,然后触发error、abort或load事件中的一个,最后以触发loadend事件结束。
1. load 事件

只要浏览器接到服务器的响应,不管其状态如何,都会触发 load 事件。必须要检查 status 属性,才能确定数据是否真的已经可用。

2、progress 事件

  • onprogress 事件处理程序会接收到一个 event 对象,其 target 属性 XHR 对象,但包含三个额外的属性:lengthComputable、position 和 totalSize。
  • 必须在调用 open() 方法之前添加 onprogress 事件处理程序,每次触发 progress 事件,都以新的状态信息更新 HTML 元素的内容。

猜你喜欢

转载自blog.csdn.net/yan_zi625/article/details/79841874