🌟个人博客: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
步骤
- 导入jar包
- 创建核心对象
- 调用方法完成转换
常用类
类名说明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对象
转换练习
- 对象转 JSON,JSON 转对象
- Map<String,String>转JSON,JSON 转Map<String,String>
- Map<String,User>转JSON,JSON 转Map<String,User>
- List<String>转 JSON,JSON转 List<String>
- 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,并响应给客户端
版权归原作者 Hello Code. 所有, 如有侵权,请联系我们删除。