小編給大家分享一下Ajax原生如何實(shí)現(xiàn)MIME類(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)MIME類(lèi)型”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!