Ajax的原生实现关于MIME类型的使用方法
时间:2019-04-13
本文章向大家介绍Ajax的原生实现关于MIME类型的使用方法,主要包括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类型的使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- Hive 时间转换函数使用心得
- Flume-Hbase-Sink针对不同版本flume与HBase的适配研究与经验总结
- 利用Flume 汇入数据到HBase:Flume-hbase-sink 使用方法详解
- 浅谈保证软件工程质量的一些心得体会
- 基于ELK的nginx-qps监控解决方案
- 2017年年度最烂密码排名
- 字符串方法汇总(三)
- 周鸿祎:“大安全”网络时代 需要AI大数据的技术支持
- 爆料:对扫码支付下手后,据说央行接下来要提高备付金,目标比例42%
- 回顾2017年5大科技突破,“时间晶体”充满想象!
- 1宽币=883?山本宽称要发行自己的数字货币
- 十种深度学习算法要点及代码解析
- 王健林旗下万达网科被曝大裁员 总裁出面说话了
- lodash源码分析之缓存方式的选择
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 死信队列的消息处理方案
- 【Ceph】Rook 中使用 External Cluster 的方式管理外部集群
- Redis排行榜的设计与实现
- 血的教训 | 一次订单号重复的事故差点被开除
- 60分钟看懂HMM的基本原理
- R语言确实会蛮耗费磁盘空间哦
- 很多时候你就是不知道如何提问
- seurat标准流程实例之2个10x样本的项目(GSE135927数据集)
- 使用 Jenkins 和 Ansible 实现 CI/CD
- 太刺激了,面试官让我手写跳表,而我用两种实现方式吊打了TA!
- 被 Google 选择的下一代数据面 Cilium 是什么 - 上手实践
- K8S 生态周报| 是时候从 k8s v1.16 升级了
- ESP8266(一)| 基于OneNet的温度采集显示系统
- 隐秘的 MySQL 类型转换
- 对Jenkinsfile语法说不,开源项目Jenkins Json Build挺你