当前位置：首页 > news >正文

原生AJAX和jQuery的Ajax区别

news 来源：原创 2025/5/17 13:10:01

原生 JavaScript 实现 AJAX

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生 AJAX 示例</title>
</head>

<body>
    <button id="fetchDataBtn">获取数据</button>
    <div id="result"></div>

    <script>
        document.getElementById('fetchDataBtn').addEventListener('click', function () {
            // 1. 创建 XMLHttpRequest 对象
            const xhr = new XMLHttpRequest();

            // 2. 初始化请求
            xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);

            // 3. 监听状态变化
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        // 请求成功，将响应数据显示在页面上
                        const data = JSON.parse(xhr.responseText);
                        document.getElementById('result').innerHTML = `标题：${data.title}`;
                    } else {
                        // 请求失败，显示错误信息
                        document.getElementById('result').innerHTML = `请求出错，状态码：${xhr.status}`;
                    }
                }
            };

            // 4. 发送请求
            xhr.send();
        });
    </script>
</body>

</html>

代码解释：

创建 XMLHttpRequest 对象：const xhr = new XMLHttpRequest(); 这行代码创建了一个用于处理 AJAX 请求的对象。
初始化请求：xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true); 这里使用 open 方法初始化请求，参数分别为请求方法（GET）、请求的 URL 以及是否异步（true 表示异步）。
监听状态变化：xhr.onreadystatechange 用于监听 XMLHttpRequest 对象的状态变化。当 readyState 变为 4 时，表示请求已完成，再根据 status 状态码判断请求是否成功（200 表示成功）。
发送请求：xhr.send(); 这行代码将请求发送到服务器。

jQuery 实现 AJAX

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery AJAX 示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <button id="fetchDataBtn">获取数据</button>
    <div id="result"></div>

    <script>
        $(document).ready(function () {
            $('#fetchDataBtn').click(function () {
                $.ajax({
                    url: 'https://jsonplaceholder.typicode.com/todos/1',
                    method: 'GET',
                    success: function (data) {
                        // 请求成功，将响应数据显示在页面上
                        $('#result').html(`标题：${data.title}`);
                    },
                    error: function (xhr, status, error) {
                        // 请求失败，显示错误信息
                        $('#result').html(`请求出错，状态码：${xhr.status}`);
                    }
                });
            });
        });
    </script>
</body>

</html>

代码解释：

引入 jQuery 库：通过 <script> 标签引入 jQuery 库，确保后续可以使用 jQuery 的方法。
绑定点击事件：使用 $(document).ready() 确保文档加载完成后再执行代码。$('#fetchDataBtn').click() 为按钮绑定点击事件。
发送 AJAX 请求：$.ajax() 方法用于发送 AJAX 请求，通过配置 url 和 method 指定请求的 URL 和方法。success 回调函数在请求成功时执行，error 回调函数在请求失败时执行。