你所不知道的知识~深入理解AJAX:异步JavaScript和XMLajax的意义 ajax简介实现ajax的三种方法

ajax的意义

ajax可谓是前端领域上的颠覆性技
术,在这之前可谓是没有地位可言
前端只能把写好的css和html发给java工程
师,然后把这些代码融入到项目中去,然
后就完成了。这样看来整个项目就只有一份源代
码,这个项目集成了所有代码此时前后端是不分离的。
后来项目能够实现前后端分离就得益于——AJAX

ajax简介

 ajax——async javaScript and xml
 异步 JavaScript and XML（AJAX） 是一种用于在网页上进行数据交换的技术。
 它允许我们在不刷新整个页面的情况下向服务器发送请求并接收响应
 。具体来说，AJAX 可以通过 JavaScript 发起异步请求，与服务器通信，并
 使用 XML 或其他数据格式来传输数据。通俗来讲异步就是同一时间干不同的顺序,不用
 按顺序一件件做

微信截图_20240526205850.png

实现ajax的三种方法

接口

 先举个例子假如现在有一个获取电影列表的按钮,现在
 希望点击这个按钮在界面上能例举出来现在影院热映的电影
 现在问题是这些数据又是从何而来的呢?
 原理是——当点击按钮时会发送一个接口请求(http请求)朝后端要数据。
 那么如何发送接口请求呢？

实现原理

<body>  
<button id="btn">获取电影列表</button>  
<ul id="list ">  
  
</ul>  
<script>
let btn=document.getElementById('btn')//拿到了页面上的按钮
let ul=document.getElementById('list')
btn.addEventListener('click',()=>{
//朝一个接口发送请求,获取到数据展示在页面上
let xhr =new XMLHttpRequest();
//创建一个ajax实例且这个构造函数可以驱使浏览器朝后端发送网络请求
xhr.open('GET',"https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get',true)//配置发送的参数
xhr.send()//发送请求
xhr.onreadystatechange=()=>{//监听请求的过程包括请求刚发出去、求情被后端接收
到、后端返回应答
//console.log(xhr.readyState);
if(xhr.readyState==4&&xhr.status==200){//拿到后端返回的数据
      console.log(JSON.parse(xhr.responseText));
      //展示在页面上
      const movieList=JSON.parse(xhr.responseText).movieList
      for(let i=0;i<movieList.length;i++){
      const li=document.createElement('li');
      li.innerText=movieList[i].nm+'--'+movieList[i].star
      ul.appendChild(li);
      }
  }
}
})//订阅(监听)一个点击事件,
</script>

 展示结果如下

虽然以上代码能够获取到信息但该方法过于麻烦,每次都要写一大段代
码,因此我们要对此进行封装。

jquery

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>Title</title>  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>  
</head>  
<body>  
<button id="btn">JQUERY获取电影列表</button>  
<ul id="list ">  
<li></li>  
</ul>  
<script>  
let ul=document.getElementById('list ')  
let btn=document.getElementById('btn')  
btn.addEventListener('click',()=>{  
//朝一个接口发请求,获取到数据展示在页面上  
$.ajax({  
url:'https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList#!method=get',  
method:'GET', //朝地址发一个get请求 
data:{  //传参,定义了一个对象,参数传给后端后端会跟据传参的值
到数据库中找将数据返回给前端
username:'fu',  
age:18,  
},  
success:function (res){  //回调函数返回请求后得到的结果 
console.log(res);  
  
   }  
  
})  
})  
</script>  
</body>  
</html>

fetch

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>Title</title>  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>  
</head>  
<body>  
<button id="btn">fetch获取电影列表</button>  
<ul id="list ">  
  
</ul>  
<script>  
let ul=document.getElementById('list ')  
let btn=document.getElementById('btn')  
btn.addEventListener('click',()=>{  
//朝一个接口发请求,获取到数据展示在页面上  
fetch("https://mock.mengxuegu.com/mock/65a91543c4cd67421b34c898/movie/movieList?username='fu'&age=18").then((res)=> { //拿到请求后的数据 
//console.log(res); //响应体  
return res.json()  //格式化为json对象
})  
.then((data)=>{  
console.log(data);  
})  
})  
  
</script>  
</body>  
</html>

总结

 三种方法都可以发送接口请求,优先推荐用fetch语法简洁,更加语义化
 更加底层,脱离了XHR,是ES规范里新的实现方式