1.Ajax
Ajax: 浏览器跟服务器交互的一套API。 它的作用就是可以让浏览器和服务器进行交互。
服务器: 就是提供某种服务的 电脑(机器)
如何让电脑提供某种服务呢？安装软件
-
想让你的电脑提供
听歌服务，需要装什么软件呢？- 网易云、qq音乐
-
想让你的电脑提供
视频服务，需要装什么软件呢？- 爱奇艺，优酷
-
想让你的电脑提供
聊天服务，需要装什么软件呢？- qq，微信
服务器就是某些安装了特殊软件，可以提供某些服务的电脑 常见的服务器有以下几种
- 数据库服务
- 文件服务
- 多媒体服务(音视频)
- 邮件服务
- Web服务
2.访问浏览器的几种方式
<body>
<a href="http://www.baidu.com">点我月薪过万</a>
<button class="btn">点我有惊喜</button>
<script>
/* 前端访问服务器几种方式
1. 直接在 浏览器地址栏 输入 网址url
2. HTML的a标签的href属性
3. location.href = ''
4. ajax技术
区别:
前面三种就是跳转页面
ajax（阿贾克斯）：能在不刷新页面的情况下向服务器请求数据,局部刷新
*/
document.querySelector('.btn').onclick = function () {
location.href = 'http://www.jd.com'
}
</script>
</body>
3. ajax的工作流程
1.设置请求 (前端)
2.发送请求 (后端)
3.响应 (后端)
<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', 'https://autumnfish.cn/api/joke');
//3.发送请求
xhr.send();
//4.注册回调函数
/* 这个函数不是立即执行的，而是等服务器把数据响应返回才会执行（PS：什么时候执行取决于你的网速快慢） */
xhr.onload = function () {
console.log(xhr.responseText);
document.body.innerText = xhr.responseText;
};
</script>
4.get和post请求
4.1.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)
}
</script>
4.2.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>
5.接口文档
-
接口：Web服务器提供的，让ajax请求的网络地址称之为接口，简称API
-
接口文档 ：为了方便开发人员使用，我们的后台小伙伴会提供一种专门的文档，称之为接口文档
-
接口文档，又称为API文档，可以理解为接口的
使用说明书 -
接口文档的本质 ：其实就是后台开发（如php）他们写的函数注释。后台在处理请求的时候一般都会写一些函数
-
-
一个标准的接口文档至少要包含以下三种信息（
只能多，不能少）- a.请求的地址 （url）
- b.请求的方法 （get或者post）
- c.请求的参数
-
以下是我们这个阶段可能会用到的接口文档，实际开发中为了避免你的
url地址，方法,参数写错，一般强烈建议直接复制粘贴
