首页 > Web开发 > 详细

AJAX的封装

时间:2015-11-24 22:00:29      阅读:248      评论:0      收藏:0      [点我收藏+]

封装为对象

<script>
    var AjaxUtil = {
        //基础选项
        options:{
            method : "get", //get ,post
            url : "", //请求的路径 required
            params : {}, //请求的参数
            type : "text", //返回的内容类型,text,xml,json
            callback : function(){} //回调函数 required
        },
        
        //创建XMLHttpRequest对象
        createRequest : function(){
            var xmlhttp;
            try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //IE6以上版本
            }catch(e){
                try{
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE6以下版本
                }catch(e){
                    try{
                        xmlhttp = new XMLHttpRequest();
                    }catch(e){
                        alert("Your browser is not support AJAX");
                    }
                }
            }
        },
        
        //设置基础选项
        setOptions : function(newOptions){
            for (var pro in newOptions){
                this.options[pro] = newOptions[pro];
            }
        },
        
        //格式化请求参数
        formateParameters : function(){
            var paramsArray = [];
            var params = this.options.params;
            for (var pro in params){
                var paramValue = params[pro];
                paramsArray.push(pro + "=" + paramValue);
            }
            return paramsArray.join("&");
        },
        
        //状态改变的处理
        readystatechange : function(xmlhttp){
            //获取返回值
            var returnValue;
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                switch(this.options.type){
                    case "xml":
                        returnValue = xmlhttp.responseXML;
                        break;
                    case "json":
                        var jsonText = xmlhttp.responseText;
                        if(jsonText){
                            returnValue = eval("(" + jsonText + ")");
                        }
                        break;
                    default:
                        returnValue = xmlhttp.responseText;
                        break;
                }
                
                if (returnValue){
                    this.options.callback.call(this,returnValue);
                }else{
                    this.options.callback.call(this);
                }
            }
        },
        
        //发送Ajax请求
        request : function(options){
            var ajaxObj = this;
            
            //设置参数
            ajaxObj.setOptions.call(ajaxObj,options);
            
            //创建XMLHttpRequest对象
            var xmlhttp = ajaxObj.createRequest.call(ajaxObj);
            
            //设置回调函数
            xmlhttp.onreadystatechange = function(){
                ajaxObj.readystatechange.call(ajaxObj,xmlhttp);
            };
            
            //格式化参数
            var formateParams = ajaxObj.formateParameters.call(ajaxObj);
            
            //请求的方式
            var method = ajaxObj.options.method;
            var url = ajaxObj.options.url;
            
            if("GET" === method.toUpperCase()){
                url += "?" + formateParams;
            }
            
            //建立连接
            xmlhttp.open(method,url,true);
            
            if("GET" === method.toUpperCase()){
                xmlhttp.send(null);
            }else if{
                //如果是POST提交,设置请求头信息
                xmlhttp.setRequestHeader("Content-Type",
                    "application/x-www-form-urlencoded");
                xmlhttp.send(formateParams);
            }
        }
    };
</script>

 

AJAX的封装

原文:http://www.cnblogs.com/zcynine/p/4992913.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!