Ajax的应用②(POST请求，设置请求头，响应JSON)

Ajax的应用②(POST请求，设置请求头，响应JSON)

文章目录

​​Ajax发送POST请求​​

​​POST设置请求体​​

​​Ajax设置请求头信息​​​​服务端响应JSON数据​​

Ajax发送POST请求

首先模拟一个场景：在鼠标经过一个盒子的时候，盒子里面显示服务端的响应体。

html部分：

服务端：

//1. 引入expressconst express = require('express');//2. 创建应用对象const app = express();//3. 创建路由规则// request 是对请求报文的封装// response 是对响应报文的封装// 如果url的路径是'/server'的话，那么就会执行后面的回调函数，并且由response// 来做出响应。app.get('/server', (request,)=>{ //设置响应头 设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); //设置响应 response.send('HELLO EXPRESS');});app.post('/server', (request,)=>{ //设置响应头 设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); //设置响应 response.send('HELLO EXPRESS');});//4. 监听端口启动服务app.listen(3000, ()=>{ console.log("服务已经启动, 3000 端口监听中....");});

注意：如果发送POST请求，那么服务器端就要用就要用app.post()方法来设置响应。

服务端 的js代码在修改之后一定要重新启动服务，请求端的网站用Ctrl+f5进行强制刷新。

POST设置请求体

//3. 发送 xhr.send(); // xhr.send('a=100&b=200&c=300'); // xhr.send('a:100&b:200&c:300'); // xhr.send('1233211234567');

可以在Headers中的Request Payload中查看到

请求体的内容一般是非常灵活的，没有硬性的规定，但前提是服务端要有与其对应的处理方式！

Ajax设置请求头信息

截至目前我们已经知道在请求报文中，请求行中的请求类型，url地址可以自己设置；请求体可以自己设置。那么如何自己设置请求头信息呢？

语法：

//设置请求头xhr.setRequestHeader('Content-Type','application/x-引入expressconst express = require('express');//2. 创建应用对象const app = express();//3. 创建路由规则// request 是对请求报文的封装// response 是对响应报文的封装// 如果url的路径是'/server'的话，那么就会执行后面的回调函数，并且由response// 来做出响应。app.get('/server', (request,)=>{ //设置响应头 设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); //设置响应 response.send('HELLO EXPRESS');});app.post('/server', (request,)=>{ //设置响应头 设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); //设置响应 response.send('HELLO EXPRESS');});//JSON 响应app.all('/json-server', (request,) => { //设置响应头 设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); //响应头 response.setHeader('Access-Control-Allow-Headers', '*'); //响应一个数据 const data = { name: 'NEFU' }; //对对象进行字符串转换 let str = JSON.stringify(data); //设置响应体 response.send(str);});//4. 监听端口启动服务app.listen(3000, ()=>{ console.log("服务已经启动, 3000 端口监听中....");});

注意： ①这个app.all()方法可以对所有类型的请求进行一个响应 ②send()函数中只能传输一个String类型或者Buffer类型的数据，所以我们在服务器端需要用JSON将对象字符串化，再装入到send()中去进行传输。

请求端： 模拟的场景：按下键盘任意键触发事件，div中显示服务端传回的数据。

在网页端接收到JSON数据之后，有两种方法对数据进行解包： 方法一：手动对数据进行转化 利用JSON.parse()方法 方法二：自动转化 通过XMLHttpRequest的对象属性，设置响应体数据的类型，xhr.responseType = ‘json’;

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。