【JavaScript】Ajax详讲

一种异步的JS和XML

• 作用：
  • 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据
  • 异步交互：可以在不加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：联想搜索、用户名是否可用的校验等等；

什么是异步与同步？

可以理解把异步理解为多线程，同步理解为单线程

---

也就是说原来是要通过点击提交按钮，跳转到第二个页面去响应。而使用了Ajax不点击按钮，会自动的提交信息到服务器，并且返回信息到该页面，在此过程中，原页面不受影响，可以进行原本的任务

Axios入门

方法

axios.get(url[,config])
axios.delete(url[,config])
axios.post(url[,data[,congig]])
axios.put(url[,data[,config]])

• HTTP请求与表单提交

  HTTP请求与表单提交

  表单提交方式和 HTTP 请求方式是相关但不完全相同的概念：

  1. 表单提交方式：
  2. HTTP 请求方式：
  3. 表单提交一般是同步的，而HTTP请求可以是同步的也可以是异步的

  虽然 GET 和 POST 是表单提交的主要方式，但其他 HTTP 方法（PUT、DELETE 等）也可以通过表单提交，尤其是在使用 AJAX 或 JavaScript 框架（如 Axios）时，可以更灵活地使用这些方法。在这种情况下，你可以使用 JavaScript 来构建请求，而不是依赖于 HTML 表单元素。

  总的来说，表单提交是一种使用 HTTP 请求方式的特定方式，而 HTTP 请求方式则是一种更广泛的通信协议规定的方式，用于在客户端和服务器之间传输数据。

• data：要传输的数据

  为什么post方法有data，而get方法没有呢？

  get方法在url传递参数，自然不需要特地在data中写

• config：

  config 参数是一个可选的配置对象，用于在 Axios 请求中提供一些额外的设置。它是一个包含各种选项的 JavaScript 对象。以下是一些常见的配置选项：

  1. headers： 用于设置请求头，可以指定各种自定义的 HTTP 头部信息，例如：
  2. params： 用于在 GET 请求中添加查询参数，例如：
  3. timeout： 用于设置请求超时时间（以毫秒为单位），如果请求在指定的时间内没有得到响应，将被中断。
  4. auth： 用于在请求中添加 HTTP 基本认证信息，包括用户名和密码。
  5. responseType： 用于指定服务器响应的数据类型，例如 ‘json’、‘text’ 等。
  6. onDownloadProgress / onUploadProgress： 用于指定上传或下载进度的回调函数。

• 在方法后面（括号后面）可以通过.+方法来获取返回值并执行对应操作

  具体有这几个方法：

  • then：获取成功的返回值
  • catch：获取错误的返回值，一般是指controller层报错，抛出异常中带有的信息
  • finally：无论成功错误都执行

代码示例

axios.post('/api/data', data, {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + token,
    // 其他自定义头部
  },
  params: {
    param1: 'value1',
    param2: 'value2'
  },
  timeout: 5000,
  auth: {
    username: 'john_doe',
    password: 'secret_password'
  },
  responseType: 'json',
  onUploadProgress: progressEvent => {
    console.log('Upload Progress:', (progressEvent.loaded / progressEvent.total) * 100);
  }
})
  .then(response => {
    // 处理请求成功的情况
    console.log('Response Data:', response.data);
    return 'Success Data';  // 返回一个值，将会传递给下一个 .then()
  })
  .catch(error => {
    // 处理请求失败的情况
    console.error('Error:', error);
    throw 'Error Data';  // 抛出一个值，将会传递给下一个 .catch()
  })
  .finally(() => {
    // 无论成功还是失败都会执行
    console.log('Request completed.');
  })
  .then(finalResult => {
    // 无论之前的调用是成功还是失败，都会执行到这里
    console.log('Final Result:', finalResult);
  });

什么是返回值呢？

在HTTP请求发送到controller层，controller每一个方法都有返回值，这个就是要接收到的

import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.ResponseStatus;

@RestController
public class DataController {

    private static final String DATA_FOR_VALUE1 = "Data for value1";
    private static final String DATA_FOR_VALUE2 = "Data for value2";

    @GetMapping("/data")
    public String getData(@RequestParam String param1, @RequestParam String param2) {
        try {
            String result = "{ \"param1\": \"" + DATA_FOR_VALUE1 + "\", \"param2\": \"" + DATA_FOR_VALUE2 + "\" }";
            return result;
        } catch (Exception e) {
            // 发生错误时返回错误信息，并设置 HTTP 状态码为 500 Internal Server Error
            throw new CustomException("Internal Server Error");
        }
    }

   
}

这个示例中，返回的String类型就是返回值