ajax用jquery使用確實(shí)方便案训，但如果只用ajax纷宇，難道我們還會(huì)為了使用而引入jquery嗎？不僅如此秽荞，用原生js實(shí)現(xiàn)ajax骤公，對(duì)理解其調(diào)用過程也有幫助。下面就簡(jiǎn)單封裝一個(gè)ajax.
/* 封裝ajax函數(shù)
* @param {string} obj.method http連接的方式扬跋，包括POST和GET兩種方式
* @param {string} obj.url 發(fā)送請(qǐng)求的url
* @param {boolean} obj.async 是否為異步請(qǐng)求阶捆，true為異步，false為同步的
* @param {object} obj.data 發(fā)送的參數(shù)，格式為對(duì)象類型
* @param {function} obj.success ajax發(fā)送并接收成功調(diào)用的回調(diào)函數(shù)
*/
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(){};
//創(chuàng)建一個(gè)異步調(diào)用對(duì)象
var xmlHttp = null;
if(XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
//參數(shù)處理
var params = [];
for(var key in obj.data) {
params.push(key + '=' + obj.data[key]);
}
var postData = params.join('&');
//發(fā)送http請(qǐng)求
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);
}
//響應(yīng)http狀態(tài)變化函數(shù)洒试，成功后回調(diào)
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
obj.success(xmlHttp.responseText);
}
}
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
