简易ajax

最新推荐文章于 2022-05-21 11:45:46 发布

陌阡

最新推荐文章于 2022-05-21 11:45:46 发布

阅读量949

点赞数

分类专栏： javascript 文章标签： function xmlhttprequest ajax url null vb

本文链接：https://blog.csdn.net/zhaoxuejie/article/details/7778998

版权

javascript 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

/**
 * 简易ajax库[脱离jquery，压缩大小1.1kb]
 * 
 * 调用方式：
 * =================================================================
 * new Ajax(url, args);
 * =================================================================
 * 
 * 参数args:
 * =================================================================
 * KEY                  VALUE
 * -----------------------------------------------------------------
 * mime                 mime type,默认为text/html
 * method               get或者post 默认为post
 * sync                 true或者false, true为异步，false同步
 * params               需要传递的参数，可以是 ka=va&kb=vb 亦可：{ka:va,kb:vb}，在method为get时，忽略此参数，参数直接附在url后。
 * onComplete           回调方法：当ajax请求成功之后，调用此方法，并以request作为参数，在方法里面调用 request.responseText 则可获取请求的全部结果，默认 alert 
 * onError              回调方法，当 ajax 请求失败调用此方法，应以 error 信息作为参数，默认什么都不做
 * onLoading            回调方法，当 ajax 请求过程开始的时候调用此方法，默认什么都不做
 * =================================================================
 * 
 * 举例：
 * =================================================================
 * //get
* new Ajax(
 *      url : 'ajax.php?id=id',
 *      method : 'get',
 *      onComplete : function(raq){
 *          alert(req.responseText);                      
 *      },
 *      onError : function(error){
 *          
 *      },
 * );
 * //post
 * new Ajax(
 *      url : 'ajax.php',
 *      method : 'post',
 *      params : { 
 *                  id : id, 
 *               },
 *      onComplete : function(raq){
 *          alert(req.responseText);                      
 *      },
 *      onError : function(error){
 *          
 *      },
 * );
 * =================================================================
 * 
 * @version v1.1 2012-7-23
 * @author zxj198468@gmail.com
 */
function Ajax(url, args) {
    this.url = url || "";
    this.params = args.parameters || "";
    this.mime = args.mime || "text/html";
    this.onComplete = args.onComplete || this.defaultOnCompleteFunc;
    this.onLoading= args.onLoading || this.defaultOnLoadingFunc;
    this.onError = args.onError || this.defaultOnErrorFunc;
    this.method = args.method || "post";
   
    
    if (typeof(args.sync) == "undefined" || args.sync == null) { 
        this.sync = true;
    } else {
        this.sync = args.sync ? true : false; 
    }
    this.loadData();
}

//prototype
Ajax.prototype = {
    //状态
    READY_STATE_COMPLETE : 4,
    
    //创建XMLHttprequest对象
    getRequest : function () {
        var funcs = [
            function() {return new ActiveXObject('Msxml2.XMLHTTP')},
            function() {return new ActiveXObject('Microsoft.XMLHTTP')},
            function() {return new XMLHttpRequest()},
        ];
        var req = null;
        for (var i = 0; i < funcs.length; i++) {
            var f = funcs[i];
            try {
                req = f();
                break;
            } catch (e) {}
        }
        return req || false;
    },

    //参数处理
    parseParams : function () {
        if (typeof (this.params) == "string") {
            return this.params;
        } else {
            var s = "";
            for (var k in this.params) {
            s += k + "=" + this.params[k] + "&";
            }
            return s;
        }
    },

    //开始载入
    loadData : function () {
        this.req = this.getRequest();
        
        if (this.req) {
            this.onLoading();
            try {
                var loader = this;
                this.req.onreadystatechange = function () {
                    if (loader.req.readyState == loader.READY_STATE_COMPLETE) {
                        loader.onComplete.call(loader, loader.req);
                    }
                };
                this.req.open(this.method, this.url, this.sync);

                if (this.method == "post") {
                    this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                }

                if (this.req.overrideMimeType) {
                    this.req.overrideMimeType(this.mime);
                }
                this.req.send(this.method == "post" ? this.parseParams(this.params) : null);
            } catch (e) {
                this.onError.call(this, e);
            }
        }
    },

    //默认完成处理函数
    defaultOnCompleteFunc : function () {
        alert(this.req.responseText);
    },

    //默认前置函数
    defaultOnLoadingFunc : function () {
    },

    //默认错误处理函数
    defaultOnErrorFunc : function (error) {
    }
}

//举例

//Ajax的GET请求举例
function test_get(){
	var url = 'ajax.php?act=ok';
	new Ajax(url, {
	    method  : 'get',
		onComplete : function(req){
		    alert(req.responseText);
		},
		onError : function(error){
		    //alert(error);
		},
		onLoading : function(){
			//alert('GET即将开始……');
		}
	});
}

//Ajax的POST请求举例
function test_post(){
	var url = 'ajax.php';
	new Ajax(url, {
	     method : 'post',
	     parameters : { 
	                     act : 'ok', 
	                  },
	     onComplete : function(req){
	         alert(req.responseText);                      
	     },
	     onError : function(error){
	    	//alert(error);
	     },
	     onLoading : function(){
	         //alert('POST即将开始……');
	     }
	});
}