XMLHttpRequest的使用

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