一个简单的ajax请求,一个简单的Ajax请求对象

把下面代码直接引入就可以使用下面有使用的方法

在一些小的应用中会经常用到,支持get,post,jsonp请求方法

(function(a) {

//======================一个简单的ajax对象==============================

var _dev = true;

var _debug = function(msg) {

_dev && console && console.log(msg);

};

/**

* 扩展配置

* @param  {[type]} dest 目标对象,被覆盖

* @param  {[type]} src  源对象

* @return {[type]}      合成成功对象

*/

var _extend = function(dest, src) {

for (var i in src) {

dest[i] = src[i];

}

return dest;

};

var b = function(o) {

this.conf = o;

this.result = null;

this.xmlHttp = null;

};

b.prototype = {

//创建xmlHttp对象

createXMLHttpRequest: function() {

if (a.ActiveXObject) {

return new ActiveXObject("Microsoft.XMLHTTP");

} else if (a.XMLHttpRequest) {

return new XMLHttpRequest();

}

},

/*发送请求

@param re_mod请求的方法

@param re_file请求的文件

@param re_param请求的参数，用，号分隔开如：(“1，2，3，”)

@param callfun回调函数  这里最好直接用一个匿名函数来代替如：function(){}

*/

sendAjax: function() {

var _t = this;

_t.xmlHttp = this.createXMLHttpRequest();

var _c = _t.conf;

var _xhr = _t.xmlHttp;

_xhr.onreadystatechange = function() {

if (_xhr.readyState == 4) {

_t.result = _xhr.responseText

if (_xhr.status == 200) {

_debug(_xhr);

var _retype = _xhr.responseType;

if (_t.result.indexOf('{') === 0) {

try {

_t.result = eval('(' + _t.result + ')');

} catch (e) {

_t.result = e;

}

}

_c.success(_t.result);

} else {

_c.error(_xhr);

}

}

};

var par = '';

var url = _c.url;

for (var i in _c.data) {

var _data = escape(_c.data[i]);

par += par ? ("&" + i + "=" + _data) : (i + "=" + _data);

}

_c.type = _c.type.toUpperCase();

if (_c.type == 'POST') {

_xhr.open(_c.type, url, true);

_xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

} else {

par && ((url.indexOf('?') !== -1) ? (url += "&" + par) : (url += "?" + par));

_xhr.open(_c.type, url, true);

}

_xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");

_xhr.send(par);

}

};

/**

* 生成指定范围内的随机数

* @param  {[type]} start 开始

* @param  {[type]} end   结束

* @return {[type]}       int

*/

var suijishu = function(start, end) {

return Math.floor(Math.random() * (end - start + 1) + start);

};

var c = function() {

var _opt = {

url: '',

type: 'get',

data: {},

dataType: 'text',

success: function() {},

error: function() {}

};

var args = arguments;

//第二个参数为字符串时自动转为jsonp请求

if ('string' === typeof args[1]) {

_opt.dataType = 'jsonp';

_opt.success = args[2];

_opt.url = args[0];

}

if (_opt.dataType && _opt.dataType == 'jsonp') {

var s = document.createElement('script');

var callbackname = 'jsonpcallback' + (new Date()).getTime() + '' + suijishu(1000, 9999);

a[callbackname] = function(data) {

try {

data = eval('(' + data + ')');

} catch (e) {}

_opt.success(data);

a[callbackname] = undefined;

};

if (_opt.url.indexOf('?') != -1) {

s.src = _opt.url + '&datatype=jsonp&callback=' + callbackname;

} else {

s.src = _opt.url + '?datatype=jsonp&callback=' + callbackname;

}

document.getElementsByTagName('head').item(0).appendChild(s);

s.parentNode.removeChild(s);

} else {

if ('string' === typeof args[0]) {

_opt.url = args[0];

if ('object' === typeof args[1]) {

//post数据转为post

_opt.type = 'POST';

_opt.data = args[1];

args[2] && (_opt.success = args[2]);

args[3] && (_opt.error = args[3]);

} else {

//默认get

args[1] && (_opt.success = args[1]);

args[2] && (_opt.error = args[2]);

}

//这里是url

} else if ('object' === typeof args[0]) {

_extend(_opt, args[0]);

}

// d.extend(_opt, _opt);

var d = new b(_opt);

d.sendAjax();

return d;

}

};

a.simpleAjax = c;

})(window);

使用方法simpleAjax({

type: 'POST',

dataType: 'text', //默认为text

url: "xml.html?name=asdf",

data: {

a: 'asdf&&1',

b: 2

},

success: function(data) {

console.log(data);

},

error: function(xhr) {

console.log(xhr);

}

});

//简单使用方法

//get

simpleAjax('xml.html?name=asdf', function(data) {

//请求成功

console.log(data);

}, function(xhr) {

// 请求失败

console.log(xhr);

});

//post

simpleAjax('xml.html?name=asdf', {}, function(data) {

//请求成功

console.log(data);

}, function(xhr) {

//请求失败

console.log(xhr);

});

//jsonp

simpleAjax('./data.php', 'jsonp', function(data) {

//请求成功

console.log(data);

});