ajax 工具类

前端之家收集整理的这篇文章主要介绍了ajax 工具类前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

工具类:AjaxUtil.js

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();
                    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]; 
            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" === method.toUpperCase()) {
            // 如果是POST提交,设置请求头信息
            xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //发送请求
            xmlhttp.send(formateParams);
        }
    }
};

一个简单的示例:

function findUser() {
        var userid = $("userid").value;
        if (userid) {
            AjaxUtil.request({
                url:"servlet/UserJsonServlet",params:{id:userid},type:'json',callback:process
            });
        }
    }

    function process(json){
            if(json){
                $("id").innerHTML = json.id;
                $("username").innerHTML = json.username;
                $("age").innerHTML = json.age;
            }
            else{
                $("msg").innerHTML = "用户不存在";
                $("id").innerHTML = "";
                $("username").innerHTML = "";
                $("age").innerHTML = "";
            }
    }


    function $(id) {
        return document.getElementById(id);
    }

转载自:http://www.jb51.cc/article/p-hzgoictm-bca.html

原文链接:https://www.f2er.com/ajax/163321.html

猜你在找的Ajax相关文章