Attack all links with an ajax request

Question

I've been trying create a pure function without jQuery or any other libraries to transform all links on my web app in an ajax request. But as you should know without success.

Can someone tell me where I'm going wrong?

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();
    });
});

}

Edit

One of pages that above script does not works

<!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>

Solved

The only problem is XMLHttpRequest does not let send script as DOM text for security reasons. So I gave up and now I'm using jQuery to do that. :(

score 0 · Answer 1 · answered Feb 06 '17 at 00:47

0

querySelectorAll('a') will return an array of anchors. You need to iterate over that and then addEventListener to each one.

answered Feb 06 '17 at 00:47

JohanP

5,252
2
24
34

score 0 · Accepted Answer · answered Feb 06 '17 at 00:49

0

querySelectorAll returns a NodeList, in order to add an event listening onto each HTMLElement within the NodeList you'll need to convert the NodeList to an array and loop through it:

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

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

Also, have you tried this:

 document.body.querySelectorAll('a');

answered Feb 06 '17 at 00:49

stephenlcurtis

180
1
7

Thanks, the first snippet code works for me but now I have other problem, when I into in a page and use the link to back it makes a normal request. – Paulo Roberto Feb 06 '17 at 01:17
It's large the whole code. Basically, for now I have three pages, the first one has two links and the function works fine for it. But when I into in one of two links has only one link in the whole page that back to first one. But the ajax request does not seem to work when I have only one navigation link in the page. – Paulo Roberto Feb 06 '17 at 15:00
If you're still using `content[0]` and the links aren't in the body's first child element, perhaps it isn't finding them. Try switching to `document.body.querySelectorAll('a');` – stephenlcurtis Feb 06 '17 at 17:48
You're right, I change that. But still does not work. – Paulo Roberto Feb 06 '17 at 18:51
authentication.js has only ajaxify() function. And it seems that script works if page is reload after ajax request. – Paulo Roberto Feb 07 '17 at 16:04
I will set your answer as correct because I discovered that spec XMLHttpRequest does not let send script as DOM text for security reasons. Thanks for help! – Paulo Roberto Feb 10 '17 at 19:53
Glad you found the problem! – stephenlcurtis Feb 12 '17 at 00:10

Attack all links with an ajax request

2 Answers2