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

最新推荐文章于 2023-09-23 01:41:51 发布

Yanzery

最新推荐文章于 2023-09-23 01:41:51 发布

阅读量192

点赞数

分类专栏：前端 JavaScript 文章标签：前端 JavaScript

本文链接：https://blog.csdn.net/yan_zi625/article/details/79841874

版权

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

本文详细介绍了Ajax的基础知识，包括XMLHttpRequest对象的创建与使用、HTTP头部信息的设置、GET和POST请求的具体操作方法。此外，还介绍了XMLHttpRequest2级的新特性如FormData对象的使用、超时设定及overrideMimeType()方法，并探讨了进度事件的应用。

摘要由CSDN通过智能技术生成

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 头部信息

Accept：浏览器能够显示的内容类型；
Accept-Charset：浏览器能够接收的字符集；
Accept-Encoding：浏览器能够接收的编码方法；
Accept-Language：：浏览器申明能够接收的语言语言跟字符集的区别；
Connection：浏览器与服务器之间连接的类型。
cookie：当前页面设置的任何 cookie；
host：发出请求的页面所在域；
Referer: 发出请求的页面的URL。
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 元素的内容。