ajax 封装

来源：互联网发布：raysource 软件下载编辑：程序博客网时间：2024/05/22 04:25

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><script type="text/javascript">    //封装为对象    var AjaxUtil = {        //基础选项        options:{            method:"get",            url:"",            params:{},            type:'text',//返回的内容类型            callback:function(){}        },        //创建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();                        //针对某些特定版本的mozillar浏览器的BUG进行修正                        if(xmlHttp.overrideMimeType){                            xmlHttp.overrideMimeType("text/xml");                        }                    }catch (e){                        alert("浏览器不支持ajax")                    }                }            }            return xmlHttp;        },        //设置基础选项        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];                /*                if (this.options.method.toUpperCase() === "GET"){                    paramValue = encodeURIComponent(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 formatParams = ajaxObj.formateParameters.call(ajaxObj);            //请求的方式            var method = ajaxObj.options.method;            var url = ajaxObj.options.url;            if ("GET" === method.toUpperCase()){                url+="?" + formatParams;            }            //建立连接            xmlHttp.open(method, url, true);            if ("GET" ===  method.toUpperCase()){                xmlHttp.send(null);            }            else if ("POST" === method.toUpperCase()){                //如果是POST提交，设置请求头信息                xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");                xmlHttp.send(formatParams);            }        }    };//    function $(id) {        return document.getElementById(id);    }    function process(json){        if (json){            $("id").value = json.id;            $("username").value = json.username;            $("age").value = json.age;        }else{            $("msg").value = "用户不存在";            $("id").value = "";            $("username").value = "";            $("age").value = "";        }    }    function findUser() {        var userid = $("userid").value;        if (userid){            AjaxUtil.request({                url:"ajax-07.txt",                params:{id:userid},                type:'json',                callback:process            });        }    }//封装为函数    function Ajax(type, url, data, success, failed) {        //创建ajax对象        var xhr= null;        if(window.XMLHttpRequest){            xhr = new XMLHttpRequest();        }else{            xhr = new ActiveXObject('Microsoft.XMLHTTP');        }        var type = type.toUpperCase();        //用于清除缓存        var random = Math.random();        if (typeof data == 'object'){            var str = '';            for (var key in data){                str += key + '=' + data[key] + '&';            }            data = str.replace(/&$/, '');        }        if (type === 'GET'){            if(data){                xhr.open(type, url+'?'+data, true);            }else{                xhr.open('GET', url+'?t='+random, true);            }            xhr.send();        }else if(type==='POST'){            xhr.open('POST', url, true);            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');            xhr.send(data);        }        //处理返回数据        xhr.onreadystatechange = function () {            if(xhr.readyState == 4){                if (xhr.status == 200){                    success(xhr.responseText);                }else{                    if(failed){                        failed(xhr.status);                    }                }            }        }    }    //测试函数封装    var sendData = {name:'dannii', sex='f'};    Ajax('GET', 'data/data.html', sendData, function (data){        console.log(data);    }, function(err){        console.log(err);    });</script>id<input type="text" id="id" name = "id"><br>userid<input type="text" id="userid" name="userid"><br>username<input type="text" id="username" name="username"><br>msg<input type="text" id="msg" name="msg"><br><input type="button" value="test userid" onclick="findUser()"></body></html>

ajax-07.txt

{"id":"102","username":"stiff","age":34}

0 0