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的

最后把数据用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('错误');
}
}
}
}