ajax实例js

Ajax是一种无需重新加载页面即可向服务器发送HTTP请求的JavaScript技术，以下是一个简单的Ajax实例：，，``

javascript，var xhr = new XMLHttpRequest(); //创建XMLHttpRequest对象，xhr.open('GET', 'https://example.com/api/data', true); //配置请求，xhr.onreadystatechange = function() {，    if (xhr.readyState == 4 && xhr.status == 200) {，        console.log(xhr.responseText); //处理响应数据，    }，};，xhr.send(); //发送请求，

AJAX（Asynchronous JavaScript and XML）即异步JavaScript和XML，是一种用于创建快速动态网页的技术，它能够在不重新加载整个网页的情况下，与服务器交换数据并更新部分网页内容，以下是一些常见的AJAX实例及其详细解释：

1、简单GET请求实例

功能描述：当用户点击按钮时，向服务器发送一个GET请求，获取服务器上的数据，并将数据显示在网页的指定位置。

代码示例

HTML部分

         <!DOCTYPE html>
         <html lang="en">
         <head>
             <meta charset="UTF-8">
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
             <title>Simple AJAX GET Request</title>
         </head>
         <body>
             <button id="loadDataBtn">Load Data</button>
             <div id="dataContainer"></div>
             <script src="script.js"></script>
         </body>
         </html>

JavaScript部分（script.js）

         document.getElementById('loadDataBtn').addEventListener('click', function() {
             var xhr = new XMLHttpRequest();
             xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
             xhr.onreadystatechange = function() {
                 if (xhr.readyState == 4 && xhr.status == 200) {
                     var data = JSON.parse(xhr.responseText);
                     document.getElementById('dataContainer').innerHTML = '<p>' + data.title + '</p>';
                 }
             };
             xhr.send();
         });

代码解释：当用户点击“Load Data”按钮时，通过new XMLHttpRequest()创建一个新的AJAX请求对象，使用open方法指定请求类型为GET，以及请求的URL，设置onreadystatechange事件处理程序，当请求完成且状态码为200时，解析返回的JSON数据，并将标题显示在dataContainer元素中，调用send方法发送请求。

2、简单POST请求实例

功能描述：从用户输入中获取数据，然后通过POST请求将数据发送到服务器进行处理，并在网页上显示服务器返回的响应结果。

代码示例

HTML部分

         <!DOCTYPE html>
         <html lang="en">
         <head>
             <meta charset="UTF-8">
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
             <title>Simple AJAX POST Request</title>
         </head>
         <body>
             <form id="dataForm">
                 <label for="username">Username:</label>
                 <input type="text" id="username" name="username"><br><br>
                 <label for="email">Email:</label>
                 <input type="text" id="email" name="email"><br><br>
                 <input type="submit" value="Submit">
             </form>
             <div id="responseContainer"></div>
             <script src="script.js"></script>
         </body>
         </html>

JavaScript部分（script.js）

         document.getElementById('dataForm').addEventListener('submit', function(event) {
             event.preventDefault();
             var xhr = new XMLHttpRequest();
             xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
             xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
             xhr.onreadystatechange = function() {
                 if (xhr.readyState == 4 && xhr.status == 201) {
                     var response = JSON.parse(xhr.responseText);
                     document.getElementById('responseContainer').innerHTML = '<p>Post ID: ' + response.id + '</p>';
                 }
             };
             var username = document.getElementById('username').value;
             var email = document.getElementById('email').value;
             xhr.send('username=' + username + '&email=' + email);
         });

代码解释：当用户提交表单时，阻止表单的默认提交行为，创建一个新的AJAX请求对象，并设置请求类型为POST和请求的URL，设置请求头中的Content-type为application/x-www-form-urlencoded，以便正确地发送表单数据，在onreadystatechange事件处理程序中，当请求完成且状态码为201时，解析服务器返回的JSON数据，并将新创建的帖子ID显示在responseContainer元素中，获取用户输入的用户名和电子邮件，并通过send方法将数据发送到服务器。

3、动态加载内容实例

功能描述：当用户滚动到页面底部时，自动向服务器发送请求获取更多数据，并将新的数据追加到现有内容的后面，实现无限滚动加载的效果。

代码示例

HTML部分

         <!DOCTYPE html>
         <html lang="en">
         <head>
             <meta charset="UTF-8">
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
             <title>Infinite Scrolling with AJAX</title>
             <style>
                 #content {
                     height: 1500px;
                 }
             </style>
         </head>
         <body>
             <div id="content">
                 <div id="itemsContainer"></div>
             </div>
             <script src="script.js"></script>
         </body>
         </html>

JavaScript部分（script.js）

         window.onscroll = function() {
             if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
                 loadMoreItems();
             }
         };
         function loadMoreItems() {
             var xhr = new XMLHttpRequest();
             xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
             xhr.onreadystatechange = function() {
                 if (xhr.readyState == 4 && xhr.status == 200) {
                     var items = JSON.parse(xhr.responseText);
                     var itemsContainer = document.getElementById('itemsContainer');
                     items.forEach(function(item) {
                         var itemElement = document.createElement('div');
                         itemElement.innerHTML = '<h3>' + item.title + '</h3><p>' + item.body + '</p>';
                         itemsContainer.appendChild(itemElement);
                     });
                 }
             };
             xhr.send();
         }

代码解释：监听窗口的scroll事件，当用户滚动到页面底部时，调用loadMoreItems函数，在该函数中，创建一个新的AJAX请求对象，并向服务器发送GET请求以获取更多数据，当请求完成且状态码为200时，解析服务器返回的JSON数据，并为每个数据项创建一个新的HTML元素，然后将这些元素追加到itemsContainer容器中，这样就实现了无限滚动加载的效果。

上述实例展示了AJAX在不同场景下的应用，包括简单GET请求、简单POST请求以及动态加载内容，在实际开发中，可以根据具体需求进行扩展和优化，例如添加错误处理、加载动画等，以提高用户体验和应用的可靠性。

以上就是关于“ajax实例js”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!

原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/842120.html

ajax实例js

相关推荐

ajax向服务器发送数据

Ajax技术实现MySQL数据提交

ajax与数据库连接

api接口在html怎么写

ajax后台处理返回json值示例代码

ajax实现数据保存到数据库

发表回复

Share To :