Ajax（阿贾克斯）基础

Ajax是什么？服务器是什么？如何实现前后端数据交互？实际开发中，网页的数据需要从服务器获取。而Ajax技术就是来实现这一功能的。

星绵崽崽

7205人浏览 · 2022-09-26 22:17:50

星绵崽崽 · 2022-09-26 22:17:50 发布

*Ajax是什么？

1.Ajax就是让浏览器跟服务器交互的一套API。它的作用就是可以让浏览器和服务器进行交互。( 是一种用于向服务器请求数据的技术 )

2.MDN官网传送门:Ajax - Web 开发者指南 | MDN

*学习目标

1.学会使用ajax 根据 接口文档 和 服务器 交互。实际开发中，网页的数据需要从服务器获取。而Ajax技术就是来实现这一功能的。

*如何学习

服务器了解：什么是服务器、服务器的交互流程；
Ajax工作流程
可以使用Ajax向服务器请求数据

正式进入学习~~~

1. 什么是服务器?

1.1 `服务器` 就`是`提供某种服务的 `电脑`(机器)

a.思考：如何让电脑提供某种服务呢？--------答案是安装软件

如：听歌服务需要下载网*云、Q*音乐；视频服务需要下载爱*艺、*酷；聊天服务需要下载Q*、微*

b.综上所述，服务器就是某些安装了特殊软件，可以提供某些服务的电脑。常见的服务器有以下几种

数据库服务
文件服务
多媒体服务(音视频)
邮件服务
Web服务

c.要想让你的电脑成为一台Web服务器，我们只需要安装对应的软件即可。

咳咳，由于这些软件涉及的专业知识属于后台开发领域，我们的重点是了解什么是服务器，并且我们是前端开发，所以我们主要学习如何使用前端中的软件来和服务器进行交互。那么我们前端主要使用什么软件来和服务器进行交互呢？（Chrome）

2. 服务器交互流程

为什么我们只需要在浏览器输入一个网址点击回车之后就可以看到网页呢？why? 为什么我们修改了网页之后，需要在浏览器刷新以下才能看到最新的内容呢？为什么在浏览器输入百度一下，你就知道( http://www.baidu.com) 百度一下，你就知道就可以看到百度网页呢？？？

其实，浏览器和服务器之间的每一次交互，都是由三个部分组成

请求(浏览器发起请求，服务器接收)
处理（服务器处理这个请求）
响应（服务器响应数据给浏览器）

3.浏览器访问服务器的几种方式（代码01）

3.1 a标签

<a href="http://www.baidu.com">点我跳转</a>

3.2 button标签，JavaScript获取dom元素绑定跳转事件

<body>
<button id="btn">点我也可以跳转哟</button>
</body>
<script>
        document.getElementById('btn').onclick = function(){
            window.location.href = 'http://www.jd.com';
        };
</script>

4. ajax工作流程

4.1 什么是Ajax？

Ajax（阿贾克斯）：在不刷新页面的情况下向服务器请求数据

4.2 为什么需要Ajax？

以前学习前端未使用到Ajax时写的页面全部都是固定的假数据，其实网页的数据都是从服务器获取的，一旦服务器数据变化，网页上的内容也会发生变化.
虽然可以通过在浏览器地址栏直接输入网址（url）的方式向服务器获取数据，但是我们的网页会刷新.
学会ajax：就可以做到在不刷新网页的情况下向服务器请求数据，让网站数据内容动态变化。

4.3 Ajax的工作流程

创建XMLHttpRequest对象（小黄人）let xhr = new XMLHttpRequest(); XMLHttpRequest:http请求对象，负责实现ajax技术俗称小黄人
设置请求 xhr.open('get', 'https://autumnfish.cn/api/joke');
发送请求 xhr.send();
注册回调函数 这个函数不是立即执行的，而是等服务器把数据响应返回才会执行（PS：什么时候执行取决于你的网速快慢）

xhr.onload = function () {

console.log(xhr.responseText);

}

按照步骤试试看吧~~~

<script>
    /* 1.ajax： 在页面不刷新的情况下向服务器请求数据
       2.XMLHttpRequest ： http请求对象，负责实现ajax技术（小黄人）
           （1）创建XMLHttpRequest对象
                   * 小黄人，相当于黄袍加身的跑腿外卖小哥哥
           （2）设置请求
                   * 告诉小黄人服务器地址
           （3）发送请求
                   * 小黄人出发去指定地址取外卖（数据）
                        * 2G网速：走路去的
                        * 3G网速：骑膜拜去的
                        * WIFI : 骑电动车去的
                        * 4G   ： 骑小牛牌电动车去的
            （4）注册回调函数
                    * 小黄人把取回的外卖送到你家门口
        
         */

        //1.创建小黄人对象XMLHTTPRequest
        let xhr = new XMLHttpRequest();
        //2.设置请求
        xhr.open('get', '路径(http......)');
        //3.发送请求
        xhr.send();
        //4.注册回调函数
        xhr.onload = function () {
            console.log(xhr.responseText);
            document.body.innerText = xhr.responseText;
        };
    </script>

*名词解释：Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。（例：点击看看=> 什么值得买 | 科学消费认真生活里只要网站往下滚动，就能不用刷新页面跟服务器要数据）

5. Ajax发送get请求与post请求

5.1 - get请求 get传参格式： url?key=value

<script>
      // 1.实例化ajax对象
      let xhr = new XMLHttpRequest()
      // 2.设置请求方法和地址
      // get请求的数据直接添加在url的后面 格式是 url?key=value参数与值
      xhr.open("get", "路径?num=10")
      // 3.发送请求
      xhr.send()
      // 4.注册回调函数
      xhr.onload = function() {
        console.log(xhr.responseText)
      }
</script>

5.2 - post请求

请求方法get和post区别：传参方式不同
get请求：直接在url后面拼接参数
* 参数在url中，安全性不高
post请求：
1.需要设置请求头（固定语法）：xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
* 注意：这是固定格式，错一个字母都不行，强烈建议复制粘贴
2.使用xhr的send方法发送参数： xhr.send('参数名=参数值');
* 注意：不要加前面的?

<script>
      //(1).实例化ajax对象
      let xhr = new XMLHttpRequest()
      //(2).设置请求方法和地址
      xhr.open("post", "路径")
      //(3).设置请求头（post请求才需要设置）
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
      //(4).发送请求 ： 参数格式  'key=value'
      xhr.send("username=admin")
      //(5).注册回调函数
      xhr.onload = function() {
        console.log(xhr.responseText)
      }
</script>

*最后：请求方式和请求地址是由后端写的并发送给我们的接口文档中的内容哦~