ajax用jquery使用確實方便，但如果只用ajax，難道我們還會為了使用而引入jquery嗎？不僅如此，用原生js實現ajax，對理解其調用過程也有幫助。下面就簡單封裝一個ajax.
/* 封裝ajax函數
* @param {string} obj.method http連接的方式，包括POST和GET兩種方式
* @param {string} obj.url 發送請求的url
* @param {boolean} obj.async 是否為異步請求，true為異步，false為同步的
* @param {object} obj.data 發送的參數，格式為對象類型
* @param {function} obj.success ajax發送并接收成功調用的回調函數
*/
function ajax(obj) {
//初始化
obj = obj || {};
obj.method = obj.method.toUpperCase() || 'POST';
obj.url = obj.url || '';
obj.async = obj.async || true;
obj.data = obj.data || null;
obj.success = obj.success || function(){};
//創建一個異步調用對象
var xmlHttp = null;
if(XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
//參數處理
var params = [];
for(var key in obj.data) {
params.push(key + '=' + obj.data[key]);
}
var postData = params.join('&');
//發送http請求
if(obj.method.toUpperCase() ==='POST') {
xmlHttp.open(obj.method, obj.url, obj.async);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset= utf-8')
xmlHttp.send(postData);
}else if(obj.method.toUpperCase() === 'GET') {
xmlHttp.open(obj.method, obj.url + '?' + postData, obj.async);
xmlHttp.send(null);
}
//響應http狀態變化函數，成功后回調
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
obj.success(xmlHttp.responseText);
}
}
}
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
