小编给大家分享一下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类型”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
