AJAX 和 JSON

本文链接：https://blog.youkuaiyun.com/qq_41302594/article/details/99220895

本文深入探讨了AJAX（异步JavaScript和XML）的概念及其实现方式，包括原生JavaScript和jQuery两种方法，同时介绍了JSON在数据交换中的作用，旨在提升网页应用的交互性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

AJAX 和 JSON
- AJAX

AJAX

1. 概念

Asynchronous JavaScript And XML 异步的JavaScript 和 XML，是指一种创建交互式网页应用的网页开发技术。

AJAX 是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量的数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不适用AJAX）如果需要更新内容，必须重载整个网页页面。

提升用户的体验。

1.1 异步和同步：客户端和服务端相互通信的基础上

同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他的操作。

异步：客户端不需要等待服务器的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

2. 实现方式

2.1 原生 JavaScript 实现方式 - 了解

发送异步请求

创建和新对象

var xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest;
            }else {
                // code for IE6， IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

发送请求

参数:
- 请求方式: GET、POST
  - get方式：请求参数在URL后面拼接。send方法为空参
  - post方式：请求参数在send方法中定义。
- 请求的URL
- 同步或异步请求： true 异步或 false 同步
```
xmlhttp.open("GET", "ajaxServlet?username=tom",true);
```
发送请求
```
xmlhttp.send();
```

接受并处理来自服务器的相应结果，获取方式：xmlhttp.responseText

// 当xmlhttp对象的就绪状态改变时会触发一个事件，onreadystatechange
            xmlhttp.onreadystatechange = function() {
                // 判断就绪状态是否为 4，判断响应状态是否为200
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    // 获取服务器的相应结果
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            }

所有代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun() {
            // 发送异步请求
            // 1.创建和新对象
            var xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest;
            }else {
                // code for IE6， IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            // 2. 发送请求
            /*
                参数:
                    1. 请求方式: GET、POST
                    2. 请求的URL
                    3. 同步或异步请求 ： true 异步 或 false 同步
            */
            xmlhttp.open("GET", "ajaxServlet?username=tom",true);

            // 3. 发送请求
            xmlhttp.send();

            // 4. 接受并处理来自服务器的响应结果
            // 获取方式：xmlhttp.responseText
            // 什么时候获取？当服务器响应成功后再获取

            // 当xmlhttp对象的就绪状态改变时会触发一个事件，onreadystatechange
            xmlhttp.onreadystatechange = function() {
                // 判断就绪状态是否为 4，判断响应状态是否为200
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    // 获取服务器的相应结果
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            }
        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input type="text">
</body>
</html>

2.2 JQuery 实现方式 - 前提：导入jQuery

$.ajax()

语法： $.ajax({键值对});

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        function fun() {
            // 使用 $.ajax() 发送异步请求
            $.ajax({
                url: "ajaxServlet",
                type: "POST",
                data: {"username" : "jack", "age": 23},
                success:function(data) {
                    alert(data);
                },
                dataType: "text" // 设置接收响应数据的格式
            })
        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input type="text">
</body>
</html>

$.get()：发送get请求

语法：$.get(url, [data], [callback], [type])

参数：
- url：请求路径
- data：请求参数
- callback：回调函数
- type：相应结果的类型

实例代码：

<script>
        function fun() {
           // 定义方法：
            $.get("ajaxServlet", {username:"rose"}, function (data){
                alert(data)
            }, "text");
        }
</script>

$.post()：发送post请求

语法：

除了名称不一样，其他的用法和 $.get() 一样。
示例代码：

<script>
        function fun() {
           // 定义方法：
            $.post("ajaxServlet", {username:"rose"}, function (data){
                alert(data)
            }, "text");
        }
</script>