Convert jQuery .ajax with dataType: json to plain javascript

Question

I can use jQuery for fast drafting / prototyping but I can not YET implement it on our production servers.

I need assistance with getting the plain javascript version of the following to work. In the plain javascript version submit.php is not receiving the json data.

Original jQuery:

  $.ajax({
      type: "POST",
      url: "submit.php",
      data: json,
      dataType: "json",
      success: function(json){
        alert('success');
      }
  });

Plain javascript:

  var xmlhttp;

  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
  }
  else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.open("POST","submit.php",true);
  xmlhttp.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
  xmlhttp.send(json);
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {                 
      alert('success');
    }
  }

So it works using jQuery but submit.php is not recognizing data sent via plain javascript? — KJ Price
– KJ Price, Commented Mar 24, 2015 at 18:45
That's because you're not sending JSON data and neither is the original $.ajax. — Musa
– Musa, Commented Mar 24, 2015 at 18:47
How is json defined? jQuery does some magic based on what kind of data is passed in. — user400654
– user400654, Commented Mar 24, 2015 at 18:50

halfer · Accepted Answer · 2016-03-25 17:41:17Z

I found an answer!! Hope others find it useful.

jQuery adds default headers (http://api.jquery.com/jquery.ajax/):

Content-Type: 'application/x-www-form-urlencoded; charset=UTF-8'
X-Requested-With: XMLHttpRequest

jQuery converts the data (http://api.jquery.com/jquery.ajax/):

"It is converted to a query string, if not already a string."

jQuery then sends the request as a regular POST query string.

I found the needed snippet to convert from json to a POST query string in Plain JavaScript here: https://github.com/oyvindkinsey/easyXDM/issues/199

Here is the updated plain JavaScript code:

var xmlhttp;

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.open("POST","submit.php",true);
xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    alert('success');
  }
}

xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");

var pairs = [];
for (var key in json) {
  pairs.push(encodeURIComponent(key) + "=" + encodeURIComponent(json[key]));
}

var data = pairs.join("&");

xmlhttp.send(data);

Collectives™ on Stack Overflow

Convert jQuery .ajax with dataType: json to plain javascript

Original jQuery:

Plain javascript:

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Original jQuery:

Plain javascript:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related