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

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）

方法

描述

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/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

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博客

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