1、ajax介绍与实现

1、ajax介绍

ajax就是从服务器获取数据的一种技术--管道

1-1、同步与异步

//错误示例演示同步
console.log(1);
con.log();
console.log(2);

// 异步 涉及到对资源（文件的上传下载）的操作都应该是异步
console.log(1);
setTimeout(()=>{
        console.log('http');
},1000)
console.log(2);
输出结果：1,2,http

2、实现ajax

实现ajax的前提条件
    1、html页面
    2、需要后端给我们提供数据接口
    3、通过DOM将获取的数据渲染到页面上

原生ajax实现

原生ajax分四步实现请求
        var btn = document.getElementById('btn')
        var app = document.getElementById('app')
        btn.onclick=function(){
            //  1、创建ajax的核心地址
            var xhr = new XMLHttpRequest()
            // 2、需要与服务器建立链接
            xhr.open("GET","http://127.0.0.1:5501/AJAX/mock/index.json",true)
            //  3、发送请求
            xhr.send()
            // 4、响应数据
            /* 
            onreadystatechange监听服务器状态变化
            */
            xhr.onreadystatechange = function(){
                // readyState值代表服务器响应的变化 ===4 请求完成，响应准备就绪
                if(xhr.readyState === 4){
                    // status==200请求成功,数据成功的响应
                    if(xhr.status>=200 && xhr.status<300){
                        console.log(xhr.responseText);
                        var res = JSON.parse(xhr.responseText)
                        console.log(res);
                        app.innerHTML = xhr.response
                    }
                }
            }
        }

jQuery实现ajax

var url = 'http://127.0.0.1:5501/AJAX/mock/index.json'
$.ajax({
    url,
    success:res=>{
            console.log(res);
        }    
})