Ajax Bootstrap JSP .jsp JS .js DOM 概念

Posted 2021-02-28 ChanixChen

Ajax Bootstrap JSP .jsp JS .js DOM 概念
2018/12/03 Chenxin

Ajax
Ajax 即“Asynchronous javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术(或技巧?)。
使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。
Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

Bootstrap （Web框架）(包含十几个自定义的JQuery插件)
中文官网与使用手册: https://v3.bootcss.com/css/
对table的封装可以参考的框架: https://datatables.net/examples/basic_init/zero_configuration.html

Bootstrap 是最流行的开发响应式 web 的 html, CSS, 和 JS 框架。
Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机.

Bootstrap是Twitter公司基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

CSS部分：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。属于CSS部分.
组件部分：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。属于布局组件部分。
JavaScript 插件：Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。属于插件部分.
定制：您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。

JSP .jsp JavaScript JS .js Jquery(一个Javascript框架) 说明
2016/11/25 Chenxin
1.JSP
全称 JAVA SERVER PAGE,是JAVA企业应用的一种动态技术,jsp是服务器端运行的JSP网页代码文件.Java和JSP是运行在服务器端的,也可以说他俩运行的结果就生成html,html是静态页面,而jsp是动态页面,jsp实际上就是servlet.
.jsp是jsp网页文件的后缀,而jsp是java web 的表现层的一种技术.

2.JavaScript
简称JS. javascript是一种解释性语言,和java没有关系(为了能火,名字里带个java). 是一种解释型的/基于对象和事件驱动的编程语言,由浏览器解释执行,可以直接嵌入HTML文档中,编写HTML文档就像编辑文本文件一样,格式为*.js,在Web页面中与HTML元素一起发挥作用;.js文件一般是以javascript为语法写的一些为html元素服务的函数/方法的库文件.在html里的嵌入方式.

 Jquery是继prototype之后又一个优秀的Javascript框架.jquery 是一个函数库,基于javascript的,这个函数库让我们使用javascript进行网页dom操作的时候更加简便.它是轻量级的js库,jQuery使用户能更方便地处理HTML documents/events/实现动画效果,并且方便地为网站提供AJAX交互.jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可. 
用jquery的前提,首先要引用一个有jquery的文件:<script type="text/javascript"src="/Public/Js/jquery-1.6.2.min.js"></script>.

HTML XML DOM 说明
HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 将 HTML 文档表达为树结构。

什么是 DOM？Document Object Model（文档对象模型）的缩写。DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：“DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

• 核心 DOM - 针对任何结构化文档的标准模型
• XML DOM - 针对 XML 文档的标准模型
• HTML DOM - 针对 HTML 文档的标准模型

什么是 XML DOM？
XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。

什么是 HTML DOM？
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
HTML DOM 是：* HTML 的标准对象模型 * HTML 的标准编程接口 * W3C 标准

编程接口
可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。
所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。方法是您能够执行的动作（比如添加或修改元素）。属性是您能够获取或设置的值（比如节点的名称或内容）。
比如,getElementById() 方法. getElementById() 方法返回带有指定 ID 的元素： var element=document.getElementById("intro");

一些 DOM 对象方法(这里提供一些常用方法)
方法 描述
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。