什么是 AJAX ？

Ajax 的全称是 Asynchronous JavaScript And XML（异步 JavaScript 和 xml）
通俗理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。
突出的特点：当前网页没有刷新、没有跳转。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
既然ajax有这么多好处，我们要怎样使用ajax呢？代码说话

原声AJAX

-所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。原声请求分为POST和GET两种方式，GET的参数是通过url？后以键值对的形式传送给服务器的，POST是通过XMLHttpRequest中send方法传递过去的，与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

POST请求方式：

//首先创建一个XMLHttpRequest对象
          let xhr = new XMLHttpRequest();
          //open向服务器发送请求
           xhr.open('POST', url);
          //告知服务器post请求报文的格式
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
          //发送请求
            xhr.send(fd);
          //判断相应是否成功，并将服务器响应数据赋值
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let res = JSON.parse(xhr.responseText);
                    if (res.status !== 200) return alert(res.message);
                    console.log(res);
                }
            }

GET请求方式：

//首先创建一个XMLHttpRequest对象
          let xhr = new XMLHttpRequest();
          //open向服务器发送请求
           xhr.open('GET', url?'key:value');
          //发送请求
            xhr.send();
          //判断相应是否成功，并将服务器响应数据赋值
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let res = JSON.parse(xhr.responseText);
                    if (res.status !== 200) return alert(res.message);
                    console.log(res);
                }
            }

jQuery中的AJAX

由于XMLHttpRequest对象用法比较复杂
jQuery中为我们封装了XMLHttpRequest对象提供了一系列的Ajax相关的函数
jQuery中发起 Ajax 请求最常用的三个方法如下：

• $.get() get方式请求，用于获取数据
• $.post() post方式请求，用于提交数据
• $.ajax() 比较综合，既可以获取数据，又可以提交数据

$.get()

$.get(url,[data],[callback])

$.post()

$.post(url,[data],[callback])

$.ajax()

$ajax的基本语法

Axios

Axios 是专注于网络数据请求的库。
相比于原生的 XMLHttpRequest 对象，axios 简单易用。
相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。

axios.get

axios.get(‘url’, { params: { /参数/ } }).then(callback)

// 请求的 URL 地址
var url = ''
// 请求的参数对象
var paramsObj = { name: 'zs', age: 20 }
// 调用 axios.get() 发起 GET 请求
axios.get(url, { params: paramsObj }).then(function(res) {
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(res)
})

axios.post

axios.post(‘url’, { /参数/ }).then(callback)

// 请求的 URL 地址
var url = ''
// 要提交到服务器的数据
var dataObj = { location: '北京', address: '顺义' }
// 调用 axios.post() 发起 POST 请求
axios.post(url, dataObj).then(function(res) {
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(result)
})

axios

axios 也提供了类似于 jQuery 中 $.ajax() 的函数，语法如下：

axios({
 method: '请求类型',
 url: '请求的URL地址',
 data: { /* POST数据 */ },
 params: { /* GET参数 */ }
}).then(callback)