原生ajax的請求封裝get和post
一個完整的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