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));

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值