常见的请求方式

  • 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.获取XMLHttpRequest
	 var 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.获取XMLHttpRequest
	 var 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",// 请求类型post
    dataType: "json",// 服务器响应的数据类型
    success : function(res) {// 成功后返回的数据
    	console.log(res)
        // data = jQuery.parseJSON(data);  // dataType指明了返回数据为json类型，故不需要再反序列化
    },
    error : function (err) {
        console.log(err);
     }
});

3.Axios请求

特点：

  1. 特点
  2. 支持浏览器和node.js
  3. 支持promise
  4. 能拦截请求和响应
  5. 能转换请求和响应数据
  6. 能取消请求
  7. 自动转换JSON数据
  8. 浏览器端支持防止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({// 参数
        name: '张三'
    }),
}).then(res => {
        return res.json()// 处理响应数据
                })
  .catch(err => {
        console.log(err);
        })
  .then(item => {// 成功后返回的数据
        console.log(item );
        })
  .catch(err => {
        console.log(err);
        })