ajax的封装过程

　　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('错误');
}
}
}
}