1. Java入门第178课——常用内置对象、BOM、DOM解析刚接触Java Web开发时内置对象、BOM和DOM这三个概念就像三座大山横亘在面前。记得我第一次在JSP页面里用request.getParameter()获取表单数据时完全不明白这个request对象是从哪冒出来的。后来才知道这就是Java Web开发中最常用的内置对象之一。今天我们就来彻底搞懂这些Web开发基石概念从原理到应用一网打尽。2. Java Web开发中的内置对象2.1 九大内置对象详解在JSP页面中无需声明即可直接使用的对象我们称之为内置对象Implicit Objects。这些对象由容器如Tomcat自动创建和维护开发者可以直接调用。完整的九大内置对象包括request- HttpServletRequest实例核心方法getParameter()、setAttribute()、getSession()典型场景获取表单数据、URL参数、请求头信息response- HttpServletResponse实例核心方法sendRedirect()、setContentType()典型场景页面跳转、设置响应头session- HttpSession实例核心方法setAttribute()、getAttribute()典型场景用户登录状态保持application- ServletContext实例核心方法getInitParameter()、setAttribute()典型场景全局配置参数存取out- JspWriter实例核心方法print()、println()典型场景向页面输出内容pageContext- PageContext实例核心方法findAttribute()、getOut()典型场景页面作用域管理config- ServletConfig实例核心方法getInitParameter()典型场景Servlet配置信息获取page- Object实例当前JSP页面相当于this关键字exception- Throwable实例仅在错误页面(isErrorPagetrue)可用重要提示在Servlet中这些对象需要通过方法获取如request.getSession()只有在JSP中才能直接使用。2.2 作用域对比与使用技巧四大作用域是面试常考点实际开发中也经常需要根据业务特点选择合适的作用域作用域对应对象生命周期典型应用场景页面pageContext当前页面页面内数据传递请求request一次请求转发数据传递会话session用户会话期间用户登录状态应用application应用运行期间全局配置参数避坑经验避免滥用application作用域多线程环境下需要同步控制session不宜存储大数据会显著增加服务器内存压力转发(forward)和重定向(redirect)对request作用域的影响不同2.3 实际开发中的最佳实践在电商项目中我们这样合理使用各种内置对象// 用户登录处理 String username request.getParameter(username); String password request.getParameter(password); User user userService.login(username, password); if(user ! null){ session.setAttribute(currentUser, user); // 会话级存储 response.sendRedirect(/index.jsp); // 登录成功跳转 }else{ request.setAttribute(errorMsg, 用户名或密码错误); request.getRequestDispatcher(/login.jsp).forward(request, response); // 转发回登录页 }3. 浏览器对象模型(BOM)深度解析3.1 BOM核心组件剖析BOM(Browser Object Model)是浏览器提供的对象模型允许JavaScript与浏览器窗口交互。虽然不像DOM有W3C标准但主流浏览器都实现了这些核心对象window对象- BOM的顶层对象属性innerWidth、location、history方法alert()、setTimeout()、open()location对象- 管理URL信息属性href、hostname、search方法reload()、assign()history对象- 浏览历史记录方法back()、forward()、go()navigator对象- 浏览器信息属性userAgent、platformscreen对象- 用户屏幕信息属性width、availHeight3.2 跨浏览器兼容方案由于BOM缺乏统一标准不同浏览器实现可能有差异。推荐做法// 获取视口尺寸的兼容写法 const viewportWidth window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // 事件监听兼容处理 const addEvent (element, type, handler) { if(element.addEventListener){ element.addEventListener(type, handler, false); }else if(element.attachEvent){ element.attachEvent(ontype, handler); }else{ element[ontype] handler; } }3.3 现代前端框架中的BOM使用即使在Vue/React等框架中仍需要直接操作BOM对象// Vue中监听窗口变化 export default { mounted() { window.addEventListener(resize, this.handleResize); }, methods: { handleResize() { this.windowWidth window.innerWidth; } }, beforeDestroy() { window.removeEventListener(resize, this.handleResize); } }4. 文档对象模型(DOM)编程艺术4.1 DOM树与节点关系DOM将HTML文档解析为树形结构理解节点关系是DOM操作的基础document ├── html │ ├── head │ │ ├── title │ │ └── meta │ └── body │ ├── div#container │ │ ├── h1 │ │ └── ul.menu │ │ ├── li.item │ │ └── li.item │ └── script常用节点访问方法getElementById()getElementsByClassName()querySelectorAll()parentNode / childNodes / previousElementSibling4.2 高性能DOM操作频繁操作DOM会导致浏览器重排(reflow)和重绘(repaint)严重影响性能优化方案使用文档片段(documentFragment)批量操作const fragment document.createDocumentFragment(); for(let i0; i100; i){ const li document.createElement(li); li.textContent Item ${i}; fragment.appendChild(li); } document.getElementById(list).appendChild(fragment);读写分离避免交替读写布局属性// 错误写法触发多次重排 for(let i0; i10; i){ element.style.left i*10 px; console.log(element.offsetLeft); } // 正确写法 let lefts []; for(let i0; i10; i){ lefts.push(i*10); } for(let i0; i10; i){ element.style.left lefts[i] px; }4.3 虚拟DOM原理浅析现代框架通过虚拟DOM优化性能// 简化的虚拟DOM实现 class VNode { constructor(tag, props, children) { this.tag tag; this.props props || {}; this.children children || []; } render() { const el document.createElement(this.tag); for(const prop in this.props){ el.setAttribute(prop, this.props[prop]); } this.children.forEach(child { const childEl child instanceof VNode ? child.render() : document.createTextNode(child); el.appendChild(childEl); }); return el; } } // 使用示例 const vdom new VNode(div, {id: app}, [ new VNode(h1, null, [Hello World]), new VNode(p, {class: desc}, [Virtual DOM Demo]) ]); document.body.appendChild(vdom.render());5. 综合应用与常见问题5.1 表单处理完整流程结合BOM/DOM和Java后端处理的典型流程前端表单验证DOM操作document.getElementById(myForm).addEventListener(submit, function(e){ const username document.getElementById(username).value; if(!username){ e.preventDefault(); alert(用户名不能为空); return false; } // 异步验证用户名是否已存在 return true; });后端Java处理内置对象protected void doPost(HttpServletRequest request, HttpServletResponse response) { String username request.getParameter(username); String password request.getParameter(password); if(userService.validate(username, password)){ request.getSession().setAttribute(user, username); response.sendRedirect(welcome.jsp); }else{ request.setAttribute(error, 登录失败); request.getRequestDispatcher(login.jsp).forward(request, response); } }5.2 高频面试题解析Cookie和Session的区别Cookie存储在客户端Session存储在服务端Session依赖Cookie传递JSESSIONIDCookie有大小限制(约4KB)Session理论上只受内存限制GET和POST请求区别GET参数在URL中POST在请求体中GET有长度限制POST理论上无限制GET可缓存POST不能GET幂等POST非幂等重定向和转发的区别转发(forward)是服务器行为重定向(redirect)是客户端行为转发URL不变重定向URL会变转发共享request对象重定向不共享5.3 性能优化实战技巧前端优化使用事件委托减少事件监听器数量// 不好 document.querySelectorAll(li).forEach(li { li.addEventListener(click, handler); }); // 好 document.querySelector(ul).addEventListener(click, function(e){ if(e.target.tagName LI){ handler(e); } });后端优化合理设置session超时时间及时清理不再使用的session属性对于只读数据考虑使用application作用域缓存调试技巧Chrome开发者工具的Performance面板分析运行时性能Memory面板检测内存泄漏使用window.performance API进行性能测量掌握这些核心概念后你会发现Java Web开发就像搭积木各种内置对象和浏览器对象就是你的积木块。在实际项目中我经常看到开发者因为不清楚作用域范围而导致数据混乱或者因为不了解DOM操作原理导致页面卡顿。理解这些基础原理才能写出更健壮的Web应用。 
长河君 · 2026/9/14 5:42:35 · 阅读 1.2k Java Web开发：内置对象、BOM与DOM解析指南
1. Java入门第178课——常用内置对象、BOM、DOM解析刚接触Java Web开发时内置对象、BOM和DOM这三个概念就像三座大山横亘在面前。记得我第一次在JSP页面里用request.getParameter()获取表单数据时完全不明白这个request对象是从哪冒出来的。后来才知道这就是Java Web开发中最常用的内置对象之一。今天我们就来彻底搞懂这些Web开发基石概念从原理到应用一网打尽。2. Java Web开发中的内置对象2.1 九大内置对象详解在JSP页面中无需声明即可直接使用的对象我们称之为内置对象Implicit Objects。这些对象由容器如Tomcat自动创建和维护开发者可以直接调用。完整的九大内置对象包括request- HttpServletRequest实例核心方法getParameter()、setAttribute()、getSession()典型场景获取表单数据、URL参数、请求头信息response- HttpServletResponse实例核心方法sendRedirect()、setContentType()典型场景页面跳转、设置响应头session- HttpSession实例核心方法setAttribute()、getAttribute()典型场景用户登录状态保持application- ServletContext实例核心方法getInitParameter()、setAttribute()典型场景全局配置参数存取out- JspWriter实例核心方法print()、println()典型场景向页面输出内容pageContext- PageContext实例核心方法findAttribute()、getOut()典型场景页面作用域管理config- ServletConfig实例核心方法getInitParameter()典型场景Servlet配置信息获取page- Object实例当前JSP页面相当于this关键字exception- Throwable实例仅在错误页面(isErrorPagetrue)可用重要提示在Servlet中这些对象需要通过方法获取如request.getSession()只有在JSP中才能直接使用。2.2 作用域对比与使用技巧四大作用域是面试常考点实际开发中也经常需要根据业务特点选择合适的作用域作用域对应对象生命周期典型应用场景页面pageContext当前页面页面内数据传递请求request一次请求转发数据传递会话session用户会话期间用户登录状态应用application应用运行期间全局配置参数避坑经验避免滥用application作用域多线程环境下需要同步控制session不宜存储大数据会显著增加服务器内存压力转发(forward)和重定向(redirect)对request作用域的影响不同2.3 实际开发中的最佳实践在电商项目中我们这样合理使用各种内置对象// 用户登录处理 String username request.getParameter(username); String password request.getParameter(password); User user userService.login(username, password); if(user ! null){ session.setAttribute(currentUser, user); // 会话级存储 response.sendRedirect(/index.jsp); // 登录成功跳转 }else{ request.setAttribute(errorMsg, 用户名或密码错误); request.getRequestDispatcher(/login.jsp).forward(request, response); // 转发回登录页 }3. 浏览器对象模型(BOM)深度解析3.1 BOM核心组件剖析BOM(Browser Object Model)是浏览器提供的对象模型允许JavaScript与浏览器窗口交互。虽然不像DOM有W3C标准但主流浏览器都实现了这些核心对象window对象- BOM的顶层对象属性innerWidth、location、history方法alert()、setTimeout()、open()location对象- 管理URL信息属性href、hostname、search方法reload()、assign()history对象- 浏览历史记录方法back()、forward()、go()navigator对象- 浏览器信息属性userAgent、platformscreen对象- 用户屏幕信息属性width、availHeight3.2 跨浏览器兼容方案由于BOM缺乏统一标准不同浏览器实现可能有差异。推荐做法// 获取视口尺寸的兼容写法 const viewportWidth window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // 事件监听兼容处理 const addEvent (element, type, handler) { if(element.addEventListener){ element.addEventListener(type, handler, false); }else if(element.attachEvent){ element.attachEvent(ontype, handler); }else{ element[ontype] handler; } }3.3 现代前端框架中的BOM使用即使在Vue/React等框架中仍需要直接操作BOM对象// Vue中监听窗口变化 export default { mounted() { window.addEventListener(resize, this.handleResize); }, methods: { handleResize() { this.windowWidth window.innerWidth; } }, beforeDestroy() { window.removeEventListener(resize, this.handleResize); } }4. 文档对象模型(DOM)编程艺术4.1 DOM树与节点关系DOM将HTML文档解析为树形结构理解节点关系是DOM操作的基础document ├── html │ ├── head │ │ ├── title │ │ └── meta │ └── body │ ├── div#container │ │ ├── h1 │ │ └── ul.menu │ │ ├── li.item │ │ └── li.item │ └── script常用节点访问方法getElementById()getElementsByClassName()querySelectorAll()parentNode / childNodes / previousElementSibling4.2 高性能DOM操作频繁操作DOM会导致浏览器重排(reflow)和重绘(repaint)严重影响性能优化方案使用文档片段(documentFragment)批量操作const fragment document.createDocumentFragment(); for(let i0; i100; i){ const li document.createElement(li); li.textContent Item ${i}; fragment.appendChild(li); } document.getElementById(list).appendChild(fragment);读写分离避免交替读写布局属性// 错误写法触发多次重排 for(let i0; i10; i){ element.style.left i*10 px; console.log(element.offsetLeft); } // 正确写法 let lefts []; for(let i0; i10; i){ lefts.push(i*10); } for(let i0; i10; i){ element.style.left lefts[i] px; }4.3 虚拟DOM原理浅析现代框架通过虚拟DOM优化性能// 简化的虚拟DOM实现 class VNode { constructor(tag, props, children) { this.tag tag; this.props props || {}; this.children children || []; } render() { const el document.createElement(this.tag); for(const prop in this.props){ el.setAttribute(prop, this.props[prop]); } this.children.forEach(child { const childEl child instanceof VNode ? child.render() : document.createTextNode(child); el.appendChild(childEl); }); return el; } } // 使用示例 const vdom new VNode(div, {id: app}, [ new VNode(h1, null, [Hello World]), new VNode(p, {class: desc}, [Virtual DOM Demo]) ]); document.body.appendChild(vdom.render());5. 综合应用与常见问题5.1 表单处理完整流程结合BOM/DOM和Java后端处理的典型流程前端表单验证DOM操作document.getElementById(myForm).addEventListener(submit, function(e){ const username document.getElementById(username).value; if(!username){ e.preventDefault(); alert(用户名不能为空); return false; } // 异步验证用户名是否已存在 return true; });后端Java处理内置对象protected void doPost(HttpServletRequest request, HttpServletResponse response) { String username request.getParameter(username); String password request.getParameter(password); if(userService.validate(username, password)){ request.getSession().setAttribute(user, username); response.sendRedirect(welcome.jsp); }else{ request.setAttribute(error, 登录失败); request.getRequestDispatcher(login.jsp).forward(request, response); } }5.2 高频面试题解析Cookie和Session的区别Cookie存储在客户端Session存储在服务端Session依赖Cookie传递JSESSIONIDCookie有大小限制(约4KB)Session理论上只受内存限制GET和POST请求区别GET参数在URL中POST在请求体中GET有长度限制POST理论上无限制GET可缓存POST不能GET幂等POST非幂等重定向和转发的区别转发(forward)是服务器行为重定向(redirect)是客户端行为转发URL不变重定向URL会变转发共享request对象重定向不共享5.3 性能优化实战技巧前端优化使用事件委托减少事件监听器数量// 不好 document.querySelectorAll(li).forEach(li { li.addEventListener(click, handler); }); // 好 document.querySelector(ul).addEventListener(click, function(e){ if(e.target.tagName LI){ handler(e); } });后端优化合理设置session超时时间及时清理不再使用的session属性对于只读数据考虑使用application作用域缓存调试技巧Chrome开发者工具的Performance面板分析运行时性能Memory面板检测内存泄漏使用window.performance API进行性能测量掌握这些核心概念后你会发现Java Web开发就像搭积木各种内置对象和浏览器对象就是你的积木块。在实际项目中我经常看到开发者因为不清楚作用域范围而导致数据混乱或者因为不了解DOM操作原理导致页面卡顿。理解这些基础原理才能写出更健壮的Web应用。