下面小编就为大家分享一篇Ajax的原生实现关于MIME类型的使用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

问题描述

下面的例子是一个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类型的使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

最新资讯
苹果新机贵:美国运营商推“买第二部减700美元”活动

苹果新机贵:美国运营

苹果的iPhone XS和XS Max预订在美国已经开放,无线运营
流量巨兽拼多多转型 成为新巨头还是下一个聚美优品?

流量巨兽拼多多转型

拼多多的快速崛起,能否像市值反映的那样打破电商格局?
苹果回应iTunes内容意外消失问题:可能是切换区域

苹果回应iTunes内容意

有用户表示,苹果不声不响就删除了他iTunes帐户中已购买
郭明錤:Apple Watch 4预订超预期 iPhone XS需求低迷

郭明錤:Apple Watch 4

郭明錤预测,2018年Apple Watch的出货量将达到1800万台,
离开华为三年,我才真正认同狼性文化

离开华为三年,我才真正

正如直到今天,我才真正理解、并从心底认同了华为狼性文
新蛋赴美上市,电商老大哥的血泪失败史

新蛋赴美上市,电商老大

美蛋飞跃,中蛋附庸。
最新文章
ajax上传多图到php服务器的方法

ajax上传多图到php服

这篇文章主要为大家详细介绍了ajax上传多图到php服务
ajax上传图片到PHP并压缩图片显示的方法

ajax上传图片到PHP并

这篇文章主要为大家详细介绍了ajax上传图片到PHP并压
AJAX+Servlet实现的数据处理显示功能示例

AJAX+Servlet实现的数

这篇文章主要介绍了AJAX+Servlet实现的数据处理显示功
ajax判断后端返回的数据是否为null的方法

ajax判断后端返回的数

今天小编就为大家分享一篇ajax判断后端返回的数据是否
基于ajax后台返回的数据为空前台显示出现undefined的解决方法

基于ajax后台返回的数

今天小编就为大家分享一篇基于ajax后台返回的数据为空
Ajax实现图片上传并预览功能

Ajax实现图片上传并预

这篇文章主要介绍了Ajax实现图片上传并预览,需要的朋