您当前的位置:首页 > 网站建设 > ajax
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

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

51自学网 2022-02-21 10:51:32
  ajax

问题描述

下面的例子是一个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”这样子的,到这里,解惑完毕啦(~ ̄
下载地址:
ajax动态赋值echarts的实例(饼图和柱形图)
通过Ajax进行Post提交Json数据的方法

万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。