什么是 AJAX？( 三 ) _AJAX

Headers 部分

文章插图
【什么是 AJAX？】

文章插图

接下来是Response Headers和Request Headers，这里说实话我觉得没什么好说的，稍微有些重要的就是请求体Content-Type，为什么说他重要呢？我们往下看。

文章插图

接下来一段是Request Payload，Form Data我们比较熟悉，那这个Request Payload又是个什么东西呢？我们知道前端开发中经常会用到AJAX发送异步请求，对于POST类型的请求会附带请求数据。而常用的传参方式有两种，其一是Form Data，另一个就是Request Payload了。
那这两者有何区别呢？其实区别主要就是在Content-Type上，这也就是为啥我说他重要的原因。
Form Data 和 Request Payload 区别

如果请求头里设置 Content-Type:Application/x-www-form-urlencoded，那么这个请求被认为是表单请求，参数出现在Form Data里，格式为key=value&key=value&key=value...
原生的AJAX请求头里设置 Content-Type:application/json，或者使用默认的请求头 Content-Type:text/plain参，数会显示在Request payload块里提交，参数格式为JSON格式： {"key":"value","key":"value"…}，可读性会更好。

Fetch API
既然XHR这么方便，是不是就没有不足之处呢？当然不是。XHR 很实用，但并不是一个设计优良的 API，在设计上并不符合职责分离原则，输入、输出以及状态都杂糅在同一对象中，并用事件机制来跟踪状态变化。并且，基于事件的模型与最近流行的 Promise 和 generator 异步编程模型不太友好。因此Fetch API横空出世，它旨在修正上述缺陷，它提供了与 HTTP 语义相同的 JS 语法，简单来说，它引入了 fetch()这个实用的方法来获取网络资源。
当然由于文章篇幅有限，这里仅仅只是引出Fetch API，推荐阅读 http://bubkoo.com/2015/05/08/introduction-to-fetch/ 。
最后其实刚开始只是想简单介绍下 AJAX 的原理，但是后来发现用了班主任让班长找小明这例子之后，AJAX 的原理似乎也就明白了，便想着要不就扩展点吧，以至于整篇文章有将近一半的篇幅在写扩展的知识了。不过也不算喧宾夺主，毕竟也是 AJAX 衍生出的知识点。
如果你对本篇文章的内容有所疑问，可以在评论区写下你的观点；如果你觉得本篇文章对你有所帮助，希望可以扫描下方二维码关注公众号「01二进制」。您的支持是我前进的最大动力！
参考