JavaWeb（15）之AJAX

最新推荐文章于 2021-02-22 16:52:47 发布
最新推荐文章于 2021-02-22 16:52:47 发布
阅读量186 收藏
点赞数
分类专栏： JavaWeb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43581078/article/details/106092238
版权

jQuery Ajax(load,post,get,ajax)用法与详解

全局刷新和局部刷新

在这里插入图片描述

全局刷新和局部刷新工作原理

在这里插入图片描述
在这里插入图片描述

AJAX的本质

在这里插入图片描述

AJAX的开发步骤

在这里插入图片描述

同步和异步区别

在这里插入图片描述

AJAX的命令

在这里插入图片描述

异步请求工作状态：5种

readystate属性:存储当前的工作状态
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

实现

JavaScript方式实现

在这里插入图片描述
用一个手机号注册的例子来实现ajax局部刷新：
servlet：

@WebServlet(urlPatterns = "/MobileServlet")
public class MobileServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    	//解决响应乱码
        response.setCharacterEncoding("utf-8");
        //得到页面参数
        String mobile = request.getParameter("mobile");
        //创建一个输出流
        PrintWriter out = response.getWriter();
        //判断页面参数和已有的号码是否一致
        if ("19999999999".equals(mobile)) {
            out.write("true");
        } else {
            out.write("false");
        }
    }

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

步骤：

  1. 创建ajax的核心引擎对象, XMLHttpRequest对象
  2. 建立连接open: 请求方式, 请求地址
  3. 发送请求send
  4. 接受并处理来自服务器的响应结果

JSP页面：
这里使用post方式请求，如果是get方式请求需要将参数放在URL中传递。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <script>

        let xmlHttp;

        function register() {
            //获得手机号
            const mobile = document.getElementById("mobile").value;
            //通过ajax异步请求方式请求服务器
            //1.建ajax的核心引擎对象, XMLHttpRequest对象
            xmlHttp = new XMLHttpRequest();
            //2.创建XMLHttpRequest对象的回调函数
            /*
            * 什么是回调函数: 回调函数不是由该函数的实现方直接调用，而是在特定的事件或条件发生时由另外的一方调用的，用于对该事件或条件进行响应
            */
            xmlHttp.onreadystatechange = callBack;
            //3.初始化请求，建立连接open: 请求方式, 请求地址，是否为异步
            /*
               参数：
                   1. 请求方式：GET、POST
                       * get方式，请求参数在URL后边拼接。send方法为空参
                       * post方式，请求参数在send方法中定义
                   2. 请求的URL：
                   3. 同步或异步请求：true（异步）或 false（同步）
            */
            xmlHttp.open("post", "${pageContext.request.contextPath}/MobileServlet", true);
            //4.设置post头信息
            xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            //5.发送请求send
            xmlHttp.send("mobile=" + mobile);//键值对方式
        }

        //定义回调函数，接收服务端的返回值
        //当这个对象状态发生改变的时候,触发一次函数
                /**
                 * 伪代码
                 * public class XMLHttpRequest{
                 *     private int readystate;
                 *     public XMLHttpRequest(){
                 *         // 刚创建出来,状态为0
                 *         readystate=0;
                 *     }
                 *
                 *     public void open(method, url){
                 *         // TODO
                 *     }
                 * }
                 *
                 *  0: 创建出来
                 *  1: 调用open
                 *  2: 调用send
                 *  3: 从服务器接受到数据
                 *  4: 接收完数据
                 */
        function callBack() {

            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                //接收服务器返回的数据
                let data = xmlHttp.responseText;//服务端返回值为String类型
                if (data == "true") {
                    alert("号码已经存在，请更换");
                } else {
                    alert("号码可以使用");
                }
            }

        }

    </script>

    <title>注册手机号</title>
</head>
<body>
手机：<input type="text" id="mobile">
<br>
<button type="button" onclick="register()">注册</button>
</body>
</html>

JQuery方式实现

$.ajax方式

$.ajax()方法详解和参数
servlet方式还是上面的。

JSP页面：
$.ajax方法在{ }中设置参数即可

<html>
<head>
    <title>Title</title>
    <script src="../js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        function register() {
            let $mobile = $("#mobile").val()
            $.ajax({
                url: "${pageContext.request.contextPath}/MobileServlet",
                type: "POST",
                data: "mobile=" + $mobile,
                success: function (data, textState) {

                    if (data == "true") {
                        alert("已存在，注册失败")
                    } else {
                        alert("注册成功")
                    }

                }
            })
        }
    </script>
</head>
<body>
手机：<input type="text" id="mobile"/>
<br>
<button type="button" id="register" onclick="register()">注册</button>
</body>
</html>

$.get & $.post

在这里插入图片描述
注意：在$.get & $.post中参数的顺序是严格要求的，不能随意更改。

$.get：

使用GET方式来进行异步请求

get方法将数据放到URL中
在这里插入图片描述

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="../js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        function register() {
            let $mobile = $("#mobile").val()
            $.get(
                "${pageContext.request.contextPath}/MobileServlet?mobile=" + $mobile,
                /*
                * data:服务器返回数据
                * status:运行状态
                * */
                function (data, status) {

                    if (data == "true") {
                        alert(data + "/" + status)
                    } else {
                        alert(data + "/" + status)
                    }

                }
            )
        }
    </script>
</head>
<body>
手机：<input type="text" id="mobile"/>
<br>
<button type="button" id="register" onclick="register()">注册</button>
</body>
</html>
$.post：

使用POST方式来进行异步请求

post方法将参数放到data中。
在这里插入图片描述

<html>
<head>
    <title>Title</title>
    <script src="../js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        function register() {
            let $mobile = $("#mobile").val()
            $.post(
                "${pageContext.request.contextPath}/MobileServlet",
                "mobile=" + $mobile,
                /*
                * data:服务器返回数据
                * status:运行状态
                * */
                function (data, status) {

                    if (data == "true") {
                        alert(data + "/" + status)
                    } else {
                        alert(data + "/" + status)
                    }

                }
            )
        }
    </script>
</head>
<body>
手机：<input type="text" id="mobile"/>
<br>
<button type="button" id="register" onclick="register()">注册</button>
</body>
</html>

$.load

载入远程 HTML 文件代码并插入至 DOM 中
在这里插入图片描述

<html>
<head>
    <title>Title</title>
    <script src="../js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        function register() {
            let $mobile = $("#mobile").val()
            $("#tip").load(
                "${pageContext.request.contextPath}/MobileServlet",
                "mobile=" + $mobile
            )
        }
    </script>
</head>
<body>
手机：<input type="text" id="mobile"/>
<br>
<button type="button" id="register" onclick="register()">注册</button>
<span id="tip"></span>
</body>
</html>

$.getJSON

JSON简介
$.getJSON() 方法
JSON以键值对的形式存在

在这里插入图片描述
值可以是
在这里插入图片描述
servlet:
如果是$.getJSON的话，servlet传值也要用JSON格式的值传递。

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setCharacterEncoding("utf-8");
        String mobile = request.getParameter("mobile");
        PrintWriter out = response.getWriter();
        if ("19999999999".equals(mobile)) {
            //如果客户端是getJSON()，则需要以JSON方式返回数据
            out.write("{\"msg\":\"true\"}");
        } else {
            out.write("{\"msg\":\"false\"}");
        }
    }

JSP页面：

<html>
<head>
    <title>Title</title>
    <script src="../js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        function register() {
            let mobile = $("#mobile").val();
            $.getJSON(
                "${pageContext.request.contextPath}/MobileServlet",
                {"mobile": mobile},
                function (data) {

                    if (data.msg == "true") {
                        alert("已存在")
                    } else {
                        alert("不存在")
                    }

                }
            )

        }
    </script>
</head>
<body>
手机：<input type="text" id="mobile"/>
<br>
<button type="button" id="register" onclick="register()">注册</button>
<span id="tip"></span>
</body>
</html>

AJAX处理JSON对象

在这里插入图片描述
servlet：
$(window).load()方法理解、使用场景
L.Cheng Blog
10-11 4242
1、$(window).load() 和window.οnlοad=function(){}是页面中的所有元素（包括图片、flash）等都加载完毕后，才能执行；$(document).ready() 是页面中的DOM元素加载完成后便可执行。2、$(window).load()和window.οnlοad=function(){}不同的是，前者可以和$(document).ready()一样，可以同时加载多个函数。
jquery的load方法----$().load
kissing7的专栏
11-27 1273
jquery load()方法是jquery ajax中无刷新中的一个方法了，他可以实现直接加载页面中的内容放到指定ID中，也可以带参数刷新页面哦，下面我来给大家介绍load()一些用法与常用见问题。 最近网站做一些改动，需要引用另一个网站的页面，于是用到了jQuery框加中的load方法。挺方便的。 load(url, [data], [callback])手册上的说明很直接明了： 载
JavaWeb Ajax详解
恒哥的博客
02-22 625
项目开发视频： SpringCloud微服务开发入门 手把手开发基于SpringBoot的员工管理系统 亿度云盘~Java小白入门实战 超详细的Java知识点汇总 AJAX介绍 AJAX（Asynchronous Javascript And XML)异步Javascript和XML，是一种通过JS和后台服务器进行交互的技术。 和传统的表单和服务器交互的方式相比，区别是： 1、传统的方式会刷新整个页面 2、AJAX刷新局部页面，提升用户体验 AJAX的实现 核心类：XMLHttpRequest（目前主流
浅谈 $().load()
My-Dream
11-03 1408
类型： $(" ").load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] ) 返回: jQuery  描述: 载入远程 HTML 文件代码并插入至 DOM 中。 参数解析： url：一个包含发送请求的URL字符串 data：向服务器发送请求的Key/value参数。 co
JQuery中的load()、$.get()和$.post()详解
热爱思考、活力满满、开朗爱笑的年轻人
09-14 3万+
load() 1.载入HTML文档 load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入DOM中。 它的结构为： load(url [,data][,callback]) 参数名称 类型 说明 url String 请求HTML页面的URL地址 data(可选) Object 发送至服务器的key/value数据 callback
13_JavaWeb——AJAX配套资源
05-02
此资源与我的博客13_JavaWeb——AJAX中的两个案例对应，其中Demo5使用AJAX异步处理页面实现对用户输入的实时校验，Demo6使用Axios+JSON完成对品牌列表的展示和添加，取代了先前的JSP。希望有所帮助
基于javaweb和ajax的省市联动实现
12-16
在JavaWeb开发中，"基于Ajax的省市联动实现"是一个常见的功能需求，它允许用户在选择省份时，市的选择项会动态更新，提供相应的下拉选项。这种联动效果提升了用户体验，减少了不必要的页面刷新。实现这一功能的核心...
Ajax JavaWeb JS 三级联动
05-07
在Web开发中，"Ajax JavaWeb JS 三级联动"是一个常见的功能需求，它涉及到前端JavaScript技术、后端JavaWeb服务以及Ajax异步通信。这个功能主要用于创建交互性强的下拉菜单，通常用于地区选择、商品分类等场景，用户...
JavaWeb之ajax案例—省市联动
04-09
总结来说，"JavaWeb之ajax案例—省市联动"是通过AJAX技术和XML数据交换来实现的一种交互效果。它涉及客户端JavaScript的异步请求、服务器端的数据处理和返回，以及前端的动态渲染。这个案例对于理解和掌握AJAX在实际...
javaweb作业-Ajax、javabean、jsp、serviet、数据库编程
最新发布
02-02
2.javabean实例 3.JSP1练习 4.JSP2练习 5.在第5章课后习题2基础上，基于jsp+servlet+javabean实现学生表的增删改查。 提示：数据处理交给Servlet，jsp只负责显示。 6.使用过滤器实现多角色登录检验 ...
ajax---$().load()
C_N_D_N_的博客
08-15 222
//$(定位器).load(后台servlet路径) //前台 jsp页面 <%@ page contentType=“text/html;charset=UTF-8” language=“java” %> Title //后台 servlet @WebServlet(name = “loadServlet”,value = “/loadServlet”) p...
$(window).load()方法的使用场景
热门推荐
u010865136的专栏
03-13 3万+
一、$(window).load()、window.onload=function(){}和$(document).ready()方法的区别 1、$(window).load() 和window.onload=function(){}      是页面中的所有元素（包括图片、flash）等都加载完毕后，才能执行；      $(document).ready() 是页面中的DOM元素加载完成
$(window).load(function(){})和.onload区别
段小宝的博客
04-17 2903
参考文章 https://blog.csdn.net/qq_37763820/article/details/79694963 $(window).load(function(){}）和window.onload区别在于$(window).load(function(){}）可以写多个 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(doc...
Ajax的load方法
az6567376的博客
08-27 198
返回值:jQueryload(url, [data], [callback]) 概述 载入远程 HTML 文件代码并插入至 DOM 中。 默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > sel...
评论回复功能的数据库设计（JAVA+MYSQl）
QuedYin的博客
04-01 1万+
1.概述 评论回复功能是社交网站最基本的功能，本文主要讲解评论留言的设计及实现。 需求： 用户评论日记，回复评论 显示所有评论 2.数据库设计 日记表：diary 用户表：user 回复表：reply 字段设计 private int id ; //回复id （主键id） private Integer diaryId; //日记id (关联日记表) private St...
ajax实现评论功能
php阿宝的博客
04-29 4233
<script type="text/javascript"> //alert(GetQueryString('artid')); $(document).ready(function(){ var str = window.location.href; var sta = str.lastIndexOf("/"); v...
$.load()的用法
weixin_34191734的博客
11-29 2146
jquery load 事件用法 jquery load 事件用法 如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。 注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件...
JavaWeb项目实例：Ajax技术应用详解
"本项目'ajax_direction166_html_javaweb_silverl8z'是一个使用Ajax技术来实现Java Web应用的实例。该项目主要展示了如何利用Ajax技术实现动态网页的异步数据交互，如何通过JavaScript发起Ajax请求，以及如何使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值