《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 2.2　相关关键技术及工作原理...

xiaoxiao2023-12-04 159

本节书摘来异步社区《Web异步与实时交互——iframe AJAX WebSocket开发实战》一书中的第2章，第2.2节，作者：赵振 , 王顺 , 于梦竹 , 李泽 , 侯法超 , 刘备 , 时国森 , 李照耀 , 王世军，更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.2　相关关键技术及工作原理

2.2.1　DOMDOM（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 οnlοad="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模型，可以将其更新于主页面中，而不需要刷新整个父窗口的内容，当前页面其他的数据状态得以保留，同时减少了数据的传输量。

最新回复(0)

《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 2.2 相关关键技术及工作原理...

2.2 相关关键技术及工作原理

2.2.2 iframe

2.2.3 Servlet中的doGet与doPost方法

2.2.4 工作原理

《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 2.2　相关关键技术及工作原理...

2.2　相关关键技术及工作原理

2.2.2　iframe

2.2.3　Servlet中的doGet与doPost方法

2.2.4　工作原理