Jquery Ajax学习实例向页面发出请求，返回XML格式数据

2023年6月11日上午11:37 • JavaScript

让我们来详细讲解一下JQuery Ajax学习实例，这里我会给出两个示例说明，为了方便描述，我会分成步骤来讲解。

基本概念

在开始之前，我们需要先理解一些基本概念。

AJAX

AJAX 是一种与服务器交换数据并更新部分网页而不重载整个页面的技术。AJAX 不是新技术，它是使用了已有的技术，是一种将客户端脚本和服务器端脚本进行异步通信的技术。

JSON

JSON 全称为 JavaScript 对象表示法（JavaScript Object Notation），它是一种轻量级的数据交换格式。JSON 由 JavaScript 编写，但不依赖于 JavaScript。

XML

XML 是一种数据格式。它是一种标记语言，可以被用来存储和传输数据。XML 与 HTML 很相似，但是它的标签不是固定的，而是可以由开发者自定义。在传输数据时，XML 数据必须经过格式化。

RESTful

RESTful 是一种设计风格，它是表述性状态转移（Representational State Transfer）的缩写。它是一种针对 Web 应用的设计风格，它可以更加有效地利用 HTTP 协议中的方法来实现对资源的定义、传输和状态转换。

示例一：获取 JSON 数据

在这个示例中，我们将会向服务器发出请求，并获取一个 JSON 格式的响应。这里我们将使用 httpbin.org 提供的 API。

第一步：编写 HTML 代码

首先，我们需要为我们的示例编写一个 HTML 页面。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AJAX 实例</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $("#btn1").click(function() {
                    $.ajax({
                        url: "https://httpbin.org/get",
                        success: function(result) {
                            $("#div1").html(result.origin);
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <button id="btn1">获取数据</button>
        <div id="div1"></div>
    </body>
</html>

第二步：解释代码

接下来，我们将逐一解释代码。首先，我们引入了 jQuery 库：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

然后，在 $(document).ready() 函数中，我们使用了 $("#btn1").click() 事件来监听按钮的点击事件。当我们点击按钮时，Ajax 将会向 https://httpbin.org/get 发送一个 GET 请求：

$.ajax({
    url: "https://httpbin.org/get",
    success: function(result) {
        $("#div1").html(result.origin);
    }
});

注意，在请求成功时，我们使用了 $("#div1").html(result.origin) 将返回的数据显示在 HTML 页面的某个位置上。

第三步：运行代码

好了，现在我们刷新浏览器，然后点击“获取数据”按钮。你应该会看到你的 IP 地址在页面上显示出来了。

示例二：获取 XML 数据

在这个示例中，我们将会向服务器发出请求，并获取一个 XML 格式的响应。这里我们将使用 httpbin.org 提供的 API。

第一步：编写 HTML 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AJAX 实例</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $("#btn2").click(function() {
                    $.ajax({
                        type: "GET",
                        url: "https://httpbin.org/xml",
                        dataType: "xml",
                        success: function(xml) {
                            var xmlDoc = $.parseXML(xml),
                                $xml = $(xmlDoc),
                                $title = $xml.find("title");

                            $("#div2").html($title.text());
                        },
                        error: function(xhr, status, error) {
                            console.log(xhr.responseText);
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <button id="btn2">获取 XML 数据</button>
        <div id="div2"></div>
    </body>
</html>

第二步：解释代码

第一行代码同样是引入了 jQuery 库：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

然后，我们使用了 $("#btn2").click() 事件来监听按钮的点击事件。当我们点击按钮时，Ajax 将会向 https://httpbin.org/xml 发送一个 GET 请求，并且使用 dataType: "xml" 参数来告诉 Ajax 我们希望得到的是一个 XML 格式的响应。

$("#btn2").click(function() {
    $.ajax({
        type: "GET",
        url: "https://httpbin.org/xml",
        dataType: "xml",
        success: function(xml) {
            var xmlDoc = $.parseXML(xml),
                $xml = $(xmlDoc),
                $title = $xml.find("title");

            $("#div2").html($title.text());
        },
        error: function(xhr, status, error) {
            console.log(xhr.responseText);
        }
    });
});

在请求成功时，我们使用了 $.parseXML(xml) 来将返回的 XML 数据转换为 XML DOM 对象，然后使用 $xml.find("title") 来查找 XML 中的 title 元素，并使用 $title.text() 来获取它的文本内容。最后，我们使用 $("#div2").html($title.text()) 将结果显示在页面上。

如果请求失败，我们使用 console.log(xhr.responseText) 将错误信息打印到控制台上。