AJAX服务端响应json数据

AJAX服务端响应json数据

首先新建一个文件夹，里面放html文件和js文件

html文件里面放一个简单的按钮并为其绑定事件

html（json.html）

 <button>点击发送请求</button>
    <div id="result"></div>

css

 #result {
        width: 200px;
        height: 100px;
        border: 1px solid #000;
        
    }

紧接着获取元素，并为元素绑定事件

获取元素

const result = document.getElementById("result"); //获取result元素对象

绑定事件

这里绑定的事件是当点击按钮触发下面的事件

window.onkeydown = function () {
            //进行ajax操作
            //1.创建对象，发送请求
            const xhr = new XMLHttpRequest();
            //2.初始化，设置请求的方法和url
            xhr.open('GET', 'http://127.0.0.1:8000/json-server');
            //3.发送
            xhr.send();
            //4.事件绑定,处理服务端返回的结果
            //readystate是xhr对象的一个属性，表示状态，有五个值：0，1，2，3，4
    		xhr.onreadystatechange = function () {
                //判断服务端是否返回了所有的结果
                if (xhr.readyState === 4) {
                    //判断响应状态码
                    if (xhr.status >= 200 && xhr.status < 300) {
            			console.log(xhr.response);
                        //设置result的文本
                       result.innerHTML = xhr.response;
                        //发现并没有页面刷新就已经拿到结果
                    } 
                }
            }
        }

另一个文件server.js中，我们这样写

//1.引入express
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
//request是对请求报文的封装，response是对响应报文的封装
app.get('/sever', (request, response) => {
    //设置响应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX');
});
app.all('/json-sever', (request, response) => {
    //设置响应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    response.send('HELLO AJAX POST');
    
});
//4.监听端口，启动服务
app.listen(8000, () => {
    console.log("服务已经启动，8000端口监听中");
})

请求发过去结果如下：

当我们要发送的数据使一个对象时，在另一个server.js文件里，我们这样写

//1.引入express
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
//request是对请求报文的封装，response是对响应报文的封装
app.get('/sever', (request, response) => {
    //设置响应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX');
});
app.all('/json-sever', (request, response) => {
    //设置响应头,设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据
    const data={
        name:'atguigu'
    };
    //对对象进行字符串的转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
    //send里面只能接受字符串和buffer
});
//4.监听端口，启动服务
app.listen(8000, () => {
    console.log("服务已经启动，8000端口监听中");
})

结果如下：

结果是json格式字符串，数据简单获取比较方便，如果格式很复杂想要提取其中的数据很麻烦，这时我们可以对数据进行类型转换，可以手动也可以自动转换

手动对数据进行转换

<script>
    ……
if (xhr.readyState === 4) {
                    //判断响应状态码
                    if (xhr.status >= 200 && xhr.status < 300) {
                      //手动对数据进行转换
            			//console.log(xhr.response);
                        //设置result的文本
                        //result.innerHTML = xhr.response;
                        //发现并没有页面刷新就已经拿到结果
                        let data = JSON.parse(xhr.response);
                        console.log(data);
                        result.innerHTML = xhr.response;
                    } 
                }
</script>

结果如下：

自动对数据进行转换

自动转换需要在初始化前设置响应体数据类型

<script>
    const xhr = new XMLHttpRequest();
    //设置响应体数据类型
    xhr.responseType = 'json';
    ……
if (xhr.readyState === 4) {
                    //判断响应状态码
                    if (xhr.status >= 200 && xhr.status < 300) {
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;
                    } 
                }
</script>

结果如下：