Ajax的原生實(shí)現(xiàn)關(guān)于MIME類型的使用方法
問題描述
下面的例子是一個(gè)Ajax的post請(qǐng)求的代碼,這段代碼在測(cè)試運(yùn)行的時(shí)候,發(fā)現(xiàn)返回的狀態(tài)碼為400,服務(wù)器不能理解的請(qǐng)求,后來經(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這個(gè)變量的處理以及在send中傳遞的參數(shù)變?yōu)榱藀arams這個(gè)變量
問題解惑
問題是解決了,但是我心里的疑問卻產(chǎn)生了,之前在使用原生的Ajax的時(shí)候,當(dāng)method為post的時(shí)候,傳遞的參數(shù)的形式是”name=123&age=32”這樣子的,那么為什么現(xiàn)在傳遞一個(gè)序列化的JSON對(duì)象就可以了呢?
這時(shí)候我注意到自己所加的MIME類型,也就是設(shè)置Content-type的那處,我設(shè)置的是"application/json",這樣看起來就解釋的通了,這時(shí)候我回想起之前常用的MIME類型是“application/x-www-form-urlencoded”,這種時(shí)候send方法傳遞的參數(shù)就要求是”name=123&age=32”這樣子的,到這里,解惑完畢啦(~ ̄▽ ̄)~
補(bǔ)充
順便說下405這個(gè)狀態(tài)碼,上一次見到它的時(shí)候,是我前端發(fā)送請(qǐng)求的時(shí)候,傳遞的參數(shù)不對(duì),這次遇到它的時(shí)候,是因?yàn)楹笈_(tái)還沒有添加這個(gè)請(qǐng)求的處理
以上這篇Ajax的原生實(shí)現(xiàn)關(guān)于MIME類型的使用方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
用ajax實(shí)現(xiàn)預(yù)覽鏈接可以看到鏈接的內(nèi)容
用CSS設(shè)置預(yù)覽彈出窗口的樣式、用JavaScript進(jìn)行服務(wù)器請(qǐng)求并且顯示彈出窗口,需要的朋友可以參考下2014-08-08
Ajax實(shí)現(xiàn)省市區(qū)三級(jí)級(jí)聯(lián)(數(shù)據(jù)來自mysql數(shù)據(jù)庫)
這篇文章主要為大家詳細(xì)介紹了Ajax實(shí)現(xiàn)省市區(qū)三級(jí)級(jí)聯(lián),數(shù)據(jù)來自mysql數(shù)據(jù)庫,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09
Spring MVC+ajax進(jìn)行信息驗(yàn)證的方法
AJAX 不是新的編程語言,而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。這篇文章主要介紹了Spring MVC+ajax進(jìn)行信息驗(yàn)證,需要的朋友可以參考下2019-09-09
解決瀏覽器記住ajax請(qǐng)求并能前進(jìn)和后退問題
在我們?yōu)g覽不同網(wǎng)頁的時(shí)候,我們可以通過瀏覽器的前進(jìn)、后退鍵來去到我們前后訪問過的頁面。這篇文章主要介紹了讓瀏覽器記住ajax請(qǐng)求并能前進(jìn)和后退方法(一),需要的朋友可以參考下2017-06-06

