Ajax请求，JQuery发送请求，Axios请求，Fetch请求总结

常见的请求方式

1.Ajax请求
- 定义：
- 同步与异步的区别：
- Ajax的工作原理:
- 实现AJAX的基本步骤:
- - Get请求:
  - Post请求:
2.JQuery发送请求
- Get请求:
- Post请求:
3.Axios请求
- 特点：
- - Get请求:
  - Post请求:
4.Fetch请求
- 特点
- - Get请求:
  - Post请求:

1.Ajax请求

定义：

Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

同步与异步的区别：

同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。

异步提交：当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显示出来。

Ajax的工作原理:

客户端发送请求，请求交给xhr，xhr把请求提交给服务，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上

实现AJAX的基本步骤:

要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:

Get请求:

  // 1.获取XMLHttpRequestvar xhr = new XMLHttpRequest()// 2.设置请求方式，请求地址，参数xhr.open("get","https://www.baidu.com/?callback="+fun,true)// 3.指定回调函数处理响应xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){console.log(xhr.responseText)}}//4.发送请求xhr.send()

Post请求:

  // 1.获取XMLHttpRequestvar xhr = new XMLHttpRequest()// 2.设置请求方式，请求地址，xhr.open("post","https://www.baidu.com",true)// 3.指定回调函数处理响应xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){console.log(xhr.responseText)}}// post请求必须设置xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");// 4.发送请求xhr.send("userName="+name)

2.JQuery发送请求

JQuery发送请求，在原生Ajax基础上进行了一次封装

Get请求:

$.ajax({url : "https://www.baidu.com",data: {name: '张三',age: 18},// 请求带过去的参数,type : "get",success : function(res){// 成功后返回的数据console.log(res);},error : function (err) {console.log(err);}})

Post请求:

$.ajax({url: "https://www.baidu.com",// 请求的地址data: {name: '张三'},// 请求带过去的参数type: "POST",// 请求类型postdataType: "json",// 服务器响应的数据类型success : function(res) {// 成功后返回的数据console.log(res)// data = jQuery.parseJSON(data);  // dataType指明了返回数据为json类型，故不需要再反序列化},error : function (err) {console.log(err);}
});

3.Axios请求

特点：

特点
支持浏览器和node.js
支持promise
能拦截请求和响应
能转换请求和响应数据
能取消请求
自动转换JSON数据
浏览器端支持防止CSRF(跨站请求伪造)

Get请求:

axios.get("https://www.baidu.com",{params:{type: 'pop',// 参数page: 1// 参数}
}).then(res => {// 成功后返回的结果console.log(res.data)
}).catch(err => {// 失败后返回的结果console.log(err)
})

Post请求:

axios.post("https://www.baidu.com",{firstName: 'Fred',// 参数lastName: 'Flintstone'// 参数
}).then(res => {// 成功后返回的结果console.log(res)
}).catch(err => {// 失败后返回的结果console.log(err)
})

4.Fetch请求

特点

fetch()方法与XMLHttpRequest类似，fetch也可以发起ajax请求，但是与XMLHttpRequest不同的是，fetch方式使用Promise，相比较XMLHttpRequest更加的简洁。
fetch方法的then会接收一个Response实例，值得注意的是fetch方法的第二个then接收的才是后台传过来的真正的数据，一般第一个then对数据进行处理等。
例如fetch处理JSON响应时回调函数有一个json()方法，可以将原始数据转换为json对象

Get请求:

fetch(`https://www.baidu.com?name=${name}&age=${age}`, {method: 'GET',
}).then(res => {return res.json()// 处理响应数据}).catch(err => {console.log(err);}).then(item => {// 成功后返回的数据console.log(item );}).catch(err => {console.log(err);})

Post请求:

fetch('https://www.baidu.com', {method: 'POST', headers: {//处理请求头"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"},body: JSON.stringify({// 参数email: '123@163.com'name: '张三'}),
}).then(res => {return res.json()// 处理响应数据}).catch(err => {console.log(err);}).then(item => {// 成功后返回的数据console.log(item );}).catch(err => {console.log(err);})