01初识AJAX-CSDN博客

本文链接：https://blog.csdn.net/m0_61118311/article/details/128342796

该图为本文的核心汇总

0.讲解必备铺垫知识

在开始讲解之前认识下计算机体系的其他知识铺垫

1.服务器：

服务器是计算机的一种，它比普通计算机运行更快、负载更高。服务器在网络中为其它客户机（如PC机、智能手机、ATM等终端）提供计算或者应用服务。

2.url网址：

概念：url, 统一资源定位符, 标记资源在网络中的位置。也称网址

作用: 标记某个资源在网络中的唯一地址。只有通过URL地址，浏览器才能定位资源的存放位置，从而成功访问到对应的资源。

构成：1.协议 2.主机名 3.端口号（可省略）4.资源存放的路径

3.请求和响应：

浏览器和服务器之间的通信过程, 分为两个步骤：请求和响应,

请求: 浏览器, 通过网络去服务器要资源的过程, 叫做"请求"
响应: 服务器, 通过网络给浏览器返回资源的过程, 叫做"响应"

如何查看响应与请求？

兄弟姐妹们去浏览器查看我框起来的这几个点（谷歌浏览器）

为何一个主页有这么多次请求?

首先请求回来的主页html里, 还有一些引用其他文件的语法, 例如script的src和link的href, 还有img的src, 都会让浏览器单独再发几次请求

访问网页时，能获取到几种类型资源？

有html, css, js, 图片, 音频, 视频, JSON字符串数据等等

好了，铺垫知识结束。AJAX开始！！！

一、AJAX是什么？

是一种在JS代码中发请求并获取响应数据的技术

使用场景：

不刷新页面的情况，从服务器获取数据，以局部更新页面

例如：我们在注册账户名的时候，当离开账户名时，系统会检测它的库里面有没有重合的名字，有就给我们提示：当前用户名存在

二、用axios发起Ajax请求

1.先引入axios.js文件到自己的网页中。

（axios.js文件链接: https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js）

2.axios的使用语法

axios({
url: '请求的URL网址',
method: '请求的方式'

//data 对应POST方法

//params对应 GET方法

}).then((结果变量名) => { // .then 用来指定请求成功之后的回调函数
// 形参中的结果变量名是请求成功之后的结果
}).catch((错误变量名)=>{
// 如果请求发生了错误，会到这来来
// 形参中的错误变量名是请求失败之后的结果
})

来个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <!-- 1.引入axios.js -->
        <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
    
        <script>
            <!-- 2.使用axios -->
            console.log(axios);
            axios({
                url:'http://ajax-api.itheima.net/api/area',
                method:'GET',
                params:{
                    pname:'江西省',
                    cname:'九江市'
                }
            }
            ).then(res=>{
                console.log(res)//then节后请求成功之后的回调函数;
            })
        </script>
</body>
</html>