Ajax，即Asynchronous JavaScript and XML，是一种创建交互式、快速动态网页应用的网页开发技术。它的工作原理为：1.创建对象：JavaScript创建XmlHttpRequest对象，用于与服务器通信；2.设置请求：指定请求方法（GET或POST）和URL；3.发送请求：调用send()方法发送请求至服务器；4.处理响应：服务器响应后，通过回调函数处理响应数据，如更新页面内容；5.读取数据：使用responseText或responseXML属性读取服务器返回的数据。
XMLHttpRequest 对象是浏览器提供的一个 JavaScript 接口，它允许 Web 应用程序与服务器进行异步通信。它的属性是：
1.readyState：这是一个整数，表示请求/响应过程的当前活动阶段；
2.status：服务器返回的 HTTP 状态码（例如，200 表示成功，404 表示未找到）
3.statusText:服务器返回的 HTTP 状态文本;
4.responseText：服务器返回的文本响应;
5.responseXML：服务器返回的 XML 响应，解析为 Document 对象;
6.onreadystatechange：一个事件处理器，当 readyState 属性改变时调用。
它的方法是：
1.open(method, url, async, user, password)：method：HTTP 请求方法（如 "GET" 或 "POST"）；url：请求的 URL；async：一个可选的布尔值，指定请求是否应为异步。默认为 true；user 和 password：用于身份验证的可选用户名和密码。
2.send(data)：发送请求到服务器。对于 POST 请求，data 是要发送的数据。
3.setRequestHeader(header, value)：在请求发送之前设置 HTTP 请求头。
4.abort()：中断请求。
5.getResponseHeader(header)：返回指定的 HTTP 响应头。
6.getAllResponseHeaders()：返回所有 HTTP 响应头，作为一个字符串。
XMLHttpRequest 对象主要依赖一个事件：readystatechange。
当 readyState 属性改变时触发。通常，我们在 onreadystatechange 事件处理器中检查 readyState 是否为 4（DONE），并且 status 是否为 200，然后处理响应数据。
使用JSONPlaceholder作为数据服务是一个很好的选择，因为它提供了一个简单的RESTful API，用于模拟CRUD（创建、读取、更新、删除）操作。以下是一个使用Ajax和XMLHttpRequest对象与JSONPlaceholder交互的案例，涵盖了多种应用场景：
以下是一个案例，它涉及以下几个应用场景：
1.获取数据并显示在页面上。
2.处理异步请求和响应。
3.错误处理
4.发送带参数的请求
一.首先，我们创建一个简单的HTML页面，包含一些按钮和用于显示数据的元素。
Ajax with XMLHttpRequest
二.接下来，我们编写JavaScript代码来处理用户交互和Ajax请求。
document.addEventListener('DOMContentLoaded', function() { var getPostsButton = document.getElementById('getPosts'); var getPostByIdButton = document.getElementById('getPostById'); var postsDiv = document.getElementById('posts'); // 获取文章列表 getPostsButton.addEventListener('click', function() { var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var posts = JSON.parse(xhr.responseText); displayPosts(posts); } }; xhr.onerror = function() { alert('请求失败，请检查您的网络连接或API地址。'); }; xhr.send(); }); // 根据ID获取文章 getPostByIdButton.addEventListener('click', function() { // 这里为了简单起见，我们假设有一个ID输入框，但实际上你需要从用户那里获取这个ID var postId = prompt('请输入文章ID：'); if (postId) { var xhr = new XMLHttpRequest(); xhr.open('GET', `https://jsonplaceholder.typicode.com/posts/${postId}`, true); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { var post = JSON.parse(xhr.responseText); displayPost(post); } else { alert('无法找到指定ID的文章。'); } } }; xhr.send(); } }); // 显示文章列表 function displayPosts(posts) { postsDiv.innerHTML = ''; // 清空之前的内容 posts.forEach(function(post) { var postElement = document.createElement('div'); postElement.innerHTML = `
${post.title}
${post.body}
`; postsDiv.appendChild(postElement); }); } // 显示单篇文章 function displayPost(post) { postsDiv.innerHTML = `${post.title}
${post.body}
`; } });三.应用场景说明
1.获取数据并显示在页面上：当用户点击“获取文章列表”按钮时，页面会发送一个GET请求到JSONPlaceholder的/posts端点，并在接收到响应后，将文章列表解析并显示在页面上。
2.处理异步请求和响应：XMLHttpRequest对象的onreadystatechange事件处理器用于处理异步请求。只有当请求完成且响应状态为200时，我们才处理响应数据。
3.错误处理：我们为XMLHttpRequest对象添加了一个onerror事件处理器，用于在请求失败时显示一个警告。
4.发送带参数的请求：当用户点击“根据ID获取文章”按钮时，页面会提示用户输入一个文章ID，并据此构造带有ID参数的URL。
推荐阅读
您阅读本篇文章共花了：
发表评论