ajax就是一種可以實現局部刷新的一個技術，應該是一種大家最常用的數據交互方式，比較簡單實用。大部分人一般都是引一個jQuery庫，或者一些別的js庫來寫，很方便，但是當頁面數據很少的時候又要用到ajax 在去用jq庫就有點大材小用，會有代碼冗余問題，所以就考慮到封裝一個原生的函數了。
我大概說一下封裝的過程，首先一般是用對象的形式做參數，這樣就不會考慮參數個數，和參數的位置問題。然后就是創建一個調用對象，這個地方有一個兼容問題，需要做一個判斷如果是IE就用ActiveXObject，然后是請求的URL，請求的方式get或post，如果是get就把參數前面加？拼接在URL后面，多個參數用&連接，再設置同步或異步（false是同步，true是異步）。post參數用send方法傳遞，還需要設置請求頭setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=utf-8')，設置同步或異步。
發送請求后，寫一個onreadystatechange事件判斷ajax的狀態碼和HTTP的
狀態碼來確定是否成功，ajax狀態碼==4 && HTTP狀態>=200 && <300 ||
304 的時候表示數據請求成功，然后轉換數據的格式，用eval
（‘（+response+）’）/ toString / JSON.prase()等方法來解析數據，
最后把數據用innerHTML追加到頁面上。完事兒
原生ajax和jQuery ajax的區別：jquery就是將原生的js封裝了的，
正常寫的話 是需要寫好多代碼判斷是什么瀏覽器來正確使用不同的ajax版本
，引了jQuery就可以直接調用。
function ajax(obj) {
// type, url, async, responseType, params, success, error
/*
{
type:請求方式
url:請求地址
[async]:是否異步
[responseType]:數據類型
[params]:參數對象
success:成功的回調函數
[error]:失敗的回調函數
}
*/
if (window.XMLHttpRequest) {
var XHR = new XMLHttpRequest();
}
else {
var XHR = new ActiveXObject('Microsoft.XMLHTTP');
}
if (!obj.url) {
alert('沒有指定服務器地址');
return;
}
console.log(obj['type']);
switch (obj['type'].toUpperCase()) {
case 'GET':
XHR.open('GET', obj.url+'?'+json2str(obj.params), true);
if(obj.responseType){XHR.responseType=obj.responseType}
XHR.send();
break;
case 'POST':
XHR.open('POST', obj.url, true);
if(obj.responseType){XHR.responseType=obj.responseType}
XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
XHR.send(json2str(obj.params));
break;
default:
alert('請求類型未指定或拼寫有誤');
return;
break;
}
XHR.onreadystatechange = function () {
if (XHR.readyState == 4) {
if (XHR.status >= 200 && XHR.status<300 || XHR.status== 304) {
switch (obj.responseType) {
case 'json':
console.log('json');
obj.success(XHR.response);
break;
case 'xml':
console.log('xml');
obj.success(XHR.responseXML);
break;
default:
console.log('default');
obj.success(XHR.responseText);
break;
}
}else {
console.log('錯誤');
}
}
}
}