最合适的Ajax内容编码范例

最合适的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) => {},
});

此时默许的提交的contentTypeapplication/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早多了。–我猜的,待考证

假如请求范例typeGET,花样化的字符串将直接拼接在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点:

  • 须要显式指定contentTypeapplication/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-urlencodedjson并没有大的差异,背景都能够处置惩罚成对象,而且数据编码后的长度差异不大。
然则关于对象中嵌套对象,或对象字段包括数组,此时两种内容编码体式格局就有较大差异。

花样化demo

对象嵌套

{
    userInfo :{
     name: 'CntChen',
     info: 'Front-End',
     login: true,
    },
}
  • to x-www-form-urlencoded (1)

userInfo[name]=CntChen&userInfo
=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]
=Front-End&authors[1][name]=Eva&authors[1]
=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)中数组内的nameinfo也传输了屡次,是否是也存在冗余?实在这不是冗余。由于对数组中的各对象,并不请求其具有雷同的字段(数组中的对象并非结构化的),所以不能疏忽“雷同”的字段名。运用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

    原文作者:CntChen
    原文地址: https://segmentfault.com/a/1190000006871099
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞