How to use MIME types in the native implementation of Ajax

The following is an article about the use of MIME types in the native implementation of Ajax. It has a good reference value and I hope it will be helpful to everyone.

Problem description

The following example is the code for an Ajax post request. When this code is tested and run, it is found that the returned The status code is 400, which is a request that the server cannot understand. After checking and modifying it later, I found that I only need to slightly modify the following code.

Original code

var send = function (url, params, fn) {
  var me = this;
  var xhr = null;
  var data = '';
  fn = fn || function() {};
  params = params || {};
  for(var item in params) {
   data += item + '=' + params[item] + '&';
  }
  if(data[data.length - 1] == '&') {
   data = data.slice(0, data.length - 1);
  }
  if(window.XMLHttpRequest) {
   xhr = new XMLHttpRequest();
  }else if(window.ActiveXObject) {
   xhr= new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhr.open("post", url, true);
  xhr.setRequestHeader("Content-type", "application/json");
  xhr.onreadystatechange = function () {
   if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
    fn(JSON.parse(xhr.responseText));
   }
  };
  xhr.send(JSON.stringify(params));
}

The modified code

var send = function (url, params, fn) {
    var me = this;
    var xhr = null;
    fn = fn || function() {};
    params = params || {};
    if(window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
    }else if(window.ActiveXObject) {
      xhr= new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.open("post", url, true);
    xhr.setRequestHeader("Content-type", "application/json");
    xhr.onreadystatechange = function () {
      if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn(JSON.parse(xhr.responseText));
      }
    };
    xhr.send(JSON.stringify(params));
}

These two The difference between the code segments is that the modified code removes the processing of the data variable and changes the parameters passed in send to the params variable

Question Answer

The problem has been solved, but a question arises in my mind. When I used native Ajax before, when the method was post, the parameters passed were in the form of "name=123&age=32" That's it, so why is it okay to pass a serialized JSON object now?

At this time I noticed the MIME type I added, which is where the Content-type is set. I set it to "application/json", which seems to make sense. At this time I Recall that the commonly used MIME type before was "application/x-www-form-urlencoded". In this case, the parameters passed by the send method are required to be "name=123&age=32". At this point, the confusion is over ( ～￣▽￣)～

Supplement

By the way, the status code 405, the last time I saw it, it was my front-end When sending the request, the parameters passed were wrong. When I encountered it this time, it was because the background had not added processing for this request.

The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Native JS writing Ajax request function function

Introduction to the use of ajaxFileUpload asynchronous file upload

Introduction to Ajax get and post requests

##

The above is the detailed content of How to use MIME types in the native implementation of Ajax. For more information, please follow other related articles on the PHP Chinese website!