問題描述
下面的例子是一個Ajax的post請求的代碼，這段代碼在測試運(yùn)行的時候，發(fā)現(xiàn)返回的狀態(tài)碼為400，服務(wù)器不能理解的請求，后來經(jīng)過查看和修改，發(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這個變量的處理以及在send中傳遞的參數(shù)變?yōu)榱藀arams這個變量
問題解惑
問題是解決了，但是我心里的疑問卻產(chǎn)生了，之前在使用原生的Ajax的時候，當(dāng)method為post的時候，傳遞的參數(shù)的形式是”name=123age=32”這樣子的，那么為什么現(xiàn)在傳遞一個序列化的JSON對象就可以了呢？
這時候我注意到自己所加的MIME類型，也就是設(shè)置Content-type的那處，我設(shè)置的是"application/json"，這樣看起來就解釋的通了，這時候我回想起之前常用的MIME類型是“application/x-www-form-urlencoded”，這種時候send方法傳遞的參數(shù)就要求是”name=123age=32”這樣子的，到這里，解惑完畢啦(～￣▽￣)～
補(bǔ)充
順便說下405這個狀態(tài)碼，上一次見到它的時候，是我前端發(fā)送請求的時候，傳遞的參數(shù)不對，這次遇到它的時候，是因為后臺還沒有添加這個請求的處理
以上這篇Ajax的原生實現(xiàn)關(guān)于MIME類型的使用方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:- 原生JS簡單實現(xiàn)ajax的方法示例
- 原生js實現(xiàn)ajax方法(超簡單)
