芒果团子的博客

ajax总结（一）

字数统计: 372阅读时长: 1 min
2018/10/19 Share

XMLHttpRequest 2级

2级中表单数据类型：FormData，使用FormData的话不必明确的在xhr上设置请求头。

1
2
var data = new FormData();
data.append('name', 'Jone')

  • 超时设定
    浏览器在指定时间内没有接收到响应，会触发timeout事件

    1
    2
    3
    4
    5
    6
    xhr.open();
    xhr.timeout = 1000; // 超时时间设置为1秒
    xhr.ontimeout = function(){ // 超时处理
        // do somthing 
    }
    xhr.send();

  • overrideMimeType()方法

用于重写XHR响应的MIME类型，返回的MIME决定了XHR对象如何处理它。

1
2
3
xhr.open();
xhr.overrideMimeType('text/xml');
xhr.send();

  • 进度事件

  1. loadstart：接收到响应数据的第一个字节时触发

  2. progress：接收响应期间持续不断地触发

  3. error：请求发生错误时触发

  4. abort：因为调用abort()方法而终止连接时触发

  5. load：接收到完整的响应数据时触发

  6. loadend：通信完成或者触发error、abort或load事件后触发

触发顺序：1 -> 2(一个或多个) -> 3/4/5 -> 6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 一个进度指示器示例
var xhr = createXHR();
xhr.onload = function(event){
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
        alert(xhr.responseText);
    }else{
        alert('Request was unsuccessful:' + xhr.status);
    }
}

xhr.onprogress = function(event){
    var divStatus = document.getElementById('status');
    if(event.lengthComputable){ // 表示进度信息是否可用，布尔值
        // position: 已经接收的字节数，totalSize：根据响应头确定的预期字节数
        divStatus.innerHTML = 'Received ' + event.position + 'of' + event.totalSize + 'bytes';
    }
}

// 在调用open之前添加onprogress，确保正常执行

原文作者：sylvanas

原文链接：https://sylvanase.github.io/2018/10/19/ajax总结（二）/

发表日期：October 19th 2018, 2:03:03 pm

更新日期：March 27th 2018, 4:34:02 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. XMLHttpRequest 2级
Total : 14
Invalid date
2018
Invalid date
2018
Invalid date
Invalid date
2018
Invalid date
Invalid date