convert jquery to pure javascript in ajax

Question

I am totally confused with ajax methods. I am new to ajax ajaj(asynchronous javascript and json). Can anyone help me or give any idea how to implement ajax, GETajax, POSTajax in javascript like

$.ajax({
    method: "POST",
    url: "some.php",
    data: { name: "John", location: "Boston" }
}).done(function( msg ) {
     alert( "Data Saved: " + msg );
   }); // ajax


$.get( "ajax/test.html", function( data ) {
   $( ".result" ).html( data );
   alert( "Load was performed." );
 }); // getajax


$.post( "ajax/test.html", function( data ) {
   $( ".result" ).html( data );
}); //postajax

Well the jQuery source code is available as a free download - have you tried reading the relevant parts? — nnnnnn, Jun 29 '15 at 11:12
[this site](http://vanilla-js.com/) provides examples of vanillaJS, including AJAX. — Laurent S., Jun 29 '15 at 11:14
[**XMLHttpRequest**](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) — adeneo, Jun 29 '15 at 11:15
@nnnnnn—you're expecting someone with rep of 9 to decipher jQuery from the source code? Surely the [*jQuery documentation*](http://api.jquery.com/?s=.ajax) would be a better place to start. — RobG, Jun 29 '15 at 11:18
@RobG - A low rep doesn't mean low ability. The jQuery documentation doesn't explain how those functions work, it just explains how to call them. — nnnnnn, Jun 29 '15 at 11:24
like Common.prototype.ajax = function(method, url, data, callback) {}; Common.prototype.ajaxGet = function(url, callback) {}; Common.prototype.ajaxPost = function(url, data, callback) {}; — appu, Jun 29 '15 at 11:26
@nnnnnn—the OP asked a question a few days ago starting with "[*I am completely new to the Javascript*](http://stackoverflow.com/questions/30883850/basic-calculator-event-binding-using-pure-javascript)". Lucky guess… ;-) — RobG, Jun 29 '15 at 13:29

Emmanuel Delay · Accepted Answer · 2015-06-29T12:08:58.410

Yes, you should try writing an own ajax function. Don't start with jQuery, start with var http_request = new XMLHttpRequest();

Put it in a function, add functionality ... Here is one of my versions

<input type="button" onclick="button_click()" value="CLICK">
<div id="data"></div>
<script>
function button_click() {
  // example of use
  ajax({
    success: receiveNextLocations,
    url: 'ajax.php'
  });
  function receiveNextLocations(data) {
    document.getElementById('data').innerHTML = data;
  }
}

// ajax function that looks a bit like jQuery $.ajax
// minimal code for what I need; not dummy proof, no error handling ...
// feel free to extend this
var http_request = new XMLHttpRequest();
function ajax(options) {
  http_request.open(options.type || 'GET', options.url, true);
  http_request.send(options.data || null);
  http_request.onreadystatechange = function() {
    if (http_request.readyState == 4) {
      if (http_request.status == 200) {
        var type = options.dataType || '';
        switch (type.toLowerCase()) {
          default: 
            options.success(http_request.responseText);
            break;
          case 'json': 
            options.success(JSON.parse(http_request.responseText));
            break;
        }
      }
    }
  }
}
</script>

convert jquery to pure javascript in ajax

1 Answers1

Linked