原生Javascript封装的一个AJAX函数分享_Javascript教程-查字典教程网

原生Javascript封装的一个AJAX函数分享

摘要：最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的—-但他又是基于jquery...

最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的—-但他又是基于jquery的ajax,所以离开了jquery这个函数就毫无作用了.而且我觉得,jquery的ajax方法是很完善的了,可以直接用,如果都有jquery了,那么他的ajax就不用白不用了.我缺少的是一个能在没有jquery的情况下使用的ajax方法.

所以我也花一天时间写了一个,参数与调用方法类似于jquery的ajax.就叫xhr吧,因为xhr=XMLHttpRequest.

复制代码代码如下:

* Name: xhr,AJAX封装函数

* Description: 一个ajax调用封装类,仿jquery的ajax调用方式

* Author:十年灯

var xhr = function () {

var

ajax = function () {

return ('XMLHttpRequest' in window) ? function () {

return new XMLHttpRequest();

} : function () {

return new ActiveXObject("Microsoft.XMLHTTP");

}

}(),

formatData= function (fd) {

var res = '';

for(var f in fd) {

res += f+'='+fd[f]+'&';

}

return res.slice(0,-1);

AJAX = function(ops) {

var

root = this,

req = ajax();

root.url = ops.url;

root.type = ops.type || 'responseText';

root.method = ops.method || 'GET';

root.async = ops.async || true;

root.data = ops.data || {};

root.complete = ops.complete || function () {};

root.success = ops.success || function(){};

root.error = ops.error || function (s) { alert(root.url+'->status:'+s+'error!')};

root.abort = req.abort;

root.setData = function (data) {

for(var d in data) {

root.data[d] = data[d];

}

root.send = function () {

var datastring = formatData(root.data),

sendstring,get = false,

async = root.async,

complete = root.complete,

method = root.method,

type=root.type;

if(method === 'GET') {

root.url+='?'+datastring;

get = true;

}

req.open(method,root.url,async);

if(!get) {

req.setRequestHeader("Content-type","application/x-www-form-urlencoded");

sendstring = datastring;

}

//在send之前重置onreadystatechange方法,否则会出现新的同步请求会执行两次成功回调(chrome等在同步请求时也会执行onreadystatechange)

req.onreadystatechange = async ? function () {

// console.log('async true');

if (req.readyState ==4){

complete();

if(req.status == 200) {

root.success(req[type]);

} else {

root.error(req.status);

}

} : null;

req.send(sendstring);

if(!async) {

//console.log('async false');

complete();

root.success(req[type]);

}

root.url && root.send();

};

return function(ops) {return new AJAX(ops);}

}();

参数说明:

1.url:请求地址.可以不填,请求就不会发起,但如果不填又强行send,出了错不怪我

2.method: ‘GET'或'POST',全大写,默认GET

3.data: 要附带发送的数据,格式是一个object

4.async: 是否异步,默认true

5.type: 返回的数据类型,只有responseText或responseXML,默认responseText

6.complete: 请求完成时执行的函数

7.success: 请求成功时执行的函数

8.error: 请求失败时执行的函数

注:其中的type参数,并没有jquery的dataType那么丰富,只有原生AJAX有的responseText或responseXML.要是返回的是json数据,你需要在success函数中自己处理一下把text转成json.

函数说明:

一个实例化的xhr对象有两个函数可使用,一个是send,调用方法是:xhr.send(),无参数,其作用是发起请求过程.如果初始化时没有url,则不会执行send方法,这样你就可以在后面再加入url,并手动发起send—-如果send的时候没有url,那么请求会失败并且我没有处理这个错误,出了错只有你自己找了.

另一个方法是setData,调用方法是xhr.setData(data_obj),其参数是一个object. setData方法的作用是局部替换xhr的data属性里的值,比如xhr.data中已有一个page:1,你可以用xhr.setData({page:2})来更新他的值,而不影响data中已存在的其他属性值.

调用方法:

复制代码代码如下:

var a1 = xhr({

url:'2.php',

data:{

'username':'lix',

'password':'123456',

'gender':'male',

'interset':'play'

async:false,

method:'GET',

success: function (data) {