Javascript 使用ajax请求攻击所有链接_Javascript_Ajax_Xmlhttprequest_Dom Events_Httpwebrequest

Javascript 使用ajax请求攻击所有链接

javascript ajax

Javascript 使用ajax请求攻击所有链接,javascript,ajax,xmlhttprequest,dom-events,httpwebrequest,Javascript,Ajax,Xmlhttprequest,Dom Events,Httpwebrequest,我一直在尝试创建一个没有jQuery或任何其他库的纯函数，以便在ajax请求中转换web应用程序上的所有链接。但是你应该知道，没有成功有人能告诉我哪里出了问题吗 function ajaxify() { var content = document.getElementsByTagName('body'); var links = document.body.querySelectorAll('a'); [].forEach.call(links, function (link) {

我一直在尝试创建一个没有jQuery或任何其他库的纯函数，以便在ajax请求中转换web应用程序上的所有链接。但是你应该知道，没有成功

有人能告诉我哪里出了问题吗

function ajaxify() {
var content = document.getElementsByTagName('body');
var links = document.body.querySelectorAll('a');
[].forEach.call(links, function (link) {
    console.log(link);
    link.addEventListener('click', function (event) {
        var url = link.href;
        // Manipulate history
        window.history.pushState({}, '', url);
        var request = new XMLHttpRequest();
        request.open('GET', url, true);
        request.onload = function () {
            if (request.status == 200) {
                content[0].innerHTML = request.responseText;
            } else {
                alert('Request failed. Returned status of' + request.status);
            }
        };
        request.send();
        event.preventDefault();
    });
});

}

编辑

上述脚本不起作用的页面之一

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="img/favicon.png" type="image/png">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="css/authentication.css" type="text/css">
    <title>Web APP</title>
</head>
<body>
    <div class="wrapper">
        <div class="conteiner">
            <a href="index.html"><i class="material-icons custom-arrow-back">arrow_back</i></a>
            <img class="logomarca" src="img/logo.png">
            <form name="form" id="form" action="ForgotPassword" method="POST">
                <div class="align-form">
                    <div class="input-conteiner">
                        <input class="btn-material-style" type="email" id="email" name="email"  maxlength="37" value="" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" autocomplete="off" required>
                        <label>Email</label>
                        <span class="bar"></span>
                    </div>
                    <p class="input-subscribe feedback"></p>
                    <div class="input-subscribe" style="margin-top: 2.4em">
                        <input class="btn-material-style" id="btn-submit-email" type="submit" name="submit" value="Request new password" style="border: 0">
                    </div>
                </div>
            </form>
        </div>       
    </div>
    <footer class="footer">
        <p><span id="copyleft">©</span> 2016 - <span class="custom-color">Web APP</span></p>
    </footer>
    <script src="js/authentication.js"></script>
        ajaxify();
    </script>
</body>


网络应用
电子邮件

©2016-网络应用程序
ajaxify（）；

已解决

唯一的问题是，出于安全原因，XMLHttpRequest不允许将脚本作为DOM文本发送。所以我放弃了，现在我使用jQuery来实现这一点（

querySelectorAll（'a'））

将返回一个锚定数组。您需要对该数组进行迭代，然后向每个锚定数组添加一个锚定列表。

querySelectorAll

返回一个锚定数组，为了在节点列表中添加一个监听每个HTMLElement的事件，您需要将节点列表转换为一个数组并循环：

 var links= content[0].querySelectorAll('a');

 [].forEach.call(links, function(link) {
   link.addEventListener('click', function(event) { //code });
 });

此外，您是否尝试过以下方法：

 document.body.querySelectorAll('a');

谢谢，第一段代码对我来说很有用，但现在我有其他问题，当我进入一个页面并使用链接返回时，它会发出一个正常的请求。整个代码都很大。基本上，现在我有三个页面，第一个页面有两个链接，该函数可以正常工作。但是当我进入两个链接中的一个时，整个页面中只有一个链接回到第一个。但是当我在页面中只有一个导航链接时，ajax请求似乎不起作用。如果您仍在使用

content[0]

，并且链接不在正文的第一个子元素中，则可能找不到它们。请尝试切换到

document.body.queryselectoral（'a'）

你说得对，我更改了。但仍然不起作用。authentication.js只有ajaxify（）函数。而且，如果在ajax请求后重新加载页面，脚本似乎可以工作。