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, Mar 24 '15 at 18:45
That's because you're not sending JSON data and neither is the original $.ajax. — Musa, Mar 24 '15 at 18:47
How is `json` defined? jQuery does some magic based on what kind of data is passed in. — Kevin B, Mar 24 '15 at 18:50
Take a look at http://stackoverflow.com/questions/13735869/datatype-application-json-vs-json/ — Musa, Mar 24 '15 at 18:51
@Musa if `json` is a proper json string, he is sending json data. — Kevin B, Mar 24 '15 at 18:52
@Kevin B & @KJ Price: The exact same data that is working with the jQuery version is not with the plain ol' javascript version. All I have changed is the ajax call. My assumption is jQuery is either doing something to the `data: json` or `dataType: "json"` isn' the same as `xmlhttp.setRequestHeader("Content-Type", "application/json; charset=UTF-8");` But I don't know which. — Donavon Lerman, Mar 24 '15 at 19:09
That doesn't change the fact that i need to see how you defined it.. — Kevin B, Mar 24 '15 at 19:10
if `json` is a string, jquery will send it as such, if it is an object, jquery will send them as POST params and not JSON. Unfortunately that is further complicated by people calling objects json. — Kevin B, Mar 24 '15 at 19:10
This is how the json is defined: `var json = new Object(); json['element1'] = "value1"; json['element2'] = "value2"; json['element3'] = "value3";` this is what it looks like with JSON.stringify(json) `{"element1":"value1","element2":"value2","element3":"value3"}` — Donavon Lerman, Mar 24 '15 at 20:29

score 1 · Answer 1 · edited Mar 25 '16 at 17:41

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

Convert jQuery .ajax with dataType: json to plain javascript

Original jQuery:

Plain javascript:

1 Answers1