Ajax请求的方法
Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。从客户端拿后端的数据。
创建Ajax的步骤
一、创建Ajax对象
二、连接到服务器（连接后端的接口）
后端接口网址：https://www.fastmock.site/#/
三、发送请求
四、接收返回值。
Ajax的分类：
一、原生Ajax的写法
一、创建Ajax对象
let ajax = new XMLHttpRequest()
二、连接到服务器（连接后端的接口）
1、创建Ajax对象里面有三个参数：open（方法，文件名，同步/异步）
参数一：post（修改）/get（获取）。
参数二：请求的文件名(后端给的接口地址)
参数三：同步（false）异步（true）
异步（true）：Ajax设置成异步的话，如果Ajax没有获取到数据，不会影响后续代码的运行。
同步（false）：Ajax设置成同步的话，如果Ajax没有获取到数据，将会影响后面一系列程序的运行。
所以在创建Ajax对象的时候，一般设置为异步（true）
js程序中，一定是先执行同步代码，再执行异步代码。定时器相当于异步
ajax.open('get', './text.txt', true)
三、发送请求
ajax.send()
四、接收返回值。
ajax.onreadystatechange = function () {
// readyState：请求状态码。
if (ajax.readyState === 4) {
// status:状态码
if (ajax.status === 200) {
console.log(ajax.responseText);
}
}
}
readyState：请求状态码。
此处打印的json为字符串。
1、JSON.parse() 把 json字符串转为对象
2、JSON.stringify().把json对象转为字符串
示例：
// 1.创建Ajax对象
let ajax = new XMLHttpRequest()
// 2.连接服务器，连接后端的接口（./text.txt：模拟的后端接口）。
ajax.open('get', './text.txt', true)
// 3.发送
ajax.send()
// 4.接收
ajax.onreadystatechange = function () {
// readyState：请求状态码。
if (ajax.readyState === 4) {
// status:状态码
if (ajax.status === 200) {
console.log(ajax.responseText);
}
}
}
二、jquery请求Ajax的写法
1、引入jQuery文件
2、get请求
// get 请求。只发送请求
$.get("./data/city.json",
function (data) {
console.log(data);
},
// jquery里的Ajax请求不用转，支持json
"json" //可以是text纯文本，可以是json对象
);
语法：$.get(请求地址, {参数名: 参数值}, 回调函数)
$.get('http://localhost:5566/students',{name:"张三"},r=>{
console.log(r); // r表示请求成功时返回的结果数据
})
post请求
语法：$.post(请求地址, {参数名: 参数值}, 回调函数)
$.post('http://localhost:5566/deleteStudent',{_id:id},r=>{
console.log(r); // r表示请求成功时返回的结果数据
})
通用型方法ajax 既可以写get 又可以写post
（1）get请求
$.ajax({
type: "get", // 请求方式get 或 post
url: url, // 请求的接口地址
dataType: "json", // 返回的数据类型
// 请求成功后的回调函数
success: function (r) {
console.log(r)
},
// 请求失败后调用的函数
error: function (err) {
console.log('请求错误')
}
});>
（2）post请求
发送post请求时，如果请求参数是json字符串格式，需要设置contentType请求头为'application/json'。contentType默认值 "application/x-www-form-urlencoded"。
let params = {
name:name,
hobbies:hobbies.split(',')
}
$.ajax({
url:url, // 请求的接口地址
type:'POST', // 请求方式get 或 post
data:JSON.stringify(params), // 请求的参数
contentType:'application/json',
success:function(r){
console.log(r); // r表示请求成功时返回的结果数据
}
})
三、axios请求AJAX的方法
1、引入axios MSDN库 https://www.bootcdn.cn/axios/
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
2、GET请求
（1）get请求的参数可以直接用？拼接在URL中
axios.get('http://localhost:5566/user?ID=12345').then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
（2）get请求的参数可以写在params对象中
注意： 请求返回结果包含很多信息，需要将结果中的data解构出来。data中存放的才是需要的数据。
axios.get('http://localhost:5566/students', {
params: {
name:name
}
}).then(({ data }) => {
console.log(data)
})
3、POST请求
post请求参数直接写在对象中传入。
axios.post(`http://localhost:5566/deleteStudent`, {
name:name,
hobbies:hobbies.split(','),
}).then(({ data }) => {
console.log(data)
})
4、通用方式axios
axios({
method: 'POST', //请求方法
url: '/axios-server', //url
params: { //请求参数
vip: 10,
level: 30
},
headers: { //设置请求头信息
a: 100,
b: 200
},
//请求体参数
data: {
username: 'admin',
password: 'admin'
}
}).then(response => {
console.log(response);
//响应状态码
console.log(response.status);
//响应状态字符串
console.log(response.statusText);
//响应头信息
console.log(response.headers);
//响应体
console.log(response.data);
})
四、fetch AJAX
1、fetch定义
fetch是一个浏览器内置的全新的请求API。之前我们使用的jquery和axios的请求方法只是对XMLHttpRequest对象的封装。
fetch()函数的第一个参数是url地址，第二个参数是配置对象。
2、GET请求
GET请求的参数，使用?直接拼接在url地址后面，如果有多个参数使用&符号。
fetch(`http://localhost:5566/students?stuName=${stuName}`,{
method:'GET', //设置请求方式（默认是GET）
}).then(response=>{
// 第一个then，用于返回请求的状态信息（检查请求是否成功等等）
// 再通过请求状态对象的.json()方法，返回请求结果
return response.json()
}).then(r =>{
console.log(r) // 返回请求结果
})
3、POST请求
发送post请求时，请求参数如果是json字符串格式，需要配置请求头headers，设置Content-Type为'application/json'。
let params = {
name:name,
hobbies:hobbies.split(','),
}
fetch(url,{
method:'POST',
//配置请求头信息
headers:{
'Content-Type':'application/json'
},
body:JSON.stringify(params) // post请求参数
}).then(r=>{
return r.json()
}).then(r=>{
console.log(r) // 返回请求结果
})
JSON语法
1、以键值对形式保存。
2、由逗号隔开。
3、最后一条数据一定不能有逗号，
4、字符串必须必须放在双引号里面。
5、键(属性)也必须放在双引号里面。
6、json格式文件不可以写注释。
7、多个对象要用数组[]的形式写。json文件内还能写数组和对象。不能单独写函数，函数可以写在对象里。
json文件标准写法示例：
[
{
"id": 101,
"name": "南京",
"pid": 1
},
{
"id": 102,
"name": "杭州",
"pid": 2
}
]
