ajax响应JSON请求

使得能够传输数据对象

const express = require('express');
const app = express();
app.get('/serve', (request, response) => {
    //设置响应头,第一部分是头的名字，后面是值。作用是为了允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send("hello ajax")
});//里面设置了简单响应
app.post('/serve', (request, response) => {
    //设置响应头,第一部分是头的名字，后面是值。作用是为了允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send("hello ajax post")
});//里面设置了简单响应
app.all('/json-serve', (request, response) => {
    //设置响应头,第一部分是头的名字，后面是值。作用是为了允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置可自定义响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 定义一个对象
    const data={
        name:"jack"
    }
    //设置响应体
    response.send(data);//出问题可以转json格式，response.send(JSON.stringify(data));
});//里面设置了简单响应
app.listen(8000, () => { console.log("服务已经启动，8000 端口监听中..."); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<body>
    <div id="result"></div>
    <script>
        let result=document.querySelector('#result');
        window.onkeydown=function(){
            const xhr=new XMLHttpRequest();
            xhr.responseType='json';//设置response的类型使其能够自动实现对json数据的转换
            xhr.open('GET','http://127.0.0.1:8000/json-serve');
            xhr.send();
            xhr.onreadystatechange = function () {
            // 判断服务端返回所有结果,类似于第三次握手
            if (xhr.readyState === 4) {
                // 继续判断响应状态 200 404 403 401 500,2开头表示成功
                if (xhr.status >= 200 && xhr.status < 300) {
                    // 处理结果
                    // result.innerHTML = xhr.response;
result.innerHTML=xhr.response.name;
                }
            }
        }
        }
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

解决IE浏览器缓存问题因为ie浏览器每次运行后会将结果缓存下来，导致响应体修改了之后结果没有刷新还是原来的结果

xhr.open('GET','http://127.0.0.1:8000/json-serve?t='+Date.now());

编辑

上次更新: 2023/7/11 18:57:41

← ajax跨域（jsonp） axios→