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

最新资讯
苹果或曾计划发布金色款iPhone X

苹果或曾计划发布金色

据该文件送审的时间推测,苹果本来计划在去年九月份发布
从什么时候起,你玩游戏开始考虑时间成本了?

从什么时候起,你玩游戏

于是,虽然现在游戏已经是消费成本最低的娱乐之一,但玩游
印度创企Milkbasket,靠什么在杂货电商领域脱颖而出

印度创企Milkbasket,靠

当你打开冰箱发现第二天需要喝的牛奶已经没有了或者你
中美贸易战升级,对哪国CPI影响更大?

中美贸易战升级,对哪国

就通胀影响而言,特朗普挑起的中美贸易战如果全面开打,真
美团买摩拜买的是什么?

美团买摩拜买的是什么

美团买的是街头的自行车吗?
Facebook 深陷泥潭,扎克伯格打不好的广告牌

Facebook 深陷泥潭,扎

每一个在互联网世界里走过一遭的人,谁都别想全身而退。
最新文章
利用ajax提交form表单到数据库详解(无刷新)

利用ajax提交form表单

这篇文章主要给大家介绍了关于利用ajax提交form表单到
ajax动态赋值echarts的实例(饼图和柱形图)

ajax动态赋值echarts

下面小编就为大家分享一篇ajax动态赋值echarts的实例(
纯javascript的ajax实现php异步提交表单的简单实例

纯javascript的ajax实

下面小编就为大家带来一篇纯javascript的ajax实现php
深入浅析Jsonp解决ajax跨域问题

深入浅析Jsonp解决aja

这篇文章主要介绍了深入浅析Jsonp解决ajax跨域问题的
Ajax跨域问题的解决办法汇总(推荐)

Ajax跨域问题的解决办

本文给大家分享多种方法解决Ajax跨域问题,非常不错具有
完美解决ajax访问遇到Session失效的问题

完美解决ajax访问遇到

下面小编就为大家带来一篇完美解决ajax访问遇到Sessio