<script>
        console.log(1);
        setTimeout(()=>{
            console.log("http")
        },1000)
        console.log(2);
    </script>

2.1 实现原生的ajax代码

  /*
        实现ajax的前提
        1 html页面
        2 需要后端给我们提供数据的接口
        3 DOM将获取的数据放到页面上
        1 创建ajax的核心对象
        */
        var url = 'http://127.0.0.1:5500/mock/index.json'
        var xhr = new XMLHttpRequest();
        // 2 需要与服务器建立连接
        xhr.open("get",url,true)
        //3 发送请求
        xhr.send();
        //4 响应数据
        //onreadystatechange 监听服务器状态的变化
        //readystate 值代表服务器响应的变化
        xhr.onreadystatechange = function(){
            //readystate值代表服务器响应的变化 ==4 请求成功 响应准备就绪
            //status==200请求成功，数据成功的响应
            if(xhr.readyState==4 && xhr.status==200){
                console.log(xhr.responseText)
                var res = JSON.parse(xhr.responseText)
                console.log(res)
            }
        }

2.2 使用jqurey来获取ajax的小数据

1 先自己写好一个json文件
2 引入jqurey 和自己写的网络地址
<script>
        var url = "http://127.0.0.1:5500/mock/index.json"
        $.ajax({
            url,
            success:res=>{
                console.log(res)
            }
        })
    </script>

 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
 <script>
        var url = "http://47.108.197.28:8000/book"
        $.ajax({
            url,
            success:res=>{
                console.log(res)
                //jqur已经帮我们封装了和json对象
            }
        })
    </script>

原生js
 <script>
        /*
        前后端接口联调
        */
        var url = "http://47.108.197.28:8000/book"
        //创建一个ajax对象 new一下
        var xhr = new XMLHttpRequest();
        //
        xhr.open('get',url,true)
        xhr.send();
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4 && xhr.status==200){
                console.log(xhr.responseText)
                //处理一下 转换为json格式的数据
                var res = JSON.parse(xhr.responseText)
                console.log(res)
            }
        }