2.2 相关关键技术及工作原理
2.2.1 DOM
DOM（Document Object Model）即文档对象模型。DOM是与系统平台和编程语言无关的W3C官方标准。W3C对DOM的定义是：“一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改。”
DOM本质上是一个树形结构模型，它将整个页面映射为一个由层次节点组成的文档。每个节点都有一系列的子节点；每个子节点都有唯一的父节点；节点又分为元素节点和文本节点两种，元素节点中有属性。DOM可以根据节点之间的关系对文档进行操作。
程序开发人员可以利用DOM技术实现动态地创建文档，遍历文档结构，添加、修改、删除文档内容等。DOM技术实现了用户页面动态地变化，使得页面的可交互性大大地增强。
目前，DOM包括以下3个部分。
Core DOM——Core DOM是针对任意结构文档的标准对象模型，它所定义的对象已经可以表达出任何HTML和XML文档中的数据。
HTML DOM——HTML DOM是针对HTML的文档对象模型，它将所有的HTML元素定义为对象，Web开发人员可以通过对象的方法来访问并操作HTML文档。
XML DOM——XML DOM是针对XML的文档对象模型，它定义了针对XML的标准对象集合以及访问和操作XML文档的方法。
HTML DOM的方法及属性
用户可以利用HTML DOM提供的方法和属性，实现节点的创建、复制、插入、删除、替换、查找以及遍历等操作。
（1）HTML DOM方法
createElement()方法：用于按照指定标签名创建一个新的节点元素。
其语法格式如下：
reference = document.createElement(element)```
createTextNode()方法：用于创建一个包含指定文本内容的文本节点。
语法格式如下：
reference = document.createTextNode(text)```
cloneNode()方法：用于指定节点创建副本。
语法格式如下：
reference = node.cloneNode(deep)```
appendChild()方法：用于指定节点追加一个子节点。
语法格式如下：
reference = element.appendChild(newChild)```
insertBefore()方法：用于在指定节点的前面插入一个新节点。
语法格式如下：
reference = element.insertBefore(newChild,targetNode)```
removeChild()方法：用于删除指定元素的子节点。
语法格式如下：
reference = element.removeChild(node)```
replaceChild()方法：用于指定元素的一个子节点替换成另一个子节点。
语法格式如下：
reference = element.replaceChild(newChild,oldChild)```
setAttribute()方法：用于指定元素节点添加一个新的属性值或改变它现有属性值，该方法只能用在属性节点上。
语法格式如下：
element.setAttribute(attributeName,attributeValue)```
getElementById()方法：用于返回带有指定ID的元素节点，如果元素不存在，则返回null。
语法格式如下：
element = document.getElementById(ID)```
getElementsByTagName()方法：用于返回包含指定标签名的所有元素的节点列表。
语法格式如下：
elements = document.getElementsByTagName(tagName)```
（2）HTML DOM属性
nodeName：该属性将返回一个字符串，其内容是给定节点的名字。
语法格式如下：
name = node.nodeName
nodeName属性会根据节点类型返回相应的值。
nodeType：该属性将返回一个代表给定节点类型的整数。表2-1列出了常用的节点类型，包括元素、属性、文本、注释、文档等。
语法格式如下：
integer = node.nodeType```
<div style="text-align: center"><img src="https://yqfile.alicdn.com/af3de0c1fd7210654e07654d3f41d6accdaf03ca.png" width="" height="">
</div>
nodeValue：该属性将返回给定节点的当前值。
语法格式如下：
value = node.nodeValue```
childNodes：该属性将返回一个数组，这个数组由指定元素节点的所有子节点组成。
语法格式如下：
nodeList = node.childNodes```
firstChild：该属性将返回指定节点的第一个子节点。
语法格式如下：
reference = node.firstChild```
lastChild：该属性将返回指定节点的最后一个子节点。
语法格式如下：
reference = node.lastChild```
parentNode：该属性将返回指定节点的父节点。
语法格式如下：
reference = node.parentNode```
2.2.2 iframe
iframe是超文本标记语言（HTML）的一个标签，是用来实现框架的一种方式。和常见的frame一样，用它来对网页结构进行拆分，使相应网页部分在刷新时保持不变。iframe相对frame更加灵活，它可以内嵌到网页的任意地方，实现在一个网页里内嵌另一个网页。使用方法简单，将它的src属性指向想要包含的文件即可，并且可以根据情况指定其宽（width），高（height）等属性。
<iframe>标签的src属性：规定在iframe中显示的文档的URL。
语法格式如下：
<iframe src="value">```
HTML onload事件属性：onload属性在对象已加载时触发。onload常用在 <body> 中，一旦完全加载所有内容（包括图像、脚本文件、CSS文件等），就执行一段脚本。
语法格式如下：
< iframe onload="script">```
2.2.3 Servlet中的doGet与doPost方法
当客户使用get方式请求Servlet时，Web容器调用doGet方法处理请求，doGet方法的定义代码如下：
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { }```
doPost方法是用来处理使用post方式提交的表单，不能处理客户端浏览器直接访问的方式。doPost方法的定义代码如下：
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException { }```
使用Servlet的doGet和doPost方法来处理iframe提交的请求。
2.2.4 工作原理
在实现iframe模拟异步交互技术中，利用iframe内嵌网页的特性，实现网页间数据的“隐形”传输：通过对主页面中隐藏的iframe内嵌网页不断进行刷新，可以不断地向服务器端提交请求，服务器端通过相应Servlet的doPost/doGet方法处理并响应。客户端所获得的响应数据，通过JavaScript调用DOM模型，可以将其更新于主页面中，而不需要刷新整个父窗口的内容，当前页面其他的数据状态得以保留，同时减少了数据的传输量。