【JavaWeb】Ajax通信

最新推荐文章于 2024-08-09 17:26:52 发布
最新推荐文章于 2024-08-09 17:26:52 发布
阅读量432 收藏 1
点赞数 1
分类专栏： JavaWeb开发 文章标签： ajax java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mdong9/article/details/108654812
版权

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案例：用户名已注册.

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

AI算法董同学
关注
专栏目录
ajax编程步骤
07-26
ajax编程步骤
JavaWeb ajax异步自动填充信息
06-05
在JavaWeb开发中，Ajax（Asynchronous JavaScript and XML）技术被广泛用于实现页面的异步更新，提升用户体验。Ajax的核心是通过JavaScript与服务器进行通信，无需刷新整个网页就能获取并更新部分页面内容。本示例...
ajax开发步骤
gaoligaoli的专栏
09-27 2577
1、修改web.xml,加入以下代码：   dwr-progress-invoker  uk.ltd.getahead.dwr.DWRServlet     debug   true       logLevel   DEBUG       config-sysmgr   WEB-INF/configs/progress/dwr.xml       dwr-progress-invoker  /d
jQuery $.ajax() 方法详解
最新发布
m0_67793437的博客
08-09 1579
是 jQuery 提供的一个方法，用于执行异步 HTTP（Ajax）请求。它是 jQuery 最强大的方法之一，允许你通过配置选项来执行各种类型的请求，并处理响应数据。
ajax 通信,ajax通信
weixin_33746833的博客
08-05 272
AJAX即Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)，可以在不重新加载整个网页的基础上，对网页的某部分进行更新。XMLHttpRequest 是 AJAX 的基础，用于在后台与服务器交换数据。想要创建一个AJAX请求，分为以下几个步骤：创建XMLHttpRequest对象-> open -> send ->处理响应/...
ajax通信
是陈哈哈噢
03-05 197
【ajax】 post get fetch传参
Ajax编程步骤
zhangjinpeng66的专栏
08-27 1834
2.2.3 Ajax编程步骤    Ajax编程千篇一律分为以下几步： 1.      创建XMLHttpRequest对象。 ......     function getXMLHttpRequest() {               var xhr = null;               // 针对FireFox，Mozillar，Opera，S
Ajax JavaWeb JS 三级联动
05-07
在Web开发中，"Ajax JavaWeb JS 三级联动"是一个常见的功能需求，它涉及到前端JavaScript技术、后端JavaWeb服务以及Ajax异步通信。这个功能主要用于创建交互性强的下拉菜单，通常用于地区选择、商品分类等场景，用户...
基于Javaweb中用Ajax做的增删改查
07-30
在本项目中，通过JavaScript函数调用XMLHttpRequest对象发送AJAX请求，实现页面与服务器的通信。 2. **JavaScript**： JavaScript是实现Ajax的关键，负责处理用户交互、创建和发送HTTP请求、解析服务器响应以及...
JavaWeb之ajax案例—省市联动
04-09
总结来说，"JavaWeb之ajax案例—省市联动"是通过AJAX技术和XML数据交换来实现的一种交互效果。它涉及客户端JavaScript的异步请求、服务器端的数据处理和返回，以及前端的动态渲染。这个案例对于理解和掌握AJAX在实际...
ajax_javaweb_
10-02
2. **创建XMLHttpRequest对象**：这是Ajax的核心，用于与服务器通信。现代浏览器一般都内置了XMLHttpRequest对象，或者提供了更高级的API，如jQuery的$.ajax()。 3. **配置请求**：设置HTTP请求的类型（GET或POST）...
http工具类
03-28
SyncHttp getInstance this sendPost URLAPI QueryCMTypeList new HashMap<String String> new SyncHttp Ivolley { @Override public void response String response { Gson gson new Gson ; CMType type gson fromJson response CMType class ; Log i TAG type toString ; }">SyncHttp getInstance this sendPost URLAPI QueryCMTypeList new HashMap<String String> new SyncHttp Ivolley { @Override public void response String response { Gson gson new Gson ; CMType type gson fromJson response CMType [更多]
ajax编程的步骤,ajax的步骤
weixin_30783205的博客
08-06 151
\\设置浏览器if(window.ActiveXObject){xhr = new ActiveXObject("Microsoft.XML");}else if(window.XMLHttpRequest){xhr = new XMLHttpRequest();}var url = "index.PHP?c=goods&a=init";xhr.open("POST",url,true);...
Ajax的通信方式
lingbin418的专栏
01-10 784
在请求页面中new一个Ajax对象让它向服务器端发送一个请求，并且在请求完成的时候调用一个方法其中用eva l()方法来解释返回的对象，这样做所有的工作行为都是由服务器端通过对页面DOM的调用来完成的，使服务器端代码非常复杂。 sample1： 客户端部分代码 ... window.onload=function(){  $('helloBtn').onclick=function(){
http 工具类
qq_31544285的博客
06-11 272
package com.llgx.utils; /** * @author: DengJiong * @date: 2018-05-09 18:43 * @description: */ import org.apache.commons.lang3.StringUtils; import javax.net.ssl.*; import java.io.*; import java....
javaweb图书管理系统ajax
09-11
在JavaWeb图书管理系统中，使用了AJAX...总的来说，AJAX在JavaWeb图书管理系统中用于实现用户查询功能，通过异步方式与服务器通信，动态更新页面内容。该图书管理系统还拥有丰富的功能和使用了多种技术和框架来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值