一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

掌握数据无限流:玩转Ajax异步请求的三种绝招!

摘要:在Web开发中,经常需要与服务器进行数据交互。本文介绍了使用Ajax异步请求数据的三种方法,分别是XMLHttpRequest、jQuery Ajax和fetch API。通过这些方法,我们可以实现在不刷新整个页面的情况下获取数据并进行展示,提升用户体验。

引言:

在现代Web应用程序中,动态加载数据变得越来越常见。为了实现这一目标,我们可以使用Ajax(Asynchronous JavaScript and XML)来发送异步请求并获取服务器返回的数据。下面将介绍三种常见的使用Ajax进行异步请求的方法。

方法及步骤:

1. XMLHttpRequest 方法:

  • 创建一个 XMLHttpRequest 对象。
  • 使用 open() 方法指定请求的类型(GET、POST等)和 URL。
  • 发送请求,使用 send() 方法发送请求。
  • 监听 onreadystatechange 事件,当请求状态发生改变时执行对应的处理函数。
  • 在处理函数中,判断请求的状态是否为4(完成)以及状态码是否为200(成功),然后处理服务器返回的数据。

2. jQuery Ajax 方法:

  • 引入 jQuery 库,确保可以使用 $ 符号。
  • 使用 $ajax() 方法发送 Ajax 请求。
  • url 参数中指定请求的 URL。
  • type 参数中指定请求的类型(GET、POST等)。
  • success 参数中指定一个回调函数,在请求成功后执行该函数。
  • 在回调函数中处理服务器返回的数据。

3. Fetch API 方法:

  • 使用 fetch() 函数发送请求,传入请求的 URL。
  • 使用 then() 方法处理 Promise,该方法接收一个回调函数作为参数。
  • 在回调函数中使用 json() 方法将响应转换为 JSON 格式。
  • 再次使用 then() 方法处理 Promise,处理转换后的数据。
  • 在第二个回调函数中处理服务器返回的数据。

以上是每个方法的基本步骤,根据实际需求和具体场景,可以根据需要添加其他操作或处理逻辑。

示例实现

1. XMLHttpRequest

XMLHttpRequest是原生JavaScript提供的API,它是最基本的Ajax技术之一。通过创建一个XMLHttpRequest对象,我们可以发送HTTP请求并处理服务器返回的数据。

以下是一个使用XMLHttpRequest的示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <ul></ul>

    <script>
        let btn = document.querySelector('button'); 
        btn.addEventListener('click', () => {
            let xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://localhost:3000/top/song?type=7')
            xhr.send()
            xhr.onreadystatechange = () => {
                if(xhr.readyState === 4 && xhr.status === 200) {   
                    let ul = document.querySelector('ul');
                    const data = JSON.parse(xhr.responseText).data;
                    for(let i = 0; i < data.length; i++) {
                        let li = document.createElement('li');
                        li.innerHTML = data[i].name;
                        ul.appendChild(li);
                    }
                }
            }
        })
    </script>
</body>
</html>

在上述代码中,我们通过创建一个XMLHttpRequest对象来发送GET请求,并在请求完成后处理服务器返回的数据。通过监听xhr的onreadystatechange事件,我们可以在请求的不同阶段获取到相应的状态。

2. jQuery Ajax

jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和Ajax请求等任务。jQuery提供了简洁易用的Ajax接口,使得发送异步请求变得更加方便。以下是一个使用jQuery Ajax的示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点击</button>
    <ul></ul>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        let btn = document.getElementById('btn');
        btn.addEventListener('click', () => {
            $.ajax({
                url: 'http://localhost:3000/top/song?type=7',
                type: 'get',
                success: (res) => {
                    let ul = document.querySelector('ul');
                    for (let i = 0; i < res.data.length; i++) {
                        let li = document.createElement('li');
                        li.innerText = res.data[i].name;
                        ul.appendChild(li);
                    }
                }
            });
        })
    </script>
</body>
</html>

在上述代码中,我们使用了jQuery的$.ajax()方法发送GET请求,并通过指定urltypesuccess等参数来处理服务器返回的数据。

3. Fetch API

Fetch API是一种新的Web API,它提供了更现代化的方式来发送网络请求。Fetch API使用Promise对象来处理异步请求,使得代码更加简洁和易读。以下是一个使用Fetch API的示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <ul></ul>
    <script>
        let btn = document.querySelector('button');
        btn.addEventListener('click',()=>{
            fetch('http://localhost:3000/top/song?type=7')
                .then((data) => {
                    return data.json();
                })
                .then((res) => {
                    console.log(res);
                    let ul = document.querySelector('ul');
                    for(let i = 0; i < res.data.length; i++){
                        let li = document.createElement('li');
                        li.innerHTML = res.data[i].name;
                        ul.appendChild(li);
                    }
                })

        });
    </script>
</body>
</html>

在上述代码中,我们使用了fetch()函数发送GET请求,并链式调用了then()方法来处理服务器返回的数据。在第一个then()中,我们将返回的响应转换为JSON格式,然后在第二个then()中处理转换后的数据。

通过以上三种方法,我们可以实现在不刷新整个页面的情况下获取数据并进行展示。根据实际需求和项目的技术栈,选择合适的方法来发送异步请求,将会使我们的Web应用更加高效和用户友好。

原文链接:https://juejin.cn/post/7323099490315288628 作者:小白234

(0)
上一篇 2024年1月12日 下午4:11
下一篇 2024年1月13日 上午10:06

相关推荐

发表评论

登录后才能评论