资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/最合适的Ajax内容编码类型

最合适的Ajax内容编码类型

_Dreams / 1301人阅读

摘要：引入是指发送信息至服务器时的内容编码类型，用于表明发送数据流的类型，服务器根据编码类型使用特定的解析方式，获取数据流中的数据。内容编码类型的作用，有点像本地文件的后缀名。问题来了发送请求最合适的内容编码类型是什么常见的这是默认的提交类型。

最合适的Ajax内容编码类型

原文地址:我的博客

背景

在公司开发的一个页面的Ajax请求使用了contentType:application/json，被后台的同事要求用x-www-form-urlencoded,撕逼撕不过他，赶紧回来学学知识。

引入

contentType是指http/https发送信息至服务器时的内容编码类型，contentType用于表明发送数据流的类型，服务器根据编码类型使用特定的解析方式，获取数据流中的数据。内容编码类型的作用，有点像本地文件的后缀名。

问题来了

发送Ajax请求最合适的内容编码类型是什么？

常见的contentType x-www-form-urlencoded

这是Jquery/Zepto Ajax默认的提交类型。最简例子为：

let userInfo = {
 name: "CntChen",
 info: "Front-End",
}

$.ajax({
  url: "https://github.com",
  type: "POST",
  data: userInfo,
  success: (data) => {},
});

此时默认的提交的contentType为application/x-www-form-urlencoded,此时提交的数据将会格式化成：

name=CntChen&info=Front-End

HTML的form表单默认的提交编码类型也是x-www-form-urlencoded,可能这就是Jquery/Zepto等类库(其实是Ajax：XMLHttpRequest)也默认使用contentType:x-www-form-urlencoded的原因，毕竟表单的历史比Ajax早多了。--我猜的，待验证

如果请求类型type是GET,格式化的字符串将直接拼接在url后发送到服务端；如果请求类型是POST，格式化的字符串将放在http body的Form Data中发送。

json

使用json内容编码发送数据，最简例子为：

let userInfo = {
 name: "CntChen",
 Info: "Front-End",
}

$.ajax({
  url: "https://github.com",
  contentType: "application/json",
  type: "POST",
  data: JSON.stringify(userInfo),
  success: (data) => {},
});

最主要的不同有3点：

需要显式指定contentType为application/json，覆盖默认的contentType

需要使用JSON.stringify序列化需要提交的数据对象，序列化的结果为：

{"name":"CntChen","info":"Front-End"}

提交的类型不能为GET,使用GET的话，数据会在url中发送，此时就无法以json字符串的编码发送

multipart/form-data 
When you are writing client-side code, all you need to know is use multipart/form-data when your form includes any < input type="file" > elements.

-- multipart/form-data

multipart/form-data主要用于传输文件数据的。

JS对象编码

对于扁平的参数对象，使用x-www-form-urlencoded或json并没有大的差别，后台都可以处理成对象，并且数据编码后的长度差别不大。
但是对于对象中嵌套对象，或对象字段包含数组，此时两种内容编码方式就有较大差别。

格式化demo

对象嵌套 
{
    userInfo :{
     name: "CntChen",
     info: "Front-End",
     login: true,
    },
}

to x-www-form-urlencoded (1)

userInfo[name]=CntChen&userInfo[info]=Front-End&userInfo[login]=true

to json (2)

{"userInfo":{"name":"CntChen","Info":"Front-End","login":true}}
对象字段为数组 
{
    authors:[
      {
        name: "CntChen",
        info: "Front-End",
      },
      {
        name: "Eva",
        info: "Banker",
      }
    ],
}

to x-www-form-urlencoded (3)

authors[0][name]=CntChen&authors[0][info]=Front-End&authors[1][name]=Eva&authors[1][info]=Banker

to json (4)

{"authors":[{"name":"CntChen","info":"Front-End"},{"name":"Eva","info":"Banker"}]}

可见：x-www-form-urlencoded是先将对象铺平，然后使用key=value的方式，用&作为间隔。对于嵌套对象的每个字段，都要传输其前缀，如(1)中的userInfo重复传输了3次;(3)中authors传输了4次。
如果对象是多重嵌套的，或者嵌套对象的字段较多，x-www-form-urlencoded会产生更多冗余信息。同时，x-www-form-urlencoded可读性不如json字符串。

回答问题：json最好 较小的传输量

从前文可以看出，使用json字符串的形式，可以减少冗余字段的传输，减少请求的数据量。

补充：可能你会觉得(4)中数组内的name和info也传输了多次，是不是也存在冗余？其实这不是冗余。因为对数组中的各对象，并不要求其具有相同的字段（数组中的对象并不是结构化的），所以不能忽略“相同”的字段名。使用x-www-form-urlencoded编码方式，数组内对象的字段也是重复传输。
请求与返回统一

目前许多前后端交互的返回数据是json字符串，这可能是考虑较小的传输量而作出的选择。同时，ES3.1添加了JSON对象，许多浏览器可以直接使用JSON对象，可以将json字符串解析为JS对象(JSON.parse),将JS对象编码为json字符串（JSON.stringify）;
所以使用json编码请求数据，其编码解码非常方便，并且可以保持与后台返回数据的格式一致。
一致是一件很美好的事情。

框架的支持

目前Mvvm的前端框架如React，网络请求通常是提交一个JS对象(传输的时候编码为json字符串)。后台服务器如Koa，接收请求和响应的数据是json字符串。

可读性高

可读性高是json格式自带buff。

结论

赶紧使用contentType=applications/json。

References

Ajax

http://css88.com/doc/zeptojs_...$.ajax

x-www-form-urlencoded VS json - Pros and Cons. And Vulns.

http://homakov.blogspot.in/20...

What does enctype="multipart/form-data" mean?

http://stackoverflow.com/ques...

Can I use JSON

http://caniuse.com/#search=JSON

JSON

http://www.json.org/
END
云服务器 GPU云服务器 js ajax返回的数据类型 最常见的服务器类型 AJAX内容 webrtc编码类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90957.html

相关文章

  • 从源码看 Promise 概念与实现

    摘要：从源码看概念与实现是异步编程中的重要概念，它较好地解决了异步任务中回调嵌套的问题。这些概念中有趣的地方在于，标识状态的变量如都是形容词，用于传入数据的接口如与都是动词，而用于传入回调函数的接口如及则在语义上用于修饰动词的副词。 从源码看 Promise 概念与实现 Promise 是 JS 异步编程中的重要概念，它较好地解决了异步任务中回调嵌套的问题。在没有引入新的语言机制的前提下，这...

    kel 评论0 收藏0

  • Ajax技术细节

    摘要：状态码，未发送，创建对象，默认值为执行当前请求已经发送，并且已经接收到服务器端返回的相应头信息响应主体内容正在返回相应主体内容已经返回到客户端网络状态码网络状态码，记录当前服务器返回信息的状态标识成功状态以开头也表示成功，但服务器端做了特殊 Ajax状态码，xhr.readyState 0：UNSENT 未发送，创建Ajax对象，默认值为01：OPENED 执行xhr.open2：HE...

    trigkit4 评论0 收藏0

  • 再也不学AJAX了！（二）使用AJAX

    摘要：随着对象被广泛的接收，也开始着手制定相应的标准来规范其行为。四设置请求头每个请求和响应都会带有相应的头部信息，包含一些与数据，收发者网络环境与状态等相关信息。该方法会令对象实例停止触发事件，并且不再允许访问任何和响应有关的对象属性。 在上一篇文章中我们知道，AJAX是一系列技术的统称。在本篇中我们将更进一步，详细解释如何使用Ajax技术在项目中获取数据。而为了解释清楚，我们首先要搞清楚...

    nemo 评论0 收藏0

  • Ajax 知识点的那些事

    摘要：发送后等待服务端响应，响应是以触发事件来通知，随后通过请求对象实例拿到状态以及响应的内容。表示服务器响应内容的文本形式。而是在调用发出后，被调用者通过触发事件，调用事件处理回调函数。 Ajax是什么 AJAX即Asynchronous JavaScript and XML（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术，包含了HTML、CSS、...

    wean 评论0 收藏0

  • JavaScript基础知识总结

    摘要：字面量方式这是最简单最基本的一种方法。简单的构造函数方式通过这样的形式创建对象。结合上面的简单构造函数和原型，一个完整的构造函数应该是这样的还有一种方法就是提供的简单实现下中的，，创建一个对象谈谈对象的理解。避免使用表达式又称动态属性。 要点：数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、异步装载回调、模板引擎、Nodejs等。 JS基本类型有什么？引...

    lakeside 评论0 收藏0

发表评论

登陆后可评论

0条评论

_Dreams

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<