Ajax的原生实现关于MIME类型的使用

最新推荐文章于 2025-06-13 16:41:05 发布

原创最新推荐文章于 2025-06-13 16:41:05 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #ajax #post #mime #函数

JavaScript 专栏收录该内容

34 篇文章

订阅专栏

本文探讨了在使用Ajax进行POST请求时遇到的问题，原始代码导致服务器无法理解请求。通过修改代码并设置正确的MIME类型为"application/json"，问题得到解决。文章解释了"application/x-www-form-urlencoded"和"application/json"两种MIME类型在参数传递上的区别，并提到了HTTP状态码415在不同场景下的含义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

下面的例子是一个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”这样子的，到这里，解惑完毕啦(～￣▽￣)～