Ajax与Axios基础

目录

Ajax

简介

使用

        创建XMLHttpRequest对象

        向服务器发送请求

        获取服务器响应数据

Axios

简介

使用

        引入Axios的js文件

---

Ajax

简介

        在通常的HTML页面中，从浏览器端向服务器端发送请求的主要方式通常为<a>标签、form表单的提交、location.href跳转页面等方法，而这些方式需要从服务器获取响应包后整体刷新前端页面，那有没有不用整体刷新前端页面就可以向服务器发送数据的方法呢？

        介绍：Asynchronous JavaScript And XML，异步的JavaScript和XML。

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

使用

        创建XMLHttpRequest对象：用于和服务器交换数据

        向服务器发送请求

        获取服务器响应数据

        创建XMLHttpRequest对象

//1. 创建XMLHttpRequest对象
const httpRequest = new XMLHttpRequest();

        向服务器发送请求

 //2. 向服务器发送异步请求
httpRequest.open("GET", "URL");

        获取服务器响应数据

httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState === 4 && httpRequest.status === 200) {
          console.log(httpRequest.responseText);
        }
      };

以上是原生的Ajax的使用，在开发中的使用比较少，大概了解就可以。

Axios

简介

        Axios把Ajax封装成了更精简、更易用的框架，在目前的开发中，Axios比Ajax更常用。

        官网：https://www.axios-http.cn/

使用

        Axios的使用步骤大概分为：

        引入Axios的js文件

        使用Axios发送请求，并获取相应结果

        引入Axios的js文件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

        使用Axios发送请求，并获取相应结果

 axios({
    method: 'GET',
    url: 'URL'
  }).then((result) => {
    console.log(result.data);
  }).catch((err) => {
    alert(err);
  });

以上的axios发送请求的代码可以简写为：

// GET请求  
axios.get('URL').then((result) => {
    console.log(result.data);
  }).catch((err) => {
    console.log(err);
  });
// POST请求
axios.post('URL','id=1').then((result) => {
    console.log(result.data);
  }).catch((err) => {
    console.log(err);
  });

GET: 
    axios.get(url).then((res)=>{…}).catch((err)=>{…})
POST: 
    axios.post(url).then((res)=>{…}).catch((err)=>{…})