Ajax概述

Ajax

一句话，Ajax其实是利用JS代码通过BOM编程来请求服务器的数据，然后再对这些数据进行解析后，通过DOM编程来使得这些数据回显到用户页面

Ajax简介

• AJAX = Asynchronous JavaScript and XML(异步的javaScript和XML)
• AJAX是一种使用现有标准的新方法
• 其最大优点是在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容
• AJAX不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行
• XMLHttpRequest只是Ajax的一种方式

Ajax工作原理

1. 当浏览器发生某个事件后创建XMLHttpRequest对象，通过Internet发送HttpRequest请求到服务器
2. 服务器处理HttpRequest请求后创建响应并将数据返回给浏览器
3. 浏览器接收到服务器的响应后使用JS处理被返回的数据，然后更新页面内容

原生实现ajax

回调函数

回调函数作为处理异步操作的方式，它允许程序再等待某些操作完成时继续执行其他任务，不必阻塞整个程序

一旦异步任务完成，系统会调用预先定义好的回调函数来处理异步操作的结果

当有多个异步请求时可以使用Promise来进行响应的区分

使用回调函数实例

<script>
    function loadXMLDoc(){
        
        //创建XMLHttpRequest对象
        var xmlhttp = new XMLHttpRequest();
        
        //回调函数处理响应结果
        //通过设置 onreadystatechange 事件处理程序来监听请求的状态变化
        xmlhttp.onreadystatechange = function(){
        
            //检查XMLHttpRequest对象的readyState和status属性。
            //readyState为4表示请求已完成，status为200表示服务器响应成功。
            if(xmlhttp.readyState ==4 && xmlhttp.status ==200){
            
                //将服务器返回的响应文本赋给页面上id为"myDiv"的元素的innerHTML属性
                //responseText存放的是响应体中的数据
                document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
            }
        }
        
        //设置请求方式和请求的资源路径
        //第一个参数为请求方式，第二个为请求地址，第三个为是否异步请求
        xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
        
        //发送请求
        xmlhttp.send();
    }
</script>

使用Promise实例

function fetchData(url) {
    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onload = function() {
            if (xhr.status === 200) {
                resolve(JSON.parse(xhr.responseText));
            } else {
                reject(xhr.statusText);
            }
        };
        xhr.send();
    });
}

fetchData('url1')
    .then(data => {
        // 处理第一个请求的数据
        console.log(data);
    })
    .catch(error => console.error('Error:', error));

fetchData('url2')
    .then(data => {
        // 处理第二个请求的数据
        console.log(data);
    })
    .catch(error => console.error('Error:', error));