Implementation of native Ajax MIME types (with code)

This time I will bring you the implementation of MIME types for native Ajax (with code). What are the precautions for implementing MIME types for native Ajax? The following is a practical case, let's take a look.

Problem Description

The following example is an Ajax

post request code, this code is running under test At that time, I found that the returned status code was 400, which was a request that the server could not understand. After checking and modifying it, 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));
}

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 has been removed Regarding the processing of the

variable of data and the parameters passed in send have become the variable of params

Question solving

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

object?

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 a request, the parameters passed are wrong. When I encountered it this time, it was because the background has not added processing for this request.

I believe you have mastered the method after reading the case in this article. Please pay attention for more exciting things. Other related articles on php Chinese website!

Recommended reading:

How to write the regular expression to determine the format of ID card and bank card number

How to verify the regular expression of JS Non-zero positive integer

The above is the detailed content of Implementation of native Ajax MIME types (with code). For more information, please follow other related articles on the PHP Chinese website!