Ajax及其应用_ajax原理-CSDN博客

本文介绍了Ajax技术，它是用于创建交互式网页的开发技术，可在不刷新页面时与服务器交换数据。阐述了其工作原理、流程，详细讲解了XMLHttpRequest对象的属性、方法和事件，还通过JSONPlaceHolder数据服务案例，展示了获取用户列表和表单提交的应用场景。

1.Ajax工作原理

Ajax，全称Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式、快速动态网页应用的网页开发技术。它允许在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。

1）Ajax的工作原理

浏览器端：JavaScript负责发送HTTP请求，处理服务器返回的响应，并更新页面内容。
XMLHttpRequest对象：是Ajax的核心，它用于在浏览器与服务器之间建立连接，发送请求，并接收响应。
异步通信：Ajax使用异步方式发送请求，这意味着浏览器在等待服务器响应时不会阻塞用户的其他操作。
数据交换：Ajax可以使用多种数据格式进行交换，最常见的是XML和JSON。

2）工作流程

用户在浏览器上执行某个操作（如点击按钮）。
JavaScript捕获这个操作，并创建一个XMLHttpRequest对象。
XMLHttpRequest对象向服务器发送HTTP请求（如GET或POST）。
服务器处理请求，并返回响应。
XMLHttpRequest对象接收响应，并将数据传递给JavaScript。
JavaScript解析响应数据，并动态更新页面内容

2.XMLHttpRequest对象的属性、方法和事件

XMLHttpRequest 对象在 AJAX 中扮演着核心角色，用于在客户端与服务器之间发送请求和接收响应。

1）属性

readyState: 返回一个表示请求/响应过程的当前状态的数字。
- 0 (未初始化): 对象已创建，但尚未调用 open() 方法。
- 1 (已打开): 已调用 open() 方法，但尚未调用 send() 方法。
- 2 (已发送): 已调用 send() 方法，但尚未收到响应。
- 3 (接收中): 正在接收响应数据。
- 4 (已完成): 响应数据已接收完毕，或请求已失败。
status: 返回一个 HTTP 响应的状态码（如 200 表示成功）。
statusText: 返回一个 HTTP 响应的状态文本（如 "OK"）。
responseText: 以字符串形式返回响应数据。
responseXML: 如果响应是 XML，则返回相应的 Document 对象；否则返回 null。
response: 返回响应数据，类型由 responseType 属性决定。
responseType: 设置响应类型（如 "text"、"json"、"document" 等）。

2）方法

open(method, url, async, user, password): 初始化请求。
- method: 请求方法（如 "GET"、"POST" 等）。
- url: 请求的 URL。
- async: 是否异步发送请求（默认为 true）。
- user: 可选的用户名（用于认证）。
- password: 可选的密码（用于认证）。
send(data): 发送请求。如果请求方法为 POST，data 参数可包含要发送的数据。
setRequestHeader(header, value): 设置请求的 HTTP 头。
abort(): 中止当前请求。
getAllResponseHeaders(): 返回所有响应头信息。
getResponseHeader(header): 返回特定响应头的值。

3）事件

onreadystatechange: 当 readyState 属性值改变时触发。

在实际使用中，通常会在 onreadystatechange 事件中检查 readyState 属性，并在其值为 4（表示请求已完成且响应已就绪）时处理响应数据。例如：

var xhr = new XMLHttpRequest();  
xhr.onreadystatechange = function() {  
    if (xhr.readyState === 4 && xhr.status === 200) {  
        console.log(xhr.responseText);  
    }  
};  
xhr.open('GET', 'https://api.example.com/data', true);  
xhr.send();

当请求完成且状态码为 200 时，onreadystatechange 事件处理器会执行，并打印出响应的文本内容。

3.JSONPlaceHolder数据服务案例，及应用场景

1）场景一：获取用户列表并显示在页面上

HTML部分：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>AJAX Example with XMLHttpRequest</title>  
</head>  
<body>  
  
<h1>User List</h1>  
<ul id="user-list"></ul>  
  
<script src="script.js"></script>  
</body>  
</html>

JS部分：

document.addEventListener('DOMContentLoaded', function() {  
    var userList = document.getElementById('user-list');  
    var xhr = new XMLHttpRequest();  
  
    xhr.onreadystatechange = function() {  
        if (xhr.readyState === 4 && xhr.status === 200) {  
            var users = JSON.parse(xhr.responseText);  
            users.forEach(function(user) {  
                var listItem = document.createElement('li');  
                listItem.textContent = user.name;  
                userList.appendChild(listItem);  
            });  
        }  
    };  
  
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/users', true);  
    xhr.send();  
});

使用 XMLHttpRequest 对象发送一个 GET 请求到 JSONPlaceholder 的用户列表 API。当请求完成时，检查响应状态码是否为 200，然后将响应文本解析为 JSON 对象。接着，遍历这个对象数组，为每个用户创建一个列表项，并将其添加到页面的 <ul> 元素中。

2）场景二：表单提交并获取响应

HTML部分：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<title>AJAX Form Submission</title>  
</head>  
<body>  
  
<h1>Post a Comment</h1>  
<form id="comment-form">  
    <input type="text" id="comment-text" placeholder="Enter your comment...">  
    <input type="submit" value="Submit">  
</form>  
  
<div id="comment-response"></div>  
  
<script src="script.js"></script>  
</body>  
</html>

JS部分：

document.addEventListener('DOMContentLoaded', function() {  
    var form = document.getElementById('comment-form');  
    form.addEventListener('submit', function(event) {  
        event.preventDefault(); // Prevent form from submitting normally  
        var commentText = document.getElementById('comment-text').value;  
        var xhr = new XMLHttpRequest();  
  
        xhr.onreadystatechange = function() {  
            if (xhr.readyState === 4 && xhr.status === 201) {  
                var response = JSON.parse(xhr.responseText);  
                var responseDiv = document.getElementById('comment-response');  
                responseDiv.textContent = 'Comment posted: ' + response.title;  
            } else if (xhr.status !== 200) {  
                alert('Error: ' + xhr.status);  
            }  
        };  
  
        var data = 'text=' + encodeURIComponent(commentText);  
        xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);  
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  
        xhr.send(data);  
    });  
});

监听表单的提交事件，并使用 AJAX 来异步地提交评论。当用户点击提交按钮时，阻止表单的默认提交行为，获取输入框中的文本，并创建一个 XMLHttpRequest 对象。然后，设置请求方法为 POST，设置请求头为 application/x-www-form-urlencoded，并发送包含评论文本的请求。当请求完成时，检查响应状态码，如果状态码为 201，表示评论已成功创建，解析响应文本并显示评论的标题。如果状态码不是 200，显示一个错误提示。