一个简易的ajax封装

该封装在Liner的基础修改了一些,主要修改的是获取的数据。

接口:
? get, post?常用普通接口。
? e_handler?出错处理句柄,可选。
? _object?创建浏览器兼容XHR的包装。
?
参数:
?@type:??????? “xml”,”html”,”javascript”,”json”数据类型;
?@url:????? 请求的响应页面;
?@sdata:??POST的数据;
?@callback:?处理响应数据的回调函数;

?以下参数可选
@fdata:??传递给回调函数的数据,默认null;
@asyn:??是否异步,默认true。
?
返回值:
如果是异步,返回异步请求对象;否则不返回。
?
? 回调函数有两个参数:(req, data)
? @req:??异步请求对象(XMLHttpRequest 或 ActiveXObject)
??@data:??传入的附加数据。

代码如下:

[code=”javascript”]

function MTajax(){
??? // 默认出错处理
??? this._eh = this._error;
}
MTajax.prototype={
?debug_enable : false,
?// GET 请求
?//(URL, 回调函数[, 回调函数附加数据, 是否异步])
?get : function (type, url, callback, fdata, asyn){
???? fdata = (fdata === undefined)? null: fdata;
???? asyn = (asyn === undefined)? true: asyn;
???? var _self = this;
???? var X = this._object();
???? if (asyn) {
???X.onreadystatechange = function(){
????_self._callback(type, X, callback, fdata, _self);
???};
??}
???? X.open(‘GET’, url, asyn);
???? if (this.debug_enable) {
???this._debugger(callback);
??}
???? X.send(null);
???? if(asyn){
???????? return X;
???? }else{
???????? this._callback(type, X, callback, fdata, _self);
???? }
?},
?// POST 请求
?//(URL, POST数据, 回调函数[, 回调函数附加数据, 是否异步])
?post : function (type, url, sdata, callback, fdata, asyn){
???? fdata = (fdata === undefined)? null: fdata;
???? asyn = (asyn === undefined)? true: asyn;
???? var _self = this;
???? var X = this._object();
???? if (asyn) {
???X.onreadystatechange = function(){
????_self._callback(type, X, callback, fdata, _self);
???};
??}
???? X.open(‘POST’, url, asyn);
?
???? if (this.debug_enable) {
???this._debugger(callback);
??}
???? X.setRequestHeader(‘Content-length’, sdata.length);
???? X.setRequestHeader(‘Content-type’, ‘application/x-www-form-urlencoded’);
???? X.send(sdata);
???? if(asyn){
???????? return X;
???? }else{
???????? this._callback(type, X, callback, fdata, _self);
???? }
?},
?e_handler : function (func){
???? if(func !== undefined) this._eh = func;
?},
?//创建一个兼容的XHR对象
?_object : function(){
???? var A;
???? if(typeof XMLHttpRequest != ‘undefined’) {
???????? A = new XMLHttpRequest();
???? }else{
???????? var _msxmlhttp = [‘Msxml2.XMLHTTP.6.0′,’Msxml2.XMLHTTP.3.0′,’Msxml2.XMLHTTP’,’Microsoft.XMLHTTP’];
???????? for(var i = 0; i < _msxmlhttp.length; i++) { ???????????? try { ???????????????? if(A = new ActiveXObject(_msxmlhttp[i])) break; ???????????? } catch (e) { ???????????????? A = null; ???????????? } ???????? } ???? } ???? if(!A) ???????? alert("Could not create connection object."); ???? return A; ?}, ?_callback : function (type, req, callback, data, obj){ ??if(req.readyState == 4) { ??//debugger; ???var ct = req.getResponseHeader("content-type"); ???? ?var ajaxData = !type &amp;amp;amp;&amp;amp;amp; ct &amp;amp;amp;&amp;amp;amp; ct.indexOf("xml") >= 0;
???? ?ajaxData = type == “xml” || ajaxData ? req.responseXML : req.responseText;
???? ?if (type == “javascript”) {
????ajaxData=eval( req.responseText );
???}
???if (type == “json”) {
????ajaxData=eval(“(“+req.responseText+”);”);
???}
???
???????? if(req.status != 200) {
???????????? //req.onreadystatechange = null;
???????????? if(obj._eh) obj._eh(ajaxData, callback);
???????? }else{
???????????? callback(ajaxData, data);
???????????? //req.onreadystatechange = null;
???????? }
???? }
?},
?// Debug: 显示采用的回调函数。
?_debugger : function (func){
???? alert(‘running: ‘ + this._fname(func));
?},
?
?// 默认的出错处理
?_error : function (req, callback){
???? alert(req.statusText + ‘\nShould run: ‘ + this._fname(callback));
?},
?
?// 提取函数名(含参数)
?_fname : function (func){
???? var S = func.toString();
???? return S.slice(9, S.indexOf(‘)’, 10)) + ‘)’;
?}
?
};
if (ajax_obj == null) var ajax_obj = new MTajax();

[/code]

查看demo:https://www.css88.com/demo/ajax_test/

===================分割线=====================

重新整合了一下,讲参数改成一个options对象,参数说明如下:

{
???type:options.type||”GET”,???//请求类型:GET或者POST;
???datetype:options.datetype||””, //数据类型: “xml”,”html”,”javascript”,”json”;
???url: options.url,???????? //URL;
???sdata: options.sdata,?????? //POST数据;
???callback: options.callback,???? //回调行数;
???fdata:options.fdata||null, ???//回调函数附加数据;
???asyn:options.asyn||true,????????? //是否异步;
??}

源代码:

[code=”javascript”]
function MTajax(){
??? this._eh = this._error;
}
MTajax.prototype={
?debug_enable : false,
?ajax:function (options){
??var type=options.type||”GET”;
??var datetype=options.datetype||””;
??var url=options.url||””;
??var sdata=options.sdata||null;
??var callback=options.callback||function(){};
??var fdata=options.fdata||null;
??var asyn=options.asyn||true;
??
???? var _self = this;
???? var X = this._object();
???? if (asyn) {
???X.onreadystatechange = function(){
????_self._callback(datetype, X, callback, fdata, _self);
???};
??}
???? X.open(type, url, asyn);
???? if (this.debug_enable) {
???this._debugger(callback);
??}
??if(type===”GET”){
??? X.send(null);
??}else{
???X.setRequestHeader(‘Content-length’, sdata.length);
???? ?X.setRequestHeader(‘Content-type’, ‘application/x-www-form-urlencoded’);
???? ?X.send(sdata);
??}
???? if(asyn){
???????? return X;
???? }else{
???????? this._callback(datetype, X, callback, fdata, _self);
???? }
?},
?//创建一个兼容的XHR对象
?_object : function(){
???? var A;
???? if(typeof XMLHttpRequest != ‘undefined’) {
???????? A = new XMLHttpRequest();
???? }else{
???????? var _msxmlhttp = [‘Msxml2.XMLHTTP.6.0′,’Msxml2.XMLHTTP.3.0′,’Msxml2.XMLHTTP’,’Microsoft.XMLHTTP’];
???????? for(var i = 0; i < _msxmlhttp.length; i++) { ???????????? try { ???????????????? if(A = new ActiveXObject(_msxmlhttp[i])) break; ???????????? } catch (e) { ???????????????? A = null; ???????????? } ???????? } ???? } ???? if(!A) ???????? alert("Could not create connection object."); ???? return A; ?}, ?_callback : function (type, req, callback, data, obj){ ??if(req.readyState == 4) { ???var ct = req.getResponseHeader("content-type"); ???? ?var ajaxData = !type && ct && ct.indexOf("xml") >= 0;
???? ?ajaxData = type == “xml” || ajaxData ? req.responseXML : req.responseText;
???? ?if (type == “javascript”) {
????ajaxData=eval( req.responseText );
???}
???if (type == “json”) {
????ajaxData=eval(“(“+req.responseText+”);”);
???}
???
???????? if(req.status != 200) {
???????????? if(obj._eh) obj._eh(ajaxData, callback);
???????? }else{
???????????? callback(ajaxData, data);
???????? }
???? }
?},
?// Debug: 显示采用的回调函数。
?_debugger : function (func){
???? alert(‘running: ‘ + this._fname(func));
?},
?
?// 默认的出错处理
?_error : function (req, callback){
???? alert(req.statusText + ‘\nShould run: ‘ + this._fname(callback));
?},
?
?// 提取函数名(含参数)
?_fname : function (func){
???? var S = func.toString();
???? return S.slice(9, S.indexOf(‘)’, 10)) + ‘)’;
?}
?
};
if (ajax_obj == null) var ajax_obj = new MTajax();
[/code]

看demo:https://www.css88.com/demo/ajax_test2/

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 一个简易的ajax封装

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏