ajax原生js封裝
不帶注釋的
<script>
function ajax(json) { json.type = json.type ? json.type : 'get'; json.async = json.async == false ? false : true; json.contentType = json.contentType ? json.contentType : 'application/x-www-form-urlencoded'; json.data = json.data ? json.data : ''; var ajax = new XMLHttpRequest(); if (json.type.toLowerCase() == 'post') { ajax.open('post', json.url, json.async); ajax.setRequestHeader('Content-type', json.contentType + ';charset=utf-8'); ajax.send(json.data); } else { ajax.open('get', json.url + '?' + json.data, json.async); ajax.send(); } ajax.onreadystatechange = function () { if (ajax.readyState == 4 && ajax.status == 200) { json.success(ajax.response); } } }
</script>
帶注釋的
// ajax封裝
/*
請求方式: type 非必傳,默認get
請求地址: url 必傳
是否非同步: async 非必傳
設置頭請求: contentType 非必傳
請求數據: data 非必傳
*/
function ajax(json) {
// 如果沒傳類型,則默認get方式
json.type = json.type ? json.type : 'get';
// 是否非同步傳送 布爾值
json.async = json.async == false ? false : true;
//設置頭請求 get非必須 post方式必須設置
json.contentType = json.contentType ? json.contentType : 'application/x-www-form-urlencoded';
//傳送數據
json.data = json.data ? json.data : '';
//創建非同步對象
var ajax = new XMLHttpRequest();
// 判斷是get還是post請求
//如果是post請求
if (json.type.toLowerCase() == 'post') {
//設置請求類型、請求地址、是否非同步
ajax.open('post', json.url, json.async);
//post請求一定要在send前設置請求頭才行,不然會報錯 + 編碼方式
ajax.setRequestHeader('Content-type', json.contentType + ';charset=utf-8');
//發送請求,數據作為參數傳入
ajax.send(json.data);
} else {//不是post就為get(第一步設置的)
//設置請求類型、請求地址(可以帶參數)、請求數據、是否非同步
ajax.open('get', json.url + '?' + json.data, json.async);
//發送請求
ajax.send();
}
//註冊事件 onreadystatechange狀態改變就會調用
ajax.onreadystatechange = function () {
//判斷伺服器是否正確響應
if (ajax.readyState == 4 && ajax.status == 200) {
//用success作為成功後的回調函數
json.success(ajax.response);
}
}
}