程序员教程

AJAX 数据格式

文本（Text）

文本是最简单的数据格式，它可以直接插入HTML页面中。如果服务器返回的是纯文本数据，无需进行额外处理，可以直接使用。

示例：获取文本数据并更新页面内容

                var xhr = new XMLHttpRequest();
                xhr.open("GET", "example.txt", true);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var responseData = xhr.responseText;
                        document.getElementById("demo").innerHTML = responseData;
                    }
                };
                xhr.send();
                

XML

XML（eXtensible Markup Language，可扩展标记语言）是一种用于描述数据结构的标记语言。XML具有良好的可读性和自描述性，适用于复杂的数据结构场景。使用AJAX获取XML数据时，需要利用DOM（Document Object Model）方法解析和操作XML数据。

获取XML数据并更新页面内容

                var xhr = new XMLHttpRequest();
                xhr.open("GET", "example.xml", true);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var xmlDoc = xhr.responseXML;
                        var title = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
                        document.getElementById("demo").innerHTML = "Title: " + title;
                    }
                };
                xhr.send();
                

JSON

JSON（JavaScript Object Notation，JavaScript对象表示法）是一种轻量级的数据交换格式，具有良好的易读性和结构性。JSON在JavaScript中非常容易处理，可以直接转换为JavaScript对象进行操作。

示例：获取JSON数据并更新页面内容

                var xhr = new XMLHttpRequest();
                xhr.open("GET", "example.json", true);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var responseData = JSON.parse(xhr.responseText);
                        var title = responseData.title;
                        document.getElementById("demo").innerHTML = "Title: " + title;
                    }
                };
                xhr.send();
                

JSON数据示例：

                {
                    "title": "Example Title",
                    "author": "John Doe",
                    "year": 2022
                }
                

结束语

本教程介绍了AJAX中常见的三种数据格式：文本、XML和JSON，以及如何在JavaScript中处理这些数据格式。理解这些知识点将帮助您根据不同场景选择合适的数据格式，并灵活运用AJAX技术与后端服务进行交互。实际项目中，JSON已经成为最常用的数据交换格式，但在某些特定情况下，还需关注文本和XML的处理方法。请继续关注更多关于AJAX和前端开发的学习资源。