小編給大家分享一下Ajax原生如何實現MIME類型,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創新互聯建站-專業網站定制、快速模板網站建設、高性價比于田網站開發、企業建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式于田網站制作公司更省心,省錢,快速模板網站建設找我們,業務覆蓋于田地區。費用合理售后完善,10多年實體公司更值得信賴。
問題描述
下面的例子是一個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這個狀態碼,上一次見到它的時候,是我前端發送請求的時候,傳遞的參數不對,這次遇到它的時候,是因為后臺還沒有添加這個請求的處理
以上是“Ajax原生如何實現MIME類型”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創新互聯行業資訊頻道!
本文名稱:Ajax原生如何實現MIME類型
文章URL:http://www.2m8n56k.cn/article32/iesopc.html
成都網站建設公司_創新互聯,為您提供手機網站建設、網站導航、、自適應網站、搜索引擎優化、ChatGPT
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:[email protected]。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯