Ajax的原生实现关于MIME类型的使用方法
2018-03-20 14:49
671 查看
问题描述
下面的例子是一个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类型的使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Ajax的原生实现关于MIME类型的使用
- Ajax实现用户登录验证--原生JavaScript使用POST方法
- .net 3.0+关于实现IEnumerable的类型的扩展方法的使用一
- 习惯了使用jQuery的ajax方法,看看原生js使用xmlhttpRequest实现ajax请求
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(9):服务器端和客户端数据类型的自动转换:DataTable和DataSet
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(10):服务器端和客户端数据类型的自动转换:以XML方式序列化数据、小结
- AJAXPRO.NET中使用自定类型集合的方法
- 在asp.net AJAX客户端使用复杂数据类型方法
- Hibernate使用原生sql返回Map类型结果集的方法
- 使用 jquery + json 实现ajax的方法
- 在Ajax中使用Flash实现跨域数据读取的实现方法
- 快速上手,使用 JS 配合XML-RPC(JSP)实现AJAX类型应用
- 使用jquery+json实现ajax的方法
- 关于Asp.net ajax客户端使用服务器端类型:GenerateScriptTypeAttribute
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(10):服务器端和客户端数据类型的自动转换:以XML方式序列化数据、小结
- 使用jquery+json实现ajax的方法
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(8):服务器端和客户端数据类型的自动转换:数组类型
- 关于AJAX中mootools方法的使用
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(9):服务器端和客户端数据类型的自动转换:DataTable和DataSet
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(9):服务器端和客户端数据类型的自动转换:DataTable和DataSet