前言
以前从前端向后台请求数据时用的都是XMLHttpRequest，但这个API的使用太复杂了，后来出现了Ajax来代替它，但Ajax不是一门新技术，只是一种解决方案，是基于XMLHttpRequest对象的一个获取后台数据的方案。再后来JavaScript出现了一个新的API也就是人人皆知的fetch，它对标的就是XMLHttpRequest，相比较后者的fetch的使用就更加方便，并且自带promise语法，避免了ajax的回调地狱，也弥补了XMLHttpRequest的不足。
XMLHttpRequest和fetch的使用
开头
我使用了react创建了一个单页面来获取数据，用express创建了一个get和post请求来查看请求是否成功。
页面用来点击不同按钮发送不同的请求获取数据，刚开始定义state的值初始化为undefined，当成功请求到数据后更改state的值使页面重新渲染打印出后台数据。
express后台代码
我在app.js加了一个前缀/api，所以这里的地址都是需要在路由地址前加一个/api，我express开启的端口号是3002。
XMLHttpRequest代码+部分react代码
实例化XMLHttpRequest为xhr，先使用xhr.open()设置参数，但这时请求还没有发出，需要再使用xhr.send()发送请求，但是我们也需要获取服务端回传的数据，这个时候我们再去监听readyState的值确认已经收到全部数据，再通过status状态码判断请求是否成功，如果请求成功则改变state的值重新渲染页面。
页面显示
初始化页面时由于getData和postData都是undefined，故刚开始标签显示是空的，当点击按钮后发送请求且数据获取成功后，就会显示出后台回传的字符串了。
后台打印
可以看到get请求和post请求都已经成功了，而且post请求成功以后，已经获取到了前端传过去的集合数据。
Fetch代码
以下是get和post的fetch请求方式，请求成功以后第一次then返回的就是promise对象，它是不能直接使用的，需要先转换一下。如果后台返回的是一个字符串或者文本，则应该用res.text()转换成文本再使用，这个时候不要用res.json()，不然前端会报错，因为字符串或文本不是一个有效的json对象。第二次then的时候就能获取到可以直接使用的data数据了。
如有错误或缺漏，欢迎指点。
