• JavaScript AJAX原生写法


    <!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <meta http-equiv="X-UA-Compatible" content="ie=edge" />
            <title>JavaScript AJAX原生写法 面试题</title>
        </head>
    
        <body>
            <script type="text/javascript">
                var Ajax = {
                    get: function(url, fn) {
                        //创建XMLHttpRequest对象
                        var xhr = new XMLHttpRequest();
                        //true表示异步
                        xhr.open('GET', url, true);
                        xhr.onreadystatechange = function() {
                            // readyState == 4说明请求已完成
                            if(xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
                                //responseText:从服务器获得数据
                                fn.call(this, xhr.responseText);
                            }
                        };
                        xhr.send();
                    },
                    post: function(url, data, fn) { //datat应为'a=a1&b=b1'这种字符串格式
                        var xhr = new XMLHttpRequest();
                        xhr.open("POST", url, true);
                        // 添加http头,发送信息至服务器时内容编码类型
                        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                        xhr.onreadystatechange = function() {
                            if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
                                fn.call(this, xhr.responseText);
                            }
                        };
                        xhr.send(data);
                    }
                }
            </script>
        </body>
    
    </html>
    复制代码

    作者:孟繁贵 Email:meng010387@126.com 期待共同进步!

  • 相关阅读:
    request:getParameter和getAttribute区别
    JSP登录页面大小
    单例模式详情
    关于HTML的总结
    遍历HashMap的四种方法
    三层开发原则
    java日期
    oracle6
    tomcat
    Linux命令
  • 原文地址:https://www.cnblogs.com/shaozhu520/p/11340010.html
Copyright © 2020-2023  润新知