AJAX——前后端传输数据场景下使用的技术
Ajax是对前端和后端进行数据、文本传递的一种技术。通过与服务器进行少量的数据交换，Ajax可以使网页实现异步更新。
这意味着可以摘不重新加载整个网页的情况下，对网页进行部分更新。
常用的ajax发送方式
- XMLHttpRequest对象：原生JavaScript提供的API，可以在不刷新的情况下与服务器进行数据欢呼。使用XHR对象发送Ajax请求需要编写一些JavaScript代码，并在回调函数中处理服务器返回的数据。
- Fetch API：可以使用Promise对象来处理Ajax请求。Fetch API更加简单，灵活，还支持数据的传输，但是需要使用者了解Promise对象的用法。
- jQuery.ajax（）：jQuery提供的方法，可以简化Ajax请求的编写，也可以处理响应数据。使用该方法可以轻松发送GET \ POST \ PUT \ DELETE。
- Axios：基于Promise的HTTP库，可以摘浏览器和Node.js中发送Ajax请求。Ajax提供了简单的API，可以方便的处理请求和响应数据。
XMLHttpRequest对象
XMLHttpRequest对象支持的Ajax接口
| 方法 | 描述 |
|---|---|
| open（method，url，async） | method：请求的类型 url：资源在服务器上的位置 async：true（异步）或false（同步） |
| send（body） | 将请求发送到服务器 body：消息体 |
| addEventListener（eventname，callback） | 检测进度 xhr.addEventListener（“progress”，updateProgress） xhr.addEventListener（“load”，transferComplete） xhr.addEventListener（“error”，transferFailed） xhr.addEventListener（“abort”，transferCanceled） |
load—— 当请求完成（即使 HTTP 状态为 400 或 500 等），并且响应已完全下载。
error—— 当无法发出请求，例如网络中断或者无效的 URL。
progress;—— 在下载响应期间定期触发，报告已经下载了多少。
XMLHttpRequest发送多种类型请求
| 动作 | HTTP方法 | 描述 |
|---|---|---|
| 查询 | GET | 获取资源 |
| 创建 | POST | 创建资源 |
| 修改 | PUT | 更新资源 |
| 删除 | DELETE | 删除资源 |
JS原生Ajex接口
增加POST
document.querySelector("form").onsubmit = function (e) {// 避免页面刷新e.preventDefault();var name = document.querySelector(".name").value;// 1.新建XHMHttpRequest对象https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequestvar xhr = new XMLHttpRequest();// 2.添加监听xhr.addEventListener("load", function () {console.log(xhr.responseText);alert("添加成功");});// 3.做配置// post添加请求头https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/openxhr.open("post", "http://localhost:3000/goods");// 4.发送请求var param = { name: name };// 转换成JSON格式的字符串;https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringifyxhr.send(JSON.stringify(param));};删除DELETE
document.querySelector("form").onsubmit = function (e) {// 避免页面刷新e.preventDefault();var id = document.querySelector(".id").value;// 1.新建XHMHttpRequest对象var xhr = new XMLHttpRequest();// 2.添加监听xhr.addEventListener("load", function () {console.log(xhr.responseText);alert("删除成功!");});// 3.做配置// put修改请求头,使用拼接,采用模版字符串xhr.open("delete", `http://localhost:3000/goods/${id}`);// 4.发送请求xhr.send();};修改PUT
document.querySelector("form").onsubmit = function (e) {// 避免页面刷新e.preventDefault();var name = document.querySelector(".name").value;var id = document.querySelector(".id").value;// 1.新建XHMHttpRequest对象var xhr = new XMLHttpRequest();// 2.添加监听xhr.addEventListener("load", function () {console.log(xhr.responseText);alert("修改成功!");});// 3.做配置// put修改请求头,使用拼接,采用模版字符串xhr.open("put", `http://localhost:3000/goods/${id}`);// 4.发送请求var param = { name: name };xhr.send(JSON.stringify(param));};查询GET
function getuser() {// 1.创建XMLHttpRequest对象var xhr = new XMLHttpRequest();// 2.监听响应状态码xhr.addEventListener("load", function () {// 5.处理响应结果console.log(xhr.responseText);});// 3.设置请求xhr.open("GET", "http://localhost:3000/users", true);// 4.发送xhr.send();}Axios
get请求步骤
axios.get('https：//localhost:3000/user').then(response => {// 处理成功情况console.log(response.data);}).catch(error => {// 处理错误情况console.error(error);}).finally(() => {// 总是会执行});示例
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">
//浏览器直接引入
</script><script>// 渲染表格function renderTable(users) {const tbody = document.getElementById('userBody');tbody.innerHTML = users.map(user => `<tr><td>${user.id}</td><td>${user.name}</td><td>${user.sex === '1' ? '男' : '女'}</td><td>${user.birth}</td><td>${user.addr}</td><td><button onclick="prepareEdit('${user.id}')">编辑</button><button class="delete-btn" onclick="deleteUser('${user.id}')">删除</button></td></tr>`).join('');}//获取用户数据function getmessage() {axios.get("http://8.130.50.58:3000/users").then(res => {console.log(res)renderTable(res.data)/* console.log(renderTable(res.data)); */}).catch(err => {console.error(err);})}// 新增用户function addUser() {const id = document.getElementById('newId').value;const name = document.getElementById('newName').value;const sex = document.getElementById('newSex').value;const birth = document.getElementById('newBirth').value;const addr = document.getElementById('newAddr').value;axios.post("http://8.130.50.58:3000/users", {id,name,sex,birth,addr}).then(res => {console.log(res);alert("新增成功");getmessage();//清空表单document.getElementById('newId').value = '';document.getElementById('newName').value = '';document.getElementById('newSex').value = '';document.getElementById('newBirth').value = '';document.getElementById('newAddr').value = '';}).catch(err => {console.error(err);});}//删除用户function deleteUser(id) {axios.delete(`http://8.130.50.58:3000/users/${id}`).then(res => {console.log(res);alert("删除成功");getmessage();}).catch(err => {console.error(err);});}//编辑用户:点击编辑按钮后回显到表单function prepareEdit(id) {axios.get(`http://8.130.50.58:3000/users/${id}`).then(res => {console.log(res);const user = res.data;document.getElementById('editId').value = user.id;document.getElementById('editName').value = user.name;document.getElementById('editSex').value = user.sex;document.getElementById('editBirth').value = user.birth;document.getElementById('editAddr').value = user.addr;}).catch(err => {console.error(err);});}getmessage()//修改用户function updateUser() {const id = document.getElementById('editId').value;const name = document.getElementById('editName').value;const sex = document.getElementById('editSex').value;const birth = document.getElementById('editBirth').value;const addr = document.getElementById('editAddr').value;axios.put(`http://8.130.50.58:3000/users/${id}`, {name,sex,birth,addr}).then(res => {console.log(res);alert("修改成功");getmessage();})}</script>Fetch API
GET 请求
fetch('https://api.example.com/data').then(response => {if (!response.ok) {throw new Error('网络请求失败');}return response.json(); // 解析为 JSON}).then(data => {console.log('获取的数据:', data);}).catch(error => {console.error('请求错误:', error);});POST 请求
const postData = {title: '新文章',content: '这是一篇使用 Fetch API 创建的文章'
};fetch('https://api.example.com/posts', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(postData)
})
.then(response => response.json())
.then(data => console.log('创建成功:', data))
.catch(error => console.error('创建失败:', error));Content-Type参考HTTP content-type_weba的contenttype-CSDN博客