封装的一个Ajax小框架

在履历了Jsp实训的惨痛教训后,特意花了点时间学习Ajax,学完后自我感觉良好,于是写了如下一个小框架:   /** * frameAjax * * 参数: * paramsObj: Json * required params: * type:请求...

在履历了Jsp实训的惨痛教训后,特意花了点时间学习Ajax,学完后自我感觉良好,于是写了如下一个小框架:  

/**
* frameAjax 
* 
* 参数:
* paramsObj: Json
* required params:
* type:请求参数类型(String)
* url:请求地址(String)
* data:请求参数(Json),data可为空值。
* success:请求回调(Function)
* async:示意请求是否异步处置。默以为true,示意异步,可省略不写。
* 
*/

(function () {
    function frameAjax(paramsObj) {
        //处置请求参数
        var arr = [];
        for (var pro in paramsObj.data) {
            arr.push(pro + '=' + paramsObj.data[pro]);
        }
        var data = arr.join("&");  //用“&”拼接请求参数
        var async = true; //默认异步
        if (paramsObj.async) {  //判断是否异步处置
            async = paramsObj.async;
        }

        //建立Ajax引擎工具
        var ajax = getAjax();
        //复写onreadystatement函数
        ajax.onreadystatechange = function () {
            //判断Ajax状态码
            if (ajax.readyState == 4) {
                //判断响应状态码
                if (ajax.status == 200) {
                    if (paramsObj.success) {
                        paramsObj.success(ajax);
                    }
                } else if (ajax.status == 404) {
                    console.error("请求资源不存在");
                } else if (ajax.status == 500) {
                    console.error("服务器忙碌");
                }
            }
        }

        //发送请求
        if (paramsObj.type.toLowerCase() == "get") {
            ajax.open("get", paramsObj.url + (data == null ? "" : "?" + data), async);
            ajax.send(null);
        } else if (paramsObj.type.toLowerCase() == "post") {
            ajax.open("post", paramsObj.url, async);
            ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            ajax.send(data);
        } else {
            console.log("请求类型错误");
        }
    }

    //获取请求工具
    function getAjax() {
        var ajax;
        if (window.XMLHttpRequest) { //火狐
            ajax = new XMLHttpRequest();
        } else if (window.ActiveXObject) { //IE
            ajax = new ActiveXObject("Msxml2.XMLHTTP");
        }
        return ajax;
    }
    //将框架封装于window工具中
    window.frameAjax = frameAjax;
}())


思源资源网:分类流动

1.阿里云: 本站现在使用的是阿里云主机,平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各种产物的最新流动,优惠券领取点击进入

3.广告同盟: 整理了现在主流的广告同盟平台,若是你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/7463

  • 发表于 2021-02-12 09:55
  • 阅读 ( 238 )
  • 分类:互联网

0 条评论

请先 登录 后评论
25i
25i

699 篇文章

你可能感兴趣的文章

相关问题