Ajax请求操作和Ajax响应操作详解(依赖Koa2项目演示)

作者: 似朝朝我心 | 来源:发表于2021-05-11 21:33 被阅读0次

Ajax请求操作和Ajax响应操作详解(依赖Koa2项目演示)
2016-08-18 短信接口、ajax请求
jQuery+Ajax
2017.10.31
JavaScript笔记(2):JavaScript的基本知识
解决ajax请求服务器（PHP端）响应时间过长问题
Java中的thymeleaf开发所遇到的问题
ajax介绍, 模板, 文件上传, json格式数据
原生js ajax网络数据请求 XMLHttprequest、A
无标题文章

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携带的数据。

如果传递的参数是中文，浏览器默认会通过算法进行转义，所以我们会看到一些%E8%这样的描述，所以我们需要解析。
那后端有没有收到这些数据呢？

也是可以收到的哦，需要在终端查看。

以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设置的请求头

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（单个对象）和多组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数据：