针对不同类型数据的ajax通信方法总结

在研究ajax通信时，我们考虑的都只是应用层即HTTP协议，在对不同的数据类型进行处理时，最重要的是对请求头“Content-Type”的值进行合理的设置。若你对 application/x-www-form-urlencoded 等MIME类型的概念还很模糊，请先参考MDN文档。

下文将对通信时不同数据类型的不同Content-Type值以及相关方法一一进行介绍。

数据类型是字符串

在工程中与服务器进行字符串的通信是必不可少的了，而根据字符串复杂度的不同，可以有以下几种处理方式。

1. 字符串长度短且内容复杂度不高

对于简单的字符串，只需要使用GET方法，直接将字符串以参数的方式附带在URL上即可。此时无须设置特定的头部。

const ajax = new XMLHttpRequest();
let params = 'key1=value1',
url = `/api?${params}`;
ajax.open('GET', url)
ajax.send()

不同的浏览器都对URL的长度做了限制，这也就意味着如果数据量很大，则无法利用上述的方法向服务器传递数据。

2. 字符串内容复杂，嵌套程度高

针对此种类型的字符串，我们往往都会使用POST方法。同时也可以设置两种不同的Content-Type来帮助我们进行通信。

application/x-www-form-urlencoded

在HTML表单中，这种MIME类型其实也是enctype的默认值。

除了使用表单，也可以使用ajax，代码如下。

const ajax = new XMLHttpRequest();
let params = 'name=gan&age=21',
url = `/api`;
ajax.open('POST', url)
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
ajax.send(params)

在提交表单时浏览器会自动将数据以key1=value1&key2=value2的格式放置到消息主体中，而使用ajax则需要我们自己进行设置。

application/json

对于前端开发者来说，最渴望的当然是数据也能以json格式来进行通信。实际上，很多后台开发语言也支持了对json格式字符串的解析，我们完全可以以json格式来通信，代码如下。

const ajax = new XMLHttpRequest();
let params = {
name: 'Lantic',
age: 21,
gender: male
}
let url = `/api`;
ajax.open('POST', url)
httpRequest.setRequestHeader('Content-Type', 'application/json');
ajax.send(JSON.stringify(params))

只要服务器端也对消息主体做好了相应处理，此种通信格式将非常的高效与便捷。

数据类型是文件

在这里以图片为例，如果我们想向服务器上传一张图片，Content-Type可以有以下类型。

multipart/form-data

如果使用表单，需要将enctype值设置为multipart/form-data。Chrome抓包结果如下。

头部：

Content-Type:multipart/form-data;

boundary=—-WebKitFormBoundaryqwasLY3DAX24Nmf0

Request Payload:

——WebKitFormBoundaryqwasLY3DAX24Nmf0

Content-Disposition: form-data; name=”img”;

filename=”32N58PICX6F_1024.jpg”

Content-Type: image/jpeg

——WebKitFormBoundaryqwasLY3DAX24Nmf0–

当然了，现在很少使用表单来直接向服务器提交数据。我们可以在ajax中利用FormData对象同样实现使用表单上传的效果。

let form = document.querySelector('#form')；
let params = new FormData(form)；
let ajax = new XMLHttpRequest();
ajax.open('POST','/apiapi')
ajax.send(formdata)

text/plain

我们也可以使用FileReader对象，将图片转换为base64编码，以传递字符串的方式与浏览器通信。

<form>
<input type="file" name="img" id="img" onchange="getImage()">
</form>

<script>
let reader = new FileReader();
reader.onload = function (event) {
let ajax = new XMLHttpRequest();
ajax.open('POST','/apiapi')
ajax.send(event.target.result)
}
function getImage() {
let imgData = document.querySelector('#img').files[0];
reader.readAsDataURL(imgData)
}
</script>

如果使用base64编码，服务器也需要进行相应处理，对传递来的字符串进行正确解析。

application/octet-stream

当然了，我们也可以直接将图片的二进制数据直接传给服务器。具体JS代码如下。

<form>
<input type="file" name="img" id="img" onchange="getImage()">
</form>
<script>
function getImage() {
let imgData = document.querySelector('#img').files[0];
let ajax = new XMLHttpRequest();
ajax.open('POST','/apiapi')
ajax.setRequestHeader('Content-Type', 'application/octet-stream')
ajax.send(imgData)
}
</script>

总结

作者根据平时项目经验，对在与服务器交互时针对不同类型的数据所采用的不同处理方法进行了总结，主要针对了字符串和图片两种类型。在图片的通信上处理起来相对复杂，需要服务器端的配合才能使前后端正常通信。

由于作者水平有限，若文章存在错误，或你对文章内容有更好地补充，欢迎指正或提出建议，感激不尽。