首頁 > web前端 > js教程 > 主體

Ajax的原生實作關於MIME類型的使用方法

不言
發布: 2018-07-02 17:02:22
原創
1636 人瀏覽過

以下為大家分享一篇Ajax的原生實作關於MIME類型的使用方法,具有很好的參考價值,希望對大家有幫助。

問題描述

下面的範例是一個Ajax的post請求的程式碼,這段程式碼在測試運行的時候,發現回傳的狀態碼為400,伺服器不能理解的請求,後來經過查看和修改,發現只需要將下面的程式碼稍微改造一下就好了

原始程式碼

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));
}
登入後複製

這兩段程式碼的差異就是,修改之後的程式碼去掉了關於data這個變數的處理以及在send中傳遞的參數變成了params這個變數

問題解惑

問題是解決了,但是我心裡的疑問卻產生了,之前在使用原生的Ajax的時候,當method為post的時候,傳遞的參數的形式是”name=123&age=32”這樣子的,那為什麼現在傳遞一個序列化的JSON物件就可以了呢?

這時候我注意到自己所加的MIME類型,也就是設定Content-type的那處,我設定的是"application/json",這樣看起來就解釋的通了,這時候我回想起之前常用的MIME型別是“application/x-www-form-urlencoded”,這種時候send方法傳遞的參數就要求是”name=123&age=32”這樣子的,到這裡,解惑完畢啦( ~ ̄▽ ̄)~

補充

順便說下405這個狀態碼,上一次見到它的時候,是我前端發送請求的時候,傳遞的參數不對,這次遇到它的時候,是因為後台還沒有添加這個請求的處理

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

原生JS寫入Ajax的請求函數功能

關於ajaxFileUpload 非同步上傳檔案的使用介紹

關於Ajax的get和post請求的介紹

以上是Ajax的原生實作關於MIME類型的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板