Search code examples
javascriptajaxxmlhttprequestdom-eventshttpwebrequest

Attack all links with an ajax request

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. :(

Solution

  • 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');