• 原生AJAX的封装


    /**调用AJAX
    ajaxPlug.openajax({
            url: "./TestXHR.aspx",              //请求地址
            type: "POST",                       //请求方式
            data: { name: "super", age: 20 },        //请求参数
            dataType: "json",
            success: function (response, xml) {
                // 此处放成功后执行的代码
            },
            errorEvent: function (status) {
                // 此处放失败后执行的代码
            }
       });
    **/
    
    (function(window,undefined){
        var ajaxPlug=function(){};
        ajaxPlug.prototype = {
                openajax:function(options){
                    options.type = (options.type || "GET").toUpperCase();
                    options.dataType = options.dataType || "json";
                    var params = this.formatParams(options.data);
                    //创建 - 非IE6 - 第一步
                    if (window.XMLHttpRequest) {
                        var xhr = new XMLHttpRequest();
                    } else { //IE6及其以下版本浏览器
                        var xhr = new ActiveXObject('Microsoft.XMLHTTP');
                    };
                    //连接 和 发送 - 第二步
                    if (options.type == "GET") {
                        xhr.open("GET", options.url + "?" + params, true);
                        xhr.send(null);
                    } else if (options.type == "POST") {
                        xhr.open("POST", options.url, true);
                        //设置表单提交时的内容类型
                        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                        xhr.send(params);
                    }
                    //接收 - 第三步
                    if(xhr.readyState == 4) {
                        var status = xhr.status;
                        if (status >= 200 && status < 300) {
                            options.success && options.success(xhr.responseText, xhr.responseXML);
                        } else {
                            options.errorEvent && options.errorEvent(status);
                        }
                    };
                    
                },
                formatParams:function(data){
                    var arr = [];
                    for (var name in data) {
                        arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
                    }
                    arr.push(("v=" + Math.random()).replace(".",""));
                    return arr.join("&");
                }
                
        }
        window.ajaxPlug=ajaxPlug;
    })(window,undefined);
    var ajaxPlug= new ajaxPlug();
    
    ajaxPlug.openajax({
            url: "./TestXHR.aspx",              //请求地址
            type: "POST",                       //请求方式
            data: { name: "super", age: 20 },        //请求参数
            dataType: "json",
            success: function (response, xml) {
                // 此处放成功后执行的代码
            },
            
           errorEvent: function (status) {
                // 此处放失败后执行的代码
            }
       });
  • 相关阅读:
    微博那点事(2)
    微博那点事(1)
    Netty断线重连
    高效沟通技巧
    Latex 公式在线可视化编辑器
    RPC框架原理与实现
    Java 静态代理与动态代理
    程序员主管之路(1)
    MarkDown 常用语法教程
    Solr vs. Elasticsearch谁是开源搜索引擎王者
  • 原文地址:https://www.cnblogs.com/binmengxue/p/6406352.html
Copyright © 2020-2023  润新知