【JavaWeb】Ajax通信

编程语言 2024-11-04 19:25:31 阅读次数: 0

AJAX 是与服务器交换数据并更新部分网页的艺术，本文来学习了解使用Ajax进行数据通信。

本文目录


1.AJAX概念

AJAX：ASynchronous JavaScript And XML，翻译过来就是异步的JavaScript 和 XML。

先弄清异步和同步：在客户端和服务器端相互通信的基础上

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

见下图，客户端向服务器端发送请求、获得响应的比较：

在这里插入图片描述
AJAX的百度百科词条：

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

AJAX的主要作用，可以很好的提升用户的体验，页面响应效果非常好。

2.AJAX实现方式

这里介绍两种实现方式：

  1. 原生的JS实现方式（了解）
  2. JQeury实现方式，对原生的方式进行了封装。使用起来更加方便

2.1 原生的JS实现AJAX

代码写法比较固定，通过简单例子来了解原生的JS实现AJAX：

  • 例子是一个客户端html页面，点击页面里的按钮，向服务器发送异步请求，访问AjaxServlet，请求处理后响应
  • 客户端接收响应，弹出响应消息

代码：
01-原生js实现ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        //定义方法
        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.建立连接
            /*
                open方法参数：
                    1.请求方式：GET/POST
                        * 如果是get方式，请求参数在URL后边拼接。send方法为空参
                        * 如果是post方式，请求参数在send方法传入，如xmlhttp.send("username=tom");
                    2.请求的URL: 文件在服务器上的位置
                    3.同步或异步请求：true（异步）或 false（同步）

            */
            xmlhttp.open("GET","AjaxServlet?username=tom",true);

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

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

            //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange
            xmlhttp.onreadystatechange=function()
            {
     
     
                //判断readyState就绪状态是否为4，判断status响应状态码是否为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>

服务端:
AjaxServlet.java

@WebServlet(name = "AjaxServlet", urlPatterns = "/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
    
    
        this.doGet(request, response);
    }

    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);
    }
}

启动服务器，浏览器访问：01-原生js实现ajax.html

在这里插入图片描述
点击【发送异步请求】按钮，控制台打印

在这里插入图片描述
5秒后，客户端接收到响应

在这里插入图片描述
理解Ajax的特性：异步和局部更新。

  1. 异步：在例子中，如果使用同步方式发送请求，那么在客户端发送请求后5秒内，客户端是无法其它操作的，比如在输入框中输入内容的操作是无法进行的。使用异步方式则可以。
  2. 局部更新：客户端向服务器发送请求，与服务器进行交互，会重新加载整个网页。页面中输入框的内容就会被清除，而使用Ajax发送请求，交互后刷新页面局部，不会重新加载整个网页，从而影响页面中其它元素。

2.2 JQeury实现AJAX方式

原生JS实现AJAX，代码写下来就感觉到特别麻烦，JQeury实现方式就非常简便了。更多细节，参考官网文档。

JQeury中提供了三种API发送异步请求。

  • $.ajax()：发送异步请求，
  • $.get()：以get方式发送异步请求
  • $.post()：以post方式发送异步请求

$.ajax()方法

语法：

$.ajax({
    
    键值对});

例子：

02-JQuery实现方式1_ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入JQuery -->
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>

        //定义方法
        function fun() {
     
     
            //使用$.ajax()发送异步请求
            $.ajax({
     
     
                uri:"AjaxServlet",//请求路径
                type:"POST",//请求方式
                //data:"username=jack&age=23",//请求参数
                data:{
     
     "username":"jack","age":23},
                success:function (data) {
     
     //data接收服务器响应结果的值
                    alert(data);
                },//响应成功后的回调函数
                error:function () {
     
     
                    alert("出错啦...")
                },//表示如果请求响应出现错误，会执行的回调函数

                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：响应结果的类型

[ ]：表示非必须参数

例子：

03-JQuery实现方式2_get.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入JQuery -->
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>

        //定义方法
        function fun() {
     
     
            //使用$.get()发送异步请求
            $.get("AjaxServlet",{
     
     username:"rose"},function (data) {
     
     
                alert(data);
            },"text");
        }

    </script>
</head>
<body>

<input type="button" value="发送异步请求" onclick="fun()">
<input type="text">

</body>
</html>

$.post()方式：发送post请求

语法：

$.post(url, [data], [callback], [type])

参数说明：

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

[ ]：表示非必须参数

例子：

03-JQuery实现方式3_post.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入JQuery -->
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>

        //定义方法
        function fun() {
     
     
            //使用$.post()发送异步请求
            $.post("AjaxServlet",{
     
     username:"rose"},function (data) {
     
     
                alert(data);
            },"text");
        }

    </script>
</head>
<body>

<input type="button" value="发送异步请求" onclick="fun()">
<input type="text">

</body>
</html>

JQuery发送异步请求效果和原生JS发送异步请求是一致，这里不作演示了。从代码就可以看到JQuery实现AJAX的简洁了，非常的方便。

对AJAX作了简单介绍，更多深入可以参考菜鸟教程.

推荐阅读：
【JavaWeb】Ajax通信.
【JavaWeb】JSON详解：打包JSON数据？.
【JavaWeb】AJAX和JSON案例：用户名已注册.

欢迎点赞评论，指出不足，笔者由衷感谢哦！~

猜你喜欢

转载自blog.csdn.net/mdong9/article/details/108654812
今日推荐
周排行
阿里云服务器ECS开放8080端口
求正弦和余弦
链表倒数第n个节点
vue.js入门（13）实战demo
Java学习——day 15
My First Day in CSDN
Oracle11g 密码延迟认证导致library cache lock的情况分析
SAP ALV输出字段内容前增加空格
CloudFlare 推出免费 VPN 服务「Warp」，你懂的！
BUG(跑SLAM14-ch10)
每日归档
更多
2025-03-16(0)
2025-03-15(0)
2025-03-14(0)
2025-03-13(0)
2025-03-12(0)
2025-03-11(0)
2025-03-10(0)
2025-03-09(0)
2025-03-08(0)
2025-03-07(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022