0
0

【Java WEB】AJAX

🌟个人博客：www.hellocode.top🌟
⭐所有文章均在上方博客首发，其他平台同步更新
🔥本文专栏：《Java Web从入门到实战》
🌞如没有Java基础，请先前往《Java零基础指南》专栏学习相应知识
⚡如有问题，欢迎指正，一起学习~~

文章目录

  • AJAX(Asynchronous JavaScript And XML)：异步的JavaScript和 XML
  • 本身不是一种新技术，而是多个技术的综合，用于快速创建动态网页的技术
  • 一般的网页如果需要更新内容，必须重新加载整个页面
  • 而AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部分内容进行局部更新

快速入门

原生JavaScript 实现 AJAX

  • 核心对象：XMLHttpRequest 用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新
  • 打开链接：open(method,url,async) method：请求的类型(GET 或 POST) url：请求资源的路径 async：true（异步）或false（同步）
  • 发送请求：send(String params) params：请求的参数（POST专用）
  • 处理响应：onreadystatechange readyState：0-请求未初始化，1-服务器连接已建立，2-请求已接受，3-请求处理中，4-请求已完成，且响应已就绪 status：200-响应已全部OK
  • 获得相应数据形式 responseText：获得字符串形式的响应数据 responseXML：获得XML形式的响应数据
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>用户注册</title></head><body><formautocomplete="off">
        姓名:<inputtype="text"id="username"><spanid="uSpan"></span><br>
        密码:<inputtype="password"id="password"><br><inputtype="submit"value="注册"></form></body><script>// 为姓名绑定失去焦点事件
    document.getElementById("username").onblur=function(){// 创建XMLHttpRequest核心对象let xmlHttp =newXMLHttpRequest();// 打开链接let username = document.getElementById("username").value;
        xmlHttp.open("GET","/userServlet?username="+ username,true);// 发送请求
        xmlHttp.send();// 处理响应
        xmlHttp.onreadystatechange=function(){// 条件判断，请求和响应是否成功if(xmlHttp.readyState ==4&& xmlHttp.status ==200){// 将响应的数据显示到span标签里
                document.getElementById("uSpan").innerHTML = xmlHttp.responseText;}}}</script></html>

packagestudy.ajax;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjava.io.IOException;@WebServlet("/userServlet")publicclassUserServletextendsHttpServlet{@OverrideprotectedvoiddoGet(HttpServletRequest req,HttpServletResponse resp)throwsServletException,IOException{// 设置请求和响应的乱码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");// 获取请求参数String username = req.getParameter("username");// 判断姓名是否已注册if("zhangsan".equals(username)){
            resp.getWriter().write("<font color = 'red'>用户名已注册</font>");}else{
            resp.getWriter().write("<font color = 'green'>用户名可用</font>");}}@OverrideprotectedvoiddoPost(HttpServletRequest req,HttpServletResponse resp)throwsServletException,IOException{doGet(req,resp);}}

jQuery 的 GET 方式实现AJAX

  • 核心语法：$.get(url,[data],[callback],[type]); url：请求的资源路径 data：发送给服务器端的请求参数，格式可以是key=value，也可以是js对象 callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码 type：预期的返回数据类型，取值可以是xml，html，js，json，text等
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>用户注册</title></head><body><formautocomplete="off">
        姓名:<inputtype="text"id="username"><spanid="uSpan"></span><br>
        密码:<inputtype="password"id="password"><br><inputtype="submit"value="注册"></form></body><scriptsrc="js/jquery-3.6.0.min.js"></script><script>// 为用户名绑定失去焦点事件$("#username").blur(function(){let username =$("#username").val();// jQuery的GET 方式实现 AJAX
        $.get(// 请求的资源路径"userServlet",// 请求的参数"username="+ username,// 回调函数function(data){// 将响应的数据显示到span标签上$("#uSpan").html(data);},// 响应数据形式"text")});</script></html>

对应的Java处理代码和JS原生的处理代码一致

jQuery的 POST 方式实现 AJAX

  • 核心语法：$.post(url,[data],[callback],[type]); url：请求的资源路径 data：发送给服务器端的请求参数，格式可以是key=value，也可以是js对象 callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码 type：预期的返回数据类型，取值可以是xml，html，js，json，text等
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>用户注册</title></head><body><formautocomplete="off">
        姓名:<inputtype="text"id="username"><spanid="uSpan"></span><br>
        密码:<inputtype="password"id="password"><br><inputtype="submit"value="注册"></form></body><scriptsrc="js/jquery-3.6.0.min.js"></script><script>// 为用户名绑定失去焦点事件$("#username").blur(function(){let username =$("#username").val();// jQuery的POST 方式实现 AJAX
        $.post(// 请求的资源路径"userServlet",// 请求的参数"username="+ username,// 回调函数function(data){// 将响应的数据显示到span标签上$("#uSpan").html(data);},// 响应数据形式"text")});</script></html>

post和get方式只是

$.post

和

$.get

方法名不同，其他参数都一致

jQuery 的通用方式实现 AJAX

  • 核心语法：$.ajax({name:value,name:value,...});- url：请求的资源路径- async：是否异步请求，true-是，false-否（默认）- data：发送给服务器端的请求参数，格式可以是key=value，也可以是js对象- type：请求方式，POST 或 GET(默认是GET)- dataType：预期的返回数据类型，取值可以是xml，html，js，json，text等- success：请求成功时调用的回调函数- error：请求失败时调用的回调函数
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>用户注册</title></head><body><formautocomplete="off">
        姓名:<inputtype="text"id="username"><spanid="uSpan"></span><br>
        密码:<inputtype="password"id="password"><br><inputtype="submit"value="注册"></form></body><scriptsrc="js/jquery-3.6.0.min.js"></script><script>// 为用户名绑定失去焦点事件$("#username").blur(function(){let username =$("#username").val();// jQuery的通用方式实现 AJAX
        $.ajax({// 请求资源路径url:"userServlet",// 是否异步async:true,// 请求参数data:"username="+username,// 请求方式type:"GET",// 返回响应数据形式dataType:"text",//请求成功后的回调函数success:function(data){$("#uSpan").html(data);},// 请求失败的回调函数error:function(){alert("操作失败");}})});</script></html>

JSON的处理

基础介绍

  • JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式
  • 它是基于ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据
  • 简洁清晰的层次结构使得JSON成为理想的数据交换语言。易于人的阅读和编写，同时也易于计算及解析和生成，并有效的提升网络传输效率
  • 创建格式 类型语法说明对象类型{name:value,name:value,…}name是字符串类型，value可以是任意类型数组/集合类型[{name:value,…},{name:value,…}]name是字符串类型，value可以是任意类型混合类型{name:[{name:value,…},{name:value,…}]}name是字符串类型，value可以是任意类型
  • 常用方法 成员方法说明stringify(对象)将指定对象转换为json格式字符串parse(字符串)将指定json格式字符串解析成对象

转换工具

  • 除了在JavaScript中使用 JSON外，在Java中也可以使用JSON
  • JSON 的转换工具是通过Java 封装好的一些 jar 工具包
  • 可以将Java对象或集合转换为 JSON 格式的字符串，也可以将 JSON 格式的字符串转换成 Java对象
  • Jackson：开源免费的 JSON 转换工具，SpringMVC 转换默认使用 Jackson

步骤

  1. 导入jar包
  2. 创建核心对象
  3. 调用方法完成转换

常用类
类名说明ObjectMapper是Jackson工具包的核心类，它提供一些方法来实现 JSON 字符串和对象之间的转换TypeReference对集合泛型的反序列化，使用TypeReference可以明确的指定反序列化的对象类型

  • ObjectMapper常用方法 方法名说明String writeValueAsString(Object obj)将Java对象转换为JSON字符串<T> T readValue(String json, Class<T> valueType)将JSON字符串转换为Java对象<T> T readValue(String json, TypeReference valueTypeRef)将JSON字符串转换为Java对象

转换练习

  1. 对象转 JSON，JSON 转对象
  2. Map<String,String>转JSON，JSON 转Map<String,String>
  3. Map<String,User>转JSON，JSON 转Map<String,User>
  4. List<String>转 JSON，JSON转 List<String>
  5. List<User>转 JSON，JSON转 List<User>
packagestudy.ajax02;importcom.fasterxml.jackson.core.JsonProcessingException;importcom.fasterxml.jackson.core.type.TypeReference;importcom.fasterxml.jackson.databind.ObjectMapper;importorg.junit.Test;importjava.util.ArrayList;importjava.util.HashMap;importjava.util.List;publicclassObjectMapperTest{privateObjectMapper mapper =newObjectMapper();// 对象转 JSON，JSON 转对象@Testpublicvoidtest01()throwsException{// User 转 jsonUser user =newUser("张三",23);String json = mapper.writeValueAsString(user);System.out.println("json 字符串："+ json);// json 转 UserUser user2 = mapper.readValue(json,User.class);System.out.println("java对象："+ user2);}// Map<String,String> 转 JSON， JSON 转 Map<String,String>@Testpublicvoidtest02()throwsException{// Map<String,String> 转 JSONHashMap<String,String> map =newHashMap<>();
        map.put("姓名","张三");
        map.put("性别","男");String json = mapper.writeValueAsString(map);System.out.println("json 字符串："+ json);// JSON 转 Map<String,String>HashMap<String,String> map2 = mapper.readValue(json,HashMap.class);System.out.println("java对象："+ map2);}// Map<String,User>转JSON，JSON 转Map<String,User>@Testpublicvoidtest03()throwsException{// Map<String,User>转JSONHashMap<String,User> map =newHashMap<>();
        map.put("一班",newUser("张三",23));
        map.put("二班",newUser("李四",24));String json = mapper.writeValueAsString(map);System.out.println("json 字符串："+ json);// JSON 转Map<String,User>HashMap<String,User> map2 = mapper.readValue(json,newTypeReference<HashMap<String,User>>(){});System.out.println("java对象："+ map2);}// List<String>转 JSON，JSON转 List<String>@Testpublicvoidtest04()throwsException{// List<String>转 JSONArrayList<String> list =newArrayList<>();
        list.add("张三");
        list.add("李四");String json = mapper.writeValueAsString(list);System.out.println("json 字符串："+ json);// JSON转 List<String>ArrayList<String> list2 = mapper.readValue(json,ArrayList.class);System.out.println("java对象："+ list2);}// List<User>转 JSON，JSON转 List<User>@Testpublicvoidtest05()throwsException{// List<User>转 JSONArrayList<User> list =newArrayList<>();
        list.add(newUser("张三",23));
        list.add(newUser("李四",24));String json = mapper.writeValueAsString(list);System.out.println("json 字符串："+ json);// JSON转 List<User>ArrayList<User> list2 = mapper.readValue(json,newTypeReference<ArrayList<User>>(){});System.out.println("java对象："+ list2);}}

综合案例

搜索联想

  • 数据准备CREATETABLEUSER( id INTPRIMARYKEYAUTO_INCREMENT, NAME VARCHAR(20), age INT, search_count INT-- 搜索数量);INSERTINTOUSERVALUES(NULL,"张三",23,25),(NULL,"李四",24,5),(NULL,"王五",25,3),(NULL,"赵六",26,7),(NULL,"张三丰",93,20),(NULL,"张无忌",18,23),(NULL,"张强",33,21),(NULL,"张果老",65,6);``````# config.propertiesdriver=com.mysql.jdbc.Driverurl=jdbc:mysql://192.168.23.129:3306/db13username=rootpassword=密码``````# log4j.properties# Global logging configuration# 输出信息的显示。四个级别：ERROR、WARN、INFO、DEBUGlog4j.rootLogger=DEBUG, stdout# Console output...log4j.appender.stdout=org.apache.log4j.ConsoleAppenderlog4j.appender.stdout.layout=org.apache.log4j.PatternLayoutlog4j.appender.stdout.layout.ConversionPattern=%5p [%t] - %m%n``````<!--MyBatisConfig.xml--><?xml version="1.0" encoding="UTF-8" ?><!--MyBatis的DTD约束--><!DOCTYPEconfigurationPUBLIC"-//mybatis.org//DTD Config 3.0//EN""http://mybatis.org/dtd/mybatis-3-config.dtd"><!--核心根标签--><configuration><!-- 引入数据库连接信息配置文件 --><propertiesresource="config.properties"/><!--集成LOG4J日志信息--><settings><settingname="logImpl"value="log4j"/></settings><!--配置数据库环境，环境可以有多个。default指定使用的是哪个--><environmentsdefault="mysql"><!--配置数据库环境，可以写很多个，id表示唯一的标识--><environmentid="mysql"><!--事务管理，type属性代表采用JDBC默认的事务处理--><transactionManagertype="JDBC"></transactionManager><!--数据源信息，type属性代表连接池--><dataSourcetype="POOLED"><!--获取数据库连接的配置信息--><propertyname="driver"value="${driver}"/><propertyname="url"value="${url}"/><propertyname="username"value="${username}"/><propertyname="password"value="${password}"/></dataSource></environment></environments><!--引入映射配置文件--><mappers><!--接口所在的包--><packagename="study.ajax.mapper"/></mappers></configuration>
  • 页面 1. 为用户名输入框绑定鼠标点击事件2. 获取输入的用户名数据3. 判断用户名是否为空4. 如果为空，则将联想提示框隐藏5. 如果不为空，则发送AJAX请求，并将响应的数据显示到联想框
  • 服务器 1. 获取请求参数2. 调用业务层的模糊查询方法3. 将返回的数据转成JSON，并响应给客户端
标签： 后端 java ajax
本文转载自: https://blog.csdn.net/qq_24980365/article/details/123771251
版权归原作者 Hello Code. 所有， 如有侵权，请联系我们删除。
登录后发布评论

“【Java WEB】AJAX”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

C#与C++交互开发系列（二十）：跨进程通信之共享内存（Shared Memory）

hadoop技术实验- 第4章 HBase 开发：使用Java操作HBase

智能对话微信前端小程序设计与开发

前端配置开发环境：新电脑配置前端开发环境，Vue开发环境配置的详细过程

SpringBoot集成MQTT服务器和客户端并通过WebSocket将消息实时发送到前端（本地搭建MQTT服务器）

idea | 搭建 SpringBoot 项目之配置 Maven

Python毕业设计选题：基于django+vue的全国民宿信息管理系统

文章导航