AJAX——前后端传输数据场景下使用的技术

小盐巴小严2025-06-16 13:09

Ajax是对前端和后端进行数据、文本传递的一种技术。通过与服务器进行少量的数据交换，Ajax可以使网页实现异步更新。

这意味着可以摘不重新加载整个网页的情况下，对网页进行部分更新。

常用的ajax发送方式

  1. XMLHttpRequest对象：原生JavaScript提供的API，可以在不刷新的情况下与服务器进行数据欢呼。使用XHR对象发送Ajax请求需要编写一些JavaScript代码，并在回调函数中处理服务器返回的数据。
  2. Fetch API：可以使用Promise对象来处理Ajax请求。Fetch API更加简单，灵活，还支持数据的传输，但是需要使用者了解Promise对象的用法。
  3. jQuery.ajax（）：jQuery提供的方法，可以简化Ajax请求的编写，也可以处理响应数据。使用该方法可以轻松发送GET \ POST \ PUT \ DELETE。
  4. 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

javascript 复制代码 
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/XMLHttpRequest
      var 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/open
      xhr.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/stringify
      xhr.send(JSON.stringify(param));
    };

删除DELETE

javascript 复制代码 
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

javascript 复制代码 
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

javascript 复制代码 
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请求步骤

javascript 复制代码 
​
axios.get('https：//localhost:3000/user')

.then(response => {

// 处理成功情况

console.log(response.data);

})

.catch(error => {

// 处理错误情况

console.error(error);

})

.finally(() => {

// 总是会执行

});

​

示例

html 复制代码 
<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 请求

javascript 复制代码 
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 请求

javascript 复制代码 
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博客

热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02DeepSeek各版本说明与优缺点分析03KGG转MP3工具|非KGM文件|解密音频04扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解05零代码入门 | Coze——让大模型接入自己的数据库06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07电工电子课程设计---四路病房呼叫系统08YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】09【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！10AI Agent | Coze 插件使用指南：从功能解析到实操步骤