Ajax学习日志（二）—— Ajax的使用

一、Ajax的使用

1.1） 在app.js创建新路由

之前的app.js的初始化内容

// 创建路由 注意：路由一定是在监听端口的前面
app.get('/responseData', (req, res) => {
    // send方法也可以输入json对象
    res.send({"name":"黄超帅", "age": 18, "hobby": "玩滑板"});
    // res.send({"name":"黄超帅"});
})

== 注意 ==
路由的创建必须要放在端口的监听之前，否则无法运行

1.2）在public文件夹新建一个html文件

<script type="text/javascript">
        // 1.创建ajax对象
        let xhr = new XMLHttpRequest();
        // 2.告诉Ajax对象要向哪发送请求，以什么方式发送请求 ———— 1）请求方式 2）请求地址
        // 【open方法】 XXX.open(method: String, URL: String)
        xhr.open('get', 'http://localhost:8822/responseData')
        // 3.发送请求
        // 【send方法】 XXX.send(body?: Document|BodyInit|null)
        xhr.send();
        // 4.获取服务器端响应到客户端的数据
        xhr.onload = function () {
            // 因为在http请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转化为对象字符串进行传输
            console.log(xhr.responseText)
            console.log(typeof xhr.responseText)
            // 解决方法：
            let responseText = JSON.parse(xhr.responseText);
            console.log(responseText);
            console.log(typeof responseText)

            // 在页面显示数据
            let str = '<h2>' + responseText.name + '</h2>';
            let str2 = '<h2>年龄：' + responseText.age + '</h2>';
            let str3 = '<h2>爱好：' + responseText.hobby + '</h2>';
            document.body.innerHTML = str + str2 + str3;
        }
    </script>

1.3) 在浏览器输入xhr.open()方法中的url地址，开始运行

———————————————————————————————————————

上一篇：
Ajax学习日志（一）

下一篇：
Ajax学习日志（三）