Vanilla Javascript version of AJAX [duplicate]

Question

How can I remove the need to download a full jquery library when all I want to use is AJAX. Is there a smaller file that focuses on AJAX or is there a Vanilla Javascript version of this code?

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){

            $.ajax({
                type: 'POST',
                url: 'cookies.php',
                success: function(data) {
                    alert(data);
                }
            });
   });
});
</script>

sitepoint.com/guide-vanilla-ajax-without-jquery

Maximilian Burszley
– Maximilian Burszley

2018-06-09 16:44:29 +00:00
Commented Jun 9, 2018 at 16:44 — Maximilian Burszley
– Maximilian Burszley, Commented Jun 9, 2018 at 16:44

Ivan · Accepted Answer · 2018-06-09 16:57:09Z

56

You can use the fetch function.

Here is an example from the link:

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

edited Jun 9, 2018 at 16:57

Ivan

41.3k9 gold badges78 silver badges120 bronze badges

answered Jun 9, 2018 at 16:44

Gustavo Topete

1,3261 gold badge9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gustavo Topete Over a year ago

fetch is the vanilla version of jquery.ajax, I don't see whats the problem with that, what I did wrong??

A l w a y s S u n n y · Accepted Answer · 2018-06-09 16:56:55Z

25

You can try with XMLHttpRequest like below.

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>

<script>
function loadDoc() {

   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("demo").innerHTML = this.responseText;
       }
     };

   xhttp.open("POST", "cookies.php", true);
   xhttp.send();
}
</script>

</body>
</html>

Demo: https://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_first

Reference: https://www.w3schools.com/js/js_ajax_http_send.asp

edited Jun 9, 2018 at 16:56

answered Jun 9, 2018 at 16:51

A l w a y s S u n n y

38.8k9 gold badges68 silver badges120 bronze badges

Comments

Ivan · Accepted Answer · 2018-06-09 16:55:31Z

6

you can use build in fetch module for example

fetch('http://yourapi.com/data')
  .then(response => {
    console.log(response)
  });

edited Jun 9, 2018 at 16:55

Ivan

41.3k9 gold badges78 silver badges120 bronze badges

answered Jun 9, 2018 at 16:48

user1247071

2 Comments

Sebastian Simon Over a year ago

logging response is not really useful. You’d rather return response.text(), response.json() or something similar and log that in the next then call.

user1247071 Over a year ago

response.text() and response.json() will not show full response object with status code and headers

Collectives™ on Stack Overflow

Vanilla Javascript version of AJAX [duplicate]

3 Answers 3

1 Comment

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Linked

Related