一个简易的ajax封装-WEB前端开发

该封装在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”]

[/code]

查看demo：https://www.html.cn/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.html.cn/demo/ajax_test2/

WEB前端开发

一个简易的ajax封装

相关推荐

评论抢沙发

置顶推荐

最近文章

热门标签

最新评论

分类目录

热门文章

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

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

支付宝扫一扫打赏

微信扫一扫打赏