持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情
1. 原生AJAX基本使用（XHR）
xhr，全称为XMLHttpRequest，用于与服务器交互数据，是ajax功能实现所依赖的对象
1.1 准备工作
我们接下来通过案例实现Ajax的交互，从而学习Ajax
首先我们需要在服务端做一些准备
- 安装node.js
打开命令行输入
node -v
若出现某个版本号，说明安装成功
- 安装express框架
利用命令行
npm init --yes
初始化环境
npm i express
下载express包，建议使用管理员身份打开VScode或命令行，否则可能出现err
1.2 请求的基本操作
如何建立浏览器与服务端联系，下面通过一个小例子说明
服务端：
//引入express
const express = require('express')
//创建应用对象
const obj = express();
//创建路由规则
//request 对请求报文的封装
//response 对响应报文的封装
obj.get('/server', (request, response)=>{
response.setHeader('Access-Control-Allow-Origin', '*');
response.send('HELLO AJAX');
})
//监听端口启动服务
obj.listen(8000, ()=>{
console.log('服务已经启动，8000端口监听中...');
})
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX GET 请求</title>
<style>
#result{
width: 200px;
height: 200px;
border: 5px solid #90b;
}
</style>
</head>
<body>
<button>点击此发送请求</button>
<div id="result"></div>
<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，事件绑定，处理返回的结果
xhr.onreadystatechange = function(){
//判断是否返回了所有结果
if(xhr.readyState === 4){
//判断是否成功，通过状态码
if(xhr.status >= 200 && xhr.status <=300){
//设置result的文本
result.innerHTML = xhr.response;
}
}
}
}
</script>
</body>
</html>
在VScode里打开终端，执行服务端js文件
node .\server.js
此时设置的监听器打开
再把html在浏览器中打开，便可实现交互效果，你可以点点那个按钮看看哦
上述的GET请求的案例，作用就是在服务端获取信息，大家还可以试试类型完成交互，本文主讲GET 和POST两种类型
补充：
GET请求设置参数
大家有时可以看到某些URL后面会带着一长串东西，那就是浏览器向服务端传输的数据参数
格式如下：
在域名后加上?作为分割，紧接着用参数=值&参数=值的循序叠加
栗子如下：
http://127.0.0.1:8000/server?a=100&b=200&c=300
//在代码里则表现为
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
上述请求的基本操作对于GET和POST均成立
这里提的是他们设置参数方式的不同
对于POST设置参数则为：
xhr.send('a=100&b=200&c=300');
1.3 如何设置请求头
报文的其他部分我们都以及有了设置的方法，还差一个请求头
这个也是通过XHR对象的一个方法实现的
语法如下：
xhr.setRequestHeader('Content-Type', 'application/x-www-from-urlencoded');
需要注意的是，当你使用post类型时，记得把服务端文件中的get改为post哦，否则无法接受到请求
