Ajax

Posted 2021-02-12 小名的同学

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax相关的知识，希望对你有一定的参考价值。

伪Ajax请求：

利用iframe进行伪造请求,利用js给iframe的src属性添加网址，iframe会给这个网址发送静态请求

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
            <p>请输入要加载的地址：<span id="currentTime"></span></p>
            <p>
                <input id="url" type="text" />
                <input type="button" value="刷新" onclick="LoadPage();">
            </p>
        </div>
        <div>
            <h3>加载页面位置：</h3>
            <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
        </div>
        <script type="text/javascript">
            function LoadPage(){
                var targetUrl =  document.getElementById(‘url‘).value;
                document.getElementById("iframePosition").src = targetUrl;
            }

        </script>
    </body>
</html>

iframe

原生Ajax：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <h1>XMLHttpRequest - Ajax请求</h1>
    <input type="button" onclick="XmlGetRequest();" value="Get发送请求" />
    <input type="button" onclick="XmlPostRequest();" value="Post发送请求" />
    <script type="text/javascript">
        function GetXHR(){
            var xhr = null;
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();   //创建对象
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;
        }

        function XmlGetRequest(){
            var xhr = GetXHR();
            xhr.onreadystatechange = function(){    //回调函数
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据，执行以下操作
                    var data = xhr.responseText;
                    console.log(data,"data");
                }
            };
            // 指定连接方式和地址----文件方式
            xhr.open(‘get‘, "/test/", true);
            // 发送请求
            xhr.send();
        }

        function XmlPostRequest(){
            var xhr = GetXHR();
            console.log("POST XHR")
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据，执行以下操作
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定连接方式和地址----文件方式
            xhr.open(‘POST‘, "/test/", true);
            // 设置请求头
            xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded; charset-UTF-8‘);
            // 发送请求
            xhr.send(‘n1=1;n2=2;‘);
        }
    </script>
</body>
</html>

ajax

流程：创建一个XMLHttpRequest对象，设置回调函数，建立连接，(Post请求，要设置请求头) ，发送数据

以上是关于Ajax的主要内容，如果未能解决你的问题，请参考以下文章

Javascript代码片段在drupal中不起作用

前端面试题之手写promise

Ajax 片段元标记 - Googlebot 未读取页面内容

执行AJAX返回HTML片段中的JavaScript脚本

javascript AJAX片段

Spring MVC 3.2 Thymeleaf Ajax 片段