Java高频面试专题合集解析:
当然在这还有更多整理总结的Java进阶学习笔记和面试题未展示,其中囊括了Dubbo、Redis、Netty、zookeeper、Spring cloud、分布式、高并发等架构资料和完整的Java架构学习进阶导图!
更多Java架构进阶资料展示
-
二、让我们来实现它
-
-
- 2.1 前端界面 jsp
-
-
2.2 ajax 代码
-
2.2 使用 xml 传输数据 (servlet 代码)
-
三、运行截图
============================================================================
1.1 场景再现
我们在购买快递选择收获地址的时候,选择地域一般都是现选择省,省选择完毕后,电脑会自动显示该省对应的城市,我们选择了城市之后,系统会显示该城市所对应的的区域。
其实这就是通过 ajax 后台数据自动生成的,接下来我们就来实现一下
我们这里使用 servlet 写死数据
1.2 技术分析
1.2.1 前台分析
我们设置一个监听事件给第一个下拉选择框,当用户选择了一个省份之后,就使用 ajax 进行交互,得到对应的城市的信息。整理一下
-
监听下拉框的变化事件
-
下拉框的值发生变化之后,就与服务端进行交互
-
服务端收到数据,根据用户传过来的省份进行信息匹配,然后把数据返回给用户
-
数据返回给前端之后,使用 dom 把数据写进城市下拉列表当中
1.2.2 后台分析
后端使用 servlet 把数据写死
-
后端监听前端发过来的数据
-
判断数据类型,然后经过处理,数据重新封装,返还给前端
========================================================================
2.1 前端界面 jsp
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>
省份的选择界面
请选择省份 湖北省 湖南省 请选择城市2.2 ajax 代码
document.getElementById(“provinceId”).onchange = function() {
var index = this.selectedIndex; // 获取选项中下标的索引值
var province = this.options[index].innerHTML;// 获取下拉框的值
// 下拉框的值合格性验证
if (index != this.options[0]) {
// 选择城市列表的时候,会自动添加,因此调用时就清除
var citySelect = document.getElementById(“cityId”);
// 每次长度都变为 1
citySelect.options.length = 1;
// 定义请求的地址,我依然使用 post 请求
var url = “AjaxServlet_xml?time” + new Date().getTime();
// ajax 代码
var xmlhttp;
// 根据不停的版本的游览器,使用不同的 ajax 的 api
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE6 以下版本
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
// 绑定事件
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
// var text = xmlhttp.responseText;
var text = xmlhttp.responseXML;
console.log(text);
// 将返回的 xml 数据进行解析操作,写入城市下拉框中
var cities = text.getElementsByTagName(“city”);
console.log(cities.length);
//得到每一个cities节点的值,动态生成下拉框,添加到下拉框中
for (var i = 0; i < cities.length; i++) {
var value = cities[i].firstChild.nodeValue;
//动态生成下拉框
var optionElement = document.createElement(“option”);
optionElement.innerHTML = value;
//添加到下拉框中
citySelect.appendChild(optionElement);
}
}
}
}
// 创建 http 请求,建立与服务器的连接
xmlhttp.open(“post”, url, true); // 这里的 url 由我们从外面传进来,是 AjaxCheck (一个Servlet)
// 我们采用的 post 请求,因此需要加上请求头
xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xmlhttp.send(“province=”+province);
}
复习的面试资料
这些面试全部出自大厂面试真题和面试合集当中,小编已经为大家整理完毕(PDF版)
- 第一部分:Java基础-中级-高级
- 第二部分:开源框架(SSM:Spring+SpringMVC+MyBatis)
- 第三部分:性能调优(JVM+MySQL+Tomcat)
- 第四部分:分布式(限流:ZK+Nginx;缓存:Redis+MongoDB+Memcached;通讯:MQ+kafka)
- 第五部分:微服务(SpringBoot+SpringCloud+Dubbo)
- 第六部分:其他:并发编程+设计模式+数据结构与算法+网络
进阶学习笔记pdf
- Java架构进阶之架构筑基篇(Java基础+并发编程+JVM+MySQL+Tomcat+网络+数据结构与算法)
- Java架构进阶之开源框架篇(设计模式+Spring+SpringMVC+MyBatis)
- Java架构进阶之分布式架构篇 (限流(ZK/Nginx)+缓存(Redis/MongoDB/Memcached)+通讯(MQ/kafka))
- Java架构进阶之微服务架构篇(RPC+SpringBoot+SpringCloud+Dubbo+K8s)
g-Q9CUtxG8-1715806001552)]
- Java架构进阶之微服务架构篇(RPC+SpringBoot+SpringCloud+Dubbo+K8s)
[外链图片转存中…(img-5ELp7jEF-1715806001552)]
[外链图片转存中…(img-VMDC2Y7G-1715806001552)]