1. 程式人生 > >原生ajax的請求封裝get和post

原生ajax的請求封裝get和post

取數 發送 text 對象 console xmlhttp UC var cat

一個完整的AJAX請求包括五個步驟:

  1.創建XMLHTTPRequest對象

  2.使用open方法創建http請求,並設置請求地址

  3.設置發送的數據,開始和服務器端交互

  4.註冊事件

  5.獲取響應並更新界面

function ajax_method(url,data,method,success) {
// 異步對象
var ajax = new XMLHttpRequest();

// get 跟post 需要分別寫不同的代碼
if (method==‘get‘) {
// get請求
if (data) {
// 如果有值
url+=‘?‘;
url+=data;
}else{

}
// 設置 方法 以及 url
ajax.open(method,url);

// send即可
ajax.send();
}else{
// post請求
// post請求 url 是不需要改變
ajax.open(method,url);

// 需要設置請求報文
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

// 判斷data send發送數據
if (data) {
// 如果有值 從send發送
ajax.send(data);
}else{
// 木有值 直接發送即可
ajax.send();
}
}

// 註冊事件
ajax.onreadystatechange = function () {
// 在事件中 獲取數據 並修改界面顯示
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText);

// 將 數據 讓 外面可以使用
// return ajax.responseText;

// 當 onreadystatechange 調用時 說明 數據回來了
// ajax.responseText;

// 如果說 外面可以傳入一個 function 作為參數 success
success(ajax.responseText);
}
}

}

原生ajax的請求封裝get和post