Ajax是什么？
-
Ajax就
是让浏览器跟服务器交互的一套API。 它的作用就是可以让浏览器和服务器进行交互。-
说人话： ajax 是一种 用于
向服务器请求数据的 技术
-
-
MDN官网传送门:Ajax - Web 开发者指南 | MDN
什么是服务器?
-
1.
服务器就是提供某种服务的电脑(机器)(计算机) -
2.如何让电脑提供某种服务呢？
安装软 -
3.综上所述，服务器就是某些安装了特殊软件，可以提供某些服务的电脑。常见的服务器有以下几种
-
数据库服务
-
文件服务
-
多媒体服务(音视频)
-
邮件服务
-
Web服务
-
-
4.要想让你的电脑成为一台Web服务器，我们只需要安装对应的软件即可。
浏览器和服务器之间的每一次交互，都是由三个部分组成
-
请求(浏览器发起请求，服务器接收)
-
处理（服务器处理这个请求）
-
响应（服务器响应数据给浏览器）
浏览器访问服务器的几种方式
<body>
<a href="http://www.baidu.com">点我进百度</a>
<button>按钮</button>
<script>
//前端访问网页的几种方式
//直接在 浏览器 地址栏 输入网址url
//html的a标签
//location.href = url
//ajax技术: 网页不跳转的情况下,向服务器请求数据
//ajax作用: 局部刷新
//*局部刷新: 只请求页面一个盒子的数据,提高网页性能
document.querySelector('button').addEventListener('click', function () {
location.href = 'http://www.baidu.com'
})
</script>
</body>什么是ajax？
ajax（阿贾克斯）：在不刷新页面的情况下向服务器请求数据
为什么需要ajax？
-
1.以前写的页面全部都是固定的假数据，其实网页的数据都是从服务器获取的，一旦服务器数据变化，网页上的内容也会发生变化
-
2.虽然可以通过在浏览器地址栏直接输入网址（url）的方式向服务器获取数据，但是我们的网页会刷新
-
3.学会ajax：就可以做到在不刷新网页的情况下向服务器请求数据，让网站数据内容动态变化。
ajax的工作流程
-
1.创建XMLHttpRequest对象
-
let xhr = new XMLHttpRequest();
-
-
2.设置请求
-
xhr.open('get', 'https://autumnfish.cn/api/joke');
-
-
3.发送请求
-
xhr.send();
-
-
4.注册回调函数
-
-
这个函数不是立即执行的，而是等服务器把数据响应返回才会执行（PS：什么时候执行取决于你的网速快慢）
-
xhr.onload = function () {console.log(xhr.responseText);}
-
-
<script>
//内置对象:XMLHttpRequest:负责发送ajax请求
let xhr = new XMLHttpRequest()
//1.创建内置对象(俗称小黄人)
xhr.open('get', 'https://autumnfish.cn/api/joke')
//2.设置请求 方法和地址
xhr.send()
//3.发送请求
xhr.onload = function () {
console.log(xhr.responseText)
}
//4.注册响应事件 执行时间由很多因素决定
</script>名词解释
-
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
-
说人话：ajax就是一套可以让网站跟服务器交互的一种技术，能在我们需要时，不用再刷新网页就能去服务器要一些数据回来
get请求
<script>
/*
1.get传参格式： url?key=value
2.示例： https://autumnfish.cn/api/joke/list?num=10
*/
// 1.实例化ajax对象
let xhr = new XMLHttpRequest()
// 2.设置请求方法和地址
// get请求的数据直接添加在url的后面 格式是 url?key=value
xhr.open("get", "https://autumnfish.cn/api/joke/list?num=10")
// 3.发送请求
xhr.send()
// 4.注册回调函数
xhr.onload = function () {
console.log(xhr.responseText)
let res = JSON.parse(xhr.responseText)
console.log(res)
}
</script>post请求
<script>
/*
请求方法get和post区别： 传参方式不同
get请求： 直接在url后面拼接参数
* 参数在url中，安全性不高
post请求：
1.需要设置请求头（固定语法）：
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
* 注意：这是固定格式，错一个字母都不行，强烈建议复制粘贴
2.使用xhr的send方法发送参数： xhr.send('参数名=参数值');
* 注意：不要加前面的?
*/
//(1).实例化ajax对象
let xhr = new XMLHttpRequest()
//(2).设置请求方法和地址
xhr.open("post", "https://autumnfish.cn/api/user/register")
//(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>什么是接口文档
-
1.接口：Web服务器提供的，让ajax请求的网络地址称之为接口，简称API
-
2.接口文档 ：为了方便开发人员使用，我们的后台小伙伴会提供一种专门的文档，称之为接口文档
-
接口文档，又称为API文档，可以理解为接口的
使用说明书-
接口文档的本质 ：其实就是后台开发（如php）他们写的函数注释。后台在处理请求的时候一般都会写一些函数
-
-
-
3.一个标准的接口文档至少要包含以下三种信息（
只能多，不能少）-
a.请求的地址 （url）
-
b.请求的方法 （get或者post）
-
c.请求的参数
-
-
4.以下是我们这个阶段可能会用到的接口文档，实际开发中为了避免你的
url地址，方法,参数写错，一般强烈建议直接复制粘贴
接口文档示例
-
这个网站可以找到更多接口：GitHub - AutumnFish/testApi: 测试用接口无需数据库，有基础数据
-
随机获取笑话的接口
-
获取多条随机笑话
-
用户注册
-
用户登录
-
新闻列表
-
水果列表