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>
结果如下: