快捷導(dǎo)航

Ajax的原生實(shí)現(xiàn)關(guān)于MIME類(lèi)型的使用方法

更新時(shí)間：2018年03月20日 14:49:12 作者：Dear_Mr

下面小編就為大家分享一篇Ajax的原生實(shí)現(xiàn)關(guān)于MIME類(lèi)型的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

問(wèn)題描述

下面的例子是一個(gè)Ajax的post請(qǐng)求的代碼，這段代碼在測(cè)試運(yùn)行的時(shí)候，發(fā)現(xiàn)返回的狀態(tài)碼為400，服務(wù)器不能理解的請(qǐng)求，后來(lái)經(jīng)過(guò)查看和修改，發(fā)現(xiàn)只需要將下面的代碼稍微改造一下就好了

原代碼

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

修改之后的代碼

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

這兩段代碼的差別就是，修改之后的代碼去掉了關(guān)于data這個(gè)變量的處理以及在send中傳遞的參數(shù)變?yōu)榱藀arams這個(gè)變量

問(wèn)題解惑

問(wèn)題是解決了，但是我心里的疑問(wèn)卻產(chǎn)生了，之前在使用原生的Ajax的時(shí)候，當(dāng)method為post的時(shí)候，傳遞的參數(shù)的形式是”name=123&age=32”這樣子的，那么為什么現(xiàn)在傳遞一個(gè)序列化的JSON對(duì)象就可以了呢？

這時(shí)候我注意到自己所加的MIME類(lèi)型，也就是設(shè)置Content-type的那處，我設(shè)置的是"application/json"，這樣看起來(lái)就解釋的通了，這時(shí)候我回想起之前常用的MIME類(lèi)型是“application/x-www-form-urlencoded”，這種時(shí)候send方法傳遞的參數(shù)就要求是”name=123&age=32”這樣子的，到這里，解惑完畢啦(～￣▽?zhuān)?～

補(bǔ)充

順便說(shuō)下405這個(gè)狀態(tài)碼，上一次見(jiàn)到它的時(shí)候，是我前端發(fā)送請(qǐng)求的時(shí)候，傳遞的參數(shù)不對(duì)，這次遇到它的時(shí)候，是因?yàn)楹笈_(tái)還沒(méi)有添加這個(gè)請(qǐng)求的處理

以上這篇Ajax的原生實(shí)現(xiàn)關(guān)于MIME類(lèi)型的使用方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: