什么是ajax

Ajax不是某种编程语言
是一种在无需重新加载整个网页的情况下,能够局部更新网页的技术

同步和异步

同步:客户端向服务器端发送请求的时候,用户不能进行其他的操作
烧水完毕之后 才可以看书
异步:客户端向服务器端发送请求的时候,用户可以进行其他的操作
烧水的同时 可以看书

定时器模仿异步

  1. <script>
  2.         console.log(1);
  3.         setTimeout(()=>{
  4.             console.log("http")
  5.         },1000)
  6.         console.log(2);
  7. </script>
  8. 先输出1，再输出2，最后输出http

封装ajax

  1. <script>
  2.         function ajax({
  3.             url,
  4.             method,
  5.             success
  6.         }){
  7.             /* ajax 如何使用ajax向后台获取数据*/
  8.             /* 1. 创建ajax核心对象*/
  9.             var xhr =  new XMLHttpRequest();
  10.             /* 2.与服务器建立连接 xhr.open(method,url,async) 
  11.             请求的方式,地址,是否异步
  12.             */
  13.             xhr.open("get",url,true)
  14.             /* 3.发送请求 */
  15.             xhr.send()
  16.             /* 4.响应 */
  17.             /* onreadystatechange  监听服务器的响应状态*/
  18.             xhr.onreadystatechange = function(){
  19.                 /* xhr.status  服务器端响应的状态码  200 */
  20.                 /* xhr.readyState 服务器响应的进度  4 响应已经完成 */
  21.                 if(xhr.readyState == 4 && xhr.status == 200){
  22.                     var res = JSON.parse(xhr.responseText);
  23.                     /* JSON.parse()  可以json格式的字符串,转换为json格式的数据 */
  24.                     success(res);
  25.                 }
  26.             }
  27.         }
  28.         ajax({
  29.             url:"http://192.168.4.18:8000/",
  30.             method:"get",
  31.             success:res=>console.log(res)
  32.         })
  33. </script>