下面我就為大家分享一篇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這個狀態碼,上一次見到它的時候,是我前端發送請求的時候,傳遞的參數不對,這次遇到它的時候,是因為後台還沒有添加這個請求的處理
上面是我整理給大家的,希望今後會對大家有幫助。
相關文章:
Jquery的get,post,ajax,getJSON函數使用詳解
以上是Ajax的原生實作關於MIME類型的使用方法(圖文教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!