How to use MIME types in the native implementation of Ajax (graphic tutorial)

Below I will share with you 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));
}

The difference between these two pieces of code is that the modified code removes the processing of the data variable and the information passed in send The parameter changed to the variable params

Problem Solved

The problem was solved, but questions arose in my mind. I used it before In native Ajax, when the method is post, the passed parameters are in the form of "name=123&age=32", so why is it OK 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 has not added the processing of this request.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Jquery’s get, post, ajax, getJSON function usage details

ajaxRequest operation return data sequence

JS is based on ajaxUse of operation information

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