XMLHttpRequest的使用

标签（空格分隔）： JavaScript 前端 编程

function sendAjax() {

  //构造表单数据

  var formData = new FormData();

  formData.append('username', 'johndoe');

  formData.append('id', 123456);

  //创建xhr对象

  var xhr = new XMLHttpRequest();

  //设置xhr请求的超时时间

  xhr.timeout = 3000;

  //设置响应返回的数据格式

  xhr.responseType = "text";

  //创建一个 post 请求，采用异步

  xhr.open('POST', '/server', true);

  //注册相关事件回调处理函数

  xhr.onload = function(e) {

    if(this.status == 200||this.status == 304){

        alert(this.responseText);

    }

  };

  xhr.ontimeout = function(e) { ... };

  xhr.onerror = function(e) { ... };

  xhr.upload.onprogress = function(e) { ... };

  //发送数据

  xhr.send(formData);

}

---

/*

发起HTTP GET请求获取指定URL的内容

如果响应成功到达，则传入responseText给回调函数

如果响应在timeout时间内没有到达，则中止请求

浏览器可能会在abort()后出啊发readystatechange

如果部分请求结果到达，甚至可能设置status属性

所有需要设置一个标记，当部分且超时的响应到达时不会调用回调函数

如果使用load(当请求完成时触发)事件就没有这个风险

*/

function(url,timeout,callback){

    var request = new XMLHttpRequest();

    var time = false;//是否超时

    var timer = setTimeout(function(){

        timeout = true;

        request.abort();//请求中止

    },timeout);

    request.open("GET",url);

    request.onreadystatechange = function(){

        if(request.readyState !==4) continue;//忽略未完成的请求

        if(timeout) return;//忽略中止请求

        clearTimeout(timer);//取消等待的超时

        if(request.status === 200)

            callback(request.responseText);

    }

    request.send(null);

}

---

参考地址1-SF

参考地址2-CSDN