原生AJAX和jQuery的Ajax区别
- IT业界
- 2025-09-16 07:18:02
原生 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', ' jsonplaceholder.typicode /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', ' jsonplaceholder.typicode /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=" code.jquery /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: ' jsonplaceholder.typicode /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 回调函数在请求失败时执行。原生AJAX和jQuery的Ajax区别由讯客互联IT业界栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“原生AJAX和jQuery的Ajax区别”
