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);
}