GET与POST请求

GET请求

前面的准备工作中，沿用其代码html部分就不展示了

在html中给按钮添加绑定事件，使得能够返回服务端结果

html下的JS部分

<script>
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById("result");
btn.onclick = function () {
// 1、创建对象
const xhr = new XMLHttpRequest();
// 2、初始化 设置请求方法和 URL
xhr.open('GET', 'http://127.0.0.1:8000/server');
// 3、发送xhr.send();
// 4、事件绑定 处理服务端返回结果
// readystate 是xhr对象中的属性，表示状态：0未初始化 1open调用完毕 2send调用完毕 3服务端返回部分结果 4返回所有结果
// on表时间，change表触发，改变
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {// 判断服务端返回结果
if (xhr.status >= 200 && xhr.status < 300) {响应状态码判断2xx为正常
// 1、响应行
console.log(xhr.status);//状态码
console.log(xhr.statusText);//状态字符串
console.log(xhr.getAllResponseHeaders());//所有响应头
console.log(xhr.response);//响应体
//设置result文本
result.innerHTML = xhr.response;
} else {}}}}</script>

JS部分

app.get('/server', (request, response) => {
// 设置响应头,设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
// 设置响应体
response.send('HELLO AJAX');})

修改完毕之后就可以打开浏览器，F12打开控制台并点击button按钮发送

注：设置跨域代码不能输错，若弹出以下报错信息

Access to XMLHttpRequest at 'http://127.0.0.1:8000/server' from origin 'null'

重启vs之后再打开即可，还要记得启动node server.js

 

设置请求参数

只需要在url后面设置即可

a为参数名，100是值；多个值之间用&连接

xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');

重新点击发送请求F12即可查看，部分谷歌版本在Headers标头

发送POST请求

其请求内容于GET大致相同，新建一个html页面

<style>
#result {width: 200px;height: 100px;border: solid 1px #909090;}
</style>
<div id="result"></div>
<script>
const result = document.getElementById("result");
result.addEventListener("mouseover", function () {
const xhr = new XMLHttpRequest();
//此处修改设置类型为POST
xhr.open('POST', 'http://127.0.0.1:8000/server');
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
result.innerHTML = xhr.response;}}}})
</script>

JS中将get方法复制修改内容即可，加一个POST以区别

app.post('/server', (request, response) => {
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.send('HELLO AJAX POST');})

每次修改js代码，都需重新启动一次服务node server.js

注：若JS是于不同文件夹是，则需要对文件夹进行终端启动，而不是整个导航栏，还需要对之前请求的释放

只需要将鼠标移动到上面即可返回结果

 

POST设置请求体

其设置方式与GET请求有所区别

xhr.send('a=100&b=200&c=300');

其请求体可以设置任何类型格式数据—a:100或15645数字，只要服务器可以处理

设置请求头信息

设置请求头信息，前面CT设置请求体类型，后面app是参数查询字符串固定写法

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//在open下添加设置

//若想自定义请求头信息如
xhr.setRequestHeader('name', 'atguigu');
//CT属于预定义头信息，name是自定义系统的保护机制会报错，需添加一行JS
response.setHeader('Access-Control-Allow-Headers', '*');

此时仍报错是因为需要OPTION进行权限校验，检测头信息是否可用

只需要将JS中：app.post 改为 app.all 接受任意类型请求,重启即可