Ajax请求操作
以GET方式给后端发送数据
GET请求通过查询字符串参数的方式把请求体里面的内容发送给后端，要求通过拼接在url路径的后面进行传输。
就像这样，以?开始,以&符作分隔绑定要传输的并列参数。
HTML发送ajax请求：
<body>
<script type="text/javascript">
let xhr = new XMLHttpRequest()
xhr.onload = function(){
console.log('向服务器请求已经完成')
}
xhr.open('GET','/userInfo?name=覃富滨&age=21&number=1903010331&gender=男',true)
xhr.send()
console.log('你好')
</script>
</body>
/router/index.js路由配置，用ctx.request.query进行接收参数。
router.get('/userInfo', async (ctx ,next) => {
console.log(ctx.request.query) //接收浏览器传递过来的参数
ctx.body = 'userInfo'
})
重启npm run dev ，因为发送GET请求需要重启Koa2项目。
Network控制台查看结果。
而我们需要特别关注的是Query String Parameters字段，这里我们可以看到URL携带的数据。
那后端有没有收到这些数据呢？
也是可以收到的哦，需要在终端查看。
以POST方式给后端发送数据
POST请求默认是通过纯文本的方式把请求体内容传输给后端，而且要求通过send()方法对参数进行传输，不过这种纯文本的形式是不推荐的。
所以需要下面这种方式进行传输数据。
POST请求可以通过"名称/值"对的方式把请求体的内容发送给后端，不过要求通过setRequestHeader()方法进行设置。
值得注意的是：setRequestHeader()方法必须放置在open()和send()之间。
setRequestHeader()方法其实就是用来设置请求头信息的，用来改变Content-Type请求的类型，例如这里的form-urlencoded类型，说明这是以form表单形式提交发送的。
案例：
HTML代码:
<body>
<script type="text/javascript">
let xhr = new XMLHttpRequest()
xhr.onload = function(){
console.log('向服务器请求已经完成')
}
xhr.open('POST','/userInfo',true)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send('name=qfb&age=22')
</script>
</body>
后端代码通过ctx.request.body进行接收POST请求的数据：
router.post('/userInfo', async (ctx ,next) => {
console.log(ctx.request.body) //通过request对象下的body进行接收
ctx.body = 'userInfo'
})
重启npm run dev后，前端Network控制台效果预览：
而我们需要特别关注的是请求头Form Data字段，可以看到我们传递的数据。
此外我们还可以看到setRequestHeaders设置的请求头
通过Response选项卡，我们还可以看到后端响应给前端的信息。
那后端有没有接收到前端的post过来的请求呢？我们来看看koa框架监听的终端。
总结：
Ajax响应操作
服务器通过xhr对象下的responseText 属性响应字符串给浏览器。
responseText 属性返回从服务器接收到的字符串，该属性为只读。只有HTTP请求完成接收以后(也就是在xhr.onload这个事件中)，responseText 属性属性才会包含完整的代码。
此外，我们还需要异步来判断一下响应状态码(status)是否为200，因为200才是成功的ok,所以我们才会获取到服务端响应的内容，关于其他的响应状态码不作描述，什么404页面找不到，500服务器繁忙等。
案例：
前端HTML代码
<body>
<script type="text/javascript">
let xhr = new XMLHttpRequest()
xhr.onload = function(){
console.log('向服务器请求已经完成')
if(xhr.status == 200) {
console.log(xhr.responseText)
}
}
xhr.open('GET','/userInfo',true)
xhr.send()
</script>
</body>
后端代码：
router.get('/userInfo', async (ctx ,next) => {
console.log(ctx.request.query)
ctx.body = {
poet:'诗经',
content:'昔我往矣，杨柳依依。'
}
})
console控制台查看效果，看看服务器的数据有没有响应给浏览器：
上面我们已经可以响应字符串了，不过responseText 属性也仅限于响应一些简单的字符串。如果需要响应一个集合（复杂且庞大的数据），该属性是做不到的，所以我们需要下面的这个属性。
responseXML 属性 响应一个XML文档
返回从服务器接收到的XML文档对象，该属性为只读。虽然Ajax全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML) ，而这里的涉及XML说的就是这种类似HTML的标签代码，不过随着json数据和HTML5的出现，XML基本被淘汰了，很少人用。
所以我们如果要响应一个集合，很少会使用responseXML 属性，而是使用现在比较流行json数据格式的进行响应。
responseXML 属性我们仅当了解即可。
总结：
Ajax的响应数据：JSON数据
什么是json数据？
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式（也就是我们常说的键值对的形式）。它可以使得人们很容易地进行阅读和编写，同时也方便了机器进行解析和生成（反观XML文档就很冗余了）。
此外JSON数据分成单组JSON（也就是单个对象）和多组JSON（即数组对象）两种。
JSON数据规范
Key属性和字符串类型值 (键值对) ,必须使用双引号
const json = {
"userName":"李白"
}
只有当value值为int整型才可以破例不使用双引号
const json = {
"userName":"李白",
"age":21
}
JSON值的类型范围：string、number、object、array、boolean、null、function不属于JSON值的类型范畴
JSON数据最后一组键值对不能有逗号
const json = {
"userName":"李白",
"age":21,
"number":"1903010331"
}
JSON.parse()方法：
将字符串类型的json数据解析成对象类型的json数据,对象类型的json数据才是我们需要的。
JSON.stringfy()方法：
刚好和JSON.parse()方法相反，JSON.stringfy()是将对象类型的json转换为字符串类型的json数据
服务端响应JSON,前台获取JSON案例
前端代码：
<body>
<script type="text/javascript">
let xhr = new XMLHttpRequest()
xhr.onload = function(){
//console.log('向服务器请求已经完成')
if(xhr.status == 200) {
//console.log(xhr.responseText) //获取响应信息
const data = JSON.parse(xhr.responseText) //解析拿到的JSON数据
console.log(data)
}
}
xhr.open('GET','/userInfo',true)
xhr.send()
</script>
</body>
后端代码：
router.get('/userInfo', async (ctx ,next) => {
console.log(ctx.request.query)
ctx.body = {
errCode: 0,
errMsg: 'ok',
userList: [
{
"userName":"苏列",
"age":21,
"gender":"男"
},
{
"userName":"张三",
"age":23,
"gender":"男"
},
{
"userName":"宋岚",
"age":20,
"gender":"女"
}
]
}
})
控制台查看前提是否获取到服务器响应回来的JSON数据：
如果我们想使用这些json数据的话，在前台直接遍历即可。
JSON总结：
