zoukankan      html  css  js  c++  java
  • JS 原生 AJax

    防止IE下不支持 Ajax

    <button id="btn1">请求</button>
    <button id="btn2">请求</button>
    
    <script>
        $("#btn2").click(function () {
            $.ajax({
                type: "Get",
                url: '/Home/ResponseAjax',
                data: { name: "super", age: 20 },
                success: function (res) {
                    console.info(res);
                }
            })
        })
        $("#btn1").click(function () {
            ajax({
                url: "./ResponseAjax",              //请求地址
                type: "GET",                       //请求方式
                data: { name: "super", age: 20 },        //请求参数
                dataType: "json",
                success: function (response, xml) {
                    // 此处放成功后执行的代码
                    console.info(response);
                    console.info(xml);
                },
                fail: function (status) {
                    // 此处放失败后执行的代码
                }
            });
        })
    
    
        function ajax(options) {
            options = options || {};
            options.type = (options.type || "GET").toUpperCase();
            options.dataType = options.dataType || "json";
            var params = formatParams(options.data);
    
            //创建 - 非IE6 - 第一步
            if (window.XMLHttpRequest) {
                var xhr = new XMLHttpRequest();
            } else { //IE6及其以下版本浏览器
                var xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }
    
            //接收 - 第三步
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    var status = xhr.status;
                    if (status >= 200 && status < 300) {
                        options.success && options.success(xhr.responseText, xhr.responseXML);
                    } else {
                        options.fail && options.fail(status);
                    }
                }
            }
    
            //连接 和 发送 - 第二步
            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);
            }
        }
        //格式化参数
        function formatParams(data) {
            var arr = [];
            for (var name in data) {
                arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
            }
            arr.push(("v=" + Math.random()).replace(".", ""));
            return arr.join("&");
        }
    </script>
  • 相关阅读:
    java8 Date/Time API 新的日期处理工具
    java8 Lambda 表达式和函数式接口快速理解
    java8 新特性精心整理(全)
    Git 从入门到熟练|不敢说精通
    C# Color 列表
    自动控制原理6
    forfiles命令详解
    详解SQLEXPR32_x86_CHS.exe、SQLEXPR_x86_CHS.exe、SQLEXPR_x64_CHS.exe之间的区别
    power disiagner pdb
    vs 中大括号之间垂直虚线显示
  • 原文地址:https://www.cnblogs.com/Jacob-Wu/p/6632718.html
Copyright © 2011-2022 走看看