【AJAX ：异步的 JavaScript 和 XML】

最新推荐文章于 2022-10-30 16:58:21 发布

Jade_Heng_Star

最新推荐文章于 2022-10-30 16:58:21 发布

阅读量222

点赞数

分类专栏： JavaWeb 基础文章标签： javascript ajax xml

本文链接：https://blog.csdn.net/Jade_Heng_Star/article/details/127288878

版权

JavaWeb 基础专栏收录该内容

26 篇文章 1 订阅

订阅专栏

【AJAX ：异步的 JavaScript 和 XML】

一、概念

Asynchronous JavaScript And XML ：异步的 JavaScript 和 XML

1. AJAX 引入介绍

AJAX 是一种无需重新加载整个网页的情况下，能够更行部分网页的技术。
通过在后台与服务器进行少量的数据交换，AJAX 可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的部分内容进行更新。
传统的网页（不适用 AJAX）如果需要更新内容，必须重载整个网页页面。

2. 异步和同步

异步和同步：在客户端和服务器端相互通信的基础上
- 客户端必须等待服务器端的响应，在等待的期间客户端不能做其他操作
- 客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他的操作

二、实现方式

1. 原生的 JavaScript 实现方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生JavaScript实现AJAX</title>
    <script>
        // 定义方法
        function fun() {
            // 发送异步请求
            // 1. 创建核心对象
            var xmlhttp;
            if (window.XMLHttpRequest){
                // code for IE7+，Firefox，Chrome，Opera，Safari
                xmlhttp=new XMLHttpRequest();
            }else {
                // code for IE6，IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            // 2. 建立连接
            // 参数：
            //  1.请求方式：GET、POST
            //      get 方式，请求参数在 URL 后面拼接，send 方法为空参
            //      post 方式：请求参数在 send 方法中定义
            //  2. 请求的 URL
            //  3. 同步或异步的请求：true（异步）或者 false（同步）
            xmlhttp.open("GET","ajaxServlet?username=Tom",true);
            // 如果这里是 false 那么在点击“发送异步请求”时，线程进入睡眠，将不能使用文本输入框
            // 如果是 true 时，那么在点击“发送异步请求”时，线程进入睡眠，仍然可以进行文本输入
            // 3. 发送请求
            xmlhttp.send();
            // 4. 接受并处理来自服务器的响应结果
            // 获取方式：xmlhttp.responseText
            // 当服务器响应成功后后再获取
            // 当 xmlhttp 对象的就绪状态改变时，触发事件 onreadystatechange
            xmlhttp.onreadystatechange=function () {
                // 判断 readyState 就绪状态是否为4，判断 status 响应状态码是否为200
                if (xmlhttp.readyState==4&&xmlhttp.status==200){
                    // document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                    // 获取服务器的响应结果
                    var responseText=xmlhttp.responseText;
                    alert(responseText);
                }
            }
        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 1. 获取请求参数
        String username = request.getParameter("username");
        // 假设处理业务逻辑，耗时
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        // 2. 打印 username
        System.out.println(username);
        // 3. 响应
        response.getWriter().write("hello : "+username);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

2. jQuery 实现方式

$.ajax()
- 语法：$.ajax({键值对});
$.get() ：发送 get 请求
- 语法：$.get(url,[data],[callback],[type])
- 参数：
  - url：请求参数
  - data：请求参数
  - callback：回调函数
  - type：响应结果的类型
$.post() ：发送 post 请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery实现方式</title>
    <script src="js/jquery-3.6.1.min.js"></script>
    <script>
        // 定义方法
        function fun() {
            // 使用 $.ajax 发送异步请求
            $.ajax({
                url:"ajaxServlet", // 请求路径
                type:"POST", // 请求方式
                // data:"username=Jack&age=23", // 请求参数
                data:{"username":"Jack","age":23},
                success:function (data) {
                    alert(data);
                }, // 相应成功后的回调函数
                error:function () {
                    alert("出错了！！！");
                }, // 表示如果请求响应出现错误，会执行回调函数（比如路径无法找到）
                dataType:"text" // 设置接受到的响应数据格式
            });
        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的GET实现方式</title>
    <script src="js/jquery-3.6.1.min.js"></script>
    <script>
        // 定义方法
        function fun() {
            $.get("ajaxServlet",{username:"Rose"},function (data) {
                alert(data);
            },"text");
        }
        function fun() {
            $.post("ajaxServlet",{username:"Rose"},function (data) {
                alert(data);
            },"text");
        }
    </script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun();">
<input>
</body>
</html>