JavaScript、Tomcat安装 、Servlet

JavaScript的DOM

JavaScript主要包括三部分内容:ECMAScript、DOM、BOM

DOM概述

通过 HTML DOM,使用 JavaScript访问 HTML 文档的所有元素。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
JavaScript 能够改变页面中的所有 HTML 元素。 JavaScript 能够改变页面中的所有 HTML 属性。 JavaScript 能够改变页面中的所有 CSS 样式。 JavaScript 能够对页面中的所有事件做出反应。

获取HTML元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素 通过标签名找到 HTML 元素 通过类名找到HTML 元素

var x=document.getElementById("main");

 var y=x.getElementsByTagName("p");

var x=document.getElementsByClassName("intro");

改变HTML内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML="a b c d";

document.getElementById(id).innerText="xxxx";

改变HTML属性 、 修改CSS样式

元素操作

这是一个段落。

这是另一个段落。

DOM事件

HTML DOM 允许我们通过触发事件来执行代码。

比如以下事件：

元素被点击。 页面加载完成。 输入框被修改。

在接下来的章节，你会学到更多关于事件的知识。

本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：

myH1

button

EventListener

addEventListener() 方法

在用户点击按钮时触发监听事件：

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。

你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制 HTML标记时也可以添加事件监听。

你可以使用 removeEventListener() 方法来移除事件的监听。

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown"). 把on去掉

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

注意 : 不要使用 " o n " 前缀。

例如，使用 " clic k " , 而不是使用 " o n clic k " 。

JavaScript的BOM

HTML DOM 的 document 也是 window 对象的属性之一：

够确定浏览器窗口的尺寸。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度(不包括滚动条、菜单栏、工具栏)

 window.innerWidth - 浏览器窗口的内部宽度(不包括滚动条、菜单栏、工具栏)

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight document.documentElement.clientWidth

document.body.clientHeight document.body.clientWidth

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location.href 属性返回当前页面的 URL。

 location.hostname 返回 web 主机的域名

 location.pathname 返回当前页面的路径和文件名

 location.port 返回 web 主机的端口 （80 或 443）

 location.protocol 返回所使用的 web 协议（http:// 或 https://）

JavaScript计时函数

setInterval() 周期执行函数

var myVar=setInterval(function(){myTimer()},1000);

function myTimer() { var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t; }

setTimeout() 延迟执行函数

延迟执行指定的函数，只能执行一次。

window.setTimeout("ja v a s c rip t 函数 ",毫秒数 );

第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调 用，诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数。

提示：1000 毫秒等于一秒。

等待3秒，然后弹出 "Hello":

setTimeout(function(){alert("Hello")},3000);

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

DOM

（1）获取网页元素

  getElementById();

  getElementsByTagName();

  getElementsByClassName();

        （2）获取或设置内容

  innerHTML

  innerText

  （3）获取或修改属性

  dom对象.src="";

  dom对象.width=""

  dom对象.setAttribute("属性名","属性值");

（4）修改css

  dom对象.style.fontSize=""; 

（5）创建或删除元素

  document.createElement();

  appendChild();

  insertBefore();

  dom对象.remove();

  dom对象.parentNode.removeChild(dom对象);

（6）DOM事件

  html添加事件属性

  EventListenner方式添加

  事件的冒泡和捕获

（7）BOM

  window:全局对象

  innerWidth

  innerHeight

  open();

  close();

  screen 屏幕对象

  location:地址

  history：历史记录

  navigator：导航对象

（8）时间

  Date

  setInterval(); 周期执行函数

  setTimeOut(); 延迟执行函数

---

 Tomcat安装 

Tomcat压缩版,安装特别方便,只需要右键解压即可!

Tomcat服务器的安装

1. 官网下载(http://tomcat.apache.org/)，Tomcat8.0|8.5解压缩版本 2. 解压到一个没有特殊符号的目录中（一般纯英文即可） 3. 进入到解压的目录下找到bin\startup.bat双击启动即可

idea中创建Web项目 

Idea中目录结构

--src :存放java程序

--web: 存放静态内容:html文件 css文件 js文件  图片

  --WEB-INF  存放web程序配置文件  ,不能被访问

  --web.xml

项目配置tomcat  ： Edit Configurations

Server  |  Deployment

Server:    on "update" action :当点击“刷新” 时，执行的动作:  更新类和资源 

    on frame deactivication: 当窗口 失去焦点时，执行的作用： do nothing  什么都不做

Deployment： ApplicationContext: 应用程序上下文: /  根位置    /myweb1

---

什么是Servlet

 在src创建package 2. 选中刚刚创建的包，右键-->New-->Servlet 

Servlet 是Java Server Applet的简称，称为小服务器程序，用Java编写的服务器端程序，主要功能交互式地 浏览和修改数据，生成动态Web内容

HTTP协议的主要特点如下： 1.支持客户端/服务器模式。 2.简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、POST。每种方法规定了 客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。 3.灵活：HTTP允许传输任意类型的数据对象。传输的类型由Content-Type加以标记。 4.无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开 连接。采用这种方式可以节省传输时间。 5.无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要 前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的 应答就较快。

当浏览器向Web服务器发出请求时，它向服务器传递了一个数据块，也就是请求信息（请求报文），HTTP请求信息由 4部分组成：

 1 请求行 请求方法/地址 URI协议/版本 

2 请求头(Request Header)

 3 空行

 4 请求正文

HTTP应答与HTTP请求相似，HTTP响应也由4个部分构成，分别是：

1、状态行

2、响应头(Response Header)

3、空行

4、响应正文

Servlet的第一种创建方式：继承HttpServlet

@WebServlet("/hs1") 

public class HelloServlet extends HttpServlet {

 private static final long serialVersionUID = 1L;    

  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException { 

               response.getWriter().print("我是Servlet创建的第一种方式");   

 }   

 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }

Servlet创建的第二种方式：实现接口Servlet

@WebServlet("/hs2") 

public class HelloServlet2 implements Servlet{

    @Override 

   public void destroy() {        // TODO Auto-generated method stub    }

    @Override 

   public ServletConfig getServletConfig() {        // TODO Auto-generated method stub        return null;    }

    @Override  

  public String getServletInfo() {        // TODO Auto-generated method stub        return null;    }

    @Override  

  public void init(ServletConfig arg0) throws ServletException {        // TODO Auto-generated method stub      }    @Override  

  public void service(ServletRequest request, ServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub  

      System.out.println("OK");     

   response.setContentType("text/html;charset=UTF-8");     

   response.getWriter().println("我是第二种创建方式");  

  } }

Servlet的两种配置方式

第一种注解式配置 Servlet3.0及以后 ：

使用注解方式：

注解类 WebServlet

name:serlvet名字 （可选）

value: 配置url路径

urlPatterns：配置url路径 ，和value作用一样，不能同时使用

loadOnStartup:配置Servlet的创建的时机， 如果是0或者正数 启动程序时创建，如果是负数，则访问时 创建。

数子越小优先级越高。

initParams：配置Servlet的初始化参数

第二种web.xml配置 Servlet所有版本都支持：

  

 hello2  

   com.qf.web.servlet.HelloServlet 

 1 

   

  

  hello2   

    /hello2 

  

生命周期的四个阶段 

阶段一、实例化（调用构造方法） 实例化阶段是Servlet生命周期中的第一步，由Servlet容器调用Servlet的构造器创建一个具体的Servlet对象 的过程。而这个创建的时机可以是在容器收到针对这个组件的请求之后，即用了才创建；也可以在容器启动之后立刻 创建实例，而不管此时Servlet是否使用的上。使用如下代码可以设置Servlet是否在服务器启动时就执行创建 1

阶段二、初始化（init方法） Servlet在被加载实例化之后，必须要初始化它。在初始化阶段，init（）方法会被调用。这个方法在 javax.servlet.Servlet接口中定义。其中，方法以一个ServletConfig类型的对象作为参数。 ServletConfig对象由Servlet引擎负责创建，从中可以读取到事先在web.xml文件中通过节点配 置的多个name-value名值对。ServletConfig对象还可以让Servlet接受一个ServletContext对象。 一般情况下，init方法不需要编写，因GenericServlet已经提供了init方法的实现，并且提供了 getServletConfig方法来获得ServletConfig对象。 注：init方法只被执行一次

阶段三、就绪/服务 Servlet被初始化以后就处于能够响应请求的就绪状态。每个对Servlet的请求由一个ServletRequest对象代 表，Servlet给客户端的响应由一个ServletResponse对象代表。当客户端有一个请求时，容器就会将请求与响应 对象转给Servlet，以参数的形式传给service方法。service方法由javax.servlet.Servlet定义，由具体的 Servlet实现 HttpServlet将service方法拆分了。doGet和doPost

阶段四、销毁 Servlet容器在销毁Servlet对象时会调用destroy方法来释放资源。通常情况下Servlet容器停止或者重新启动 都会引起销毁Servlet对象的动作，但除此之外，Servlet容器也有自身管理Servlet对象的准则，整个生命周期并 不需要人为进行干预

默认的请求方式是GET请求

GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连

 GET提交的数据大小有限制（因为浏览器对URL的长度有限制）

 GET方式提交数据，会带来安全问题

 效率高

POST请求

POST方法是把提交的数据放在HTTP包的Body中

 POST方法提交的数据没有限制

 POST提交的数据相对安全

 效率相对没有GET高

解决get中文乱码的代码：

String name=request.getParameter("name"); 

 name=new String(name.getBytes("ISO8859-1"),"UTF-8");

解决POST中文乱码代码如下：

//设置请求参数的编码格式--对GET无效    

    request.setCharacterEncoding("UTF-8");

String name=request.getParameter("msg"); 

浏览器识别不到返回的中文是什么编码格式，就会默认使用GB2312,如果返回的是UTF-8格式的那么在浏览器上就会 显示乱码的问题

response.setContentType("text/html;charset=UTF-8"); 

response.setCharacterEncoding("UTF-8");

总结

1 什么是Servlet：小服务器程序，用Java编写的服务器端程序，主要功能在于交互式地浏览和修改数 据，生成动态Web内容。

2 创建Servlet

2.1 继承HttpServlet

2.2 实现Servlet接口

3 配置Servlet

3.1注解 WebServlet

3.2web.xml文件配置

load-on-startup  默认-1    0或整数

4  servlet生命周期

4.1实例化

4.2初始化 init方法

4.3服务  service方法

4.4 销毁 destroy

4 接受请求参数

request.setCharacterEncoding("utf-8");

requset.getParameter("username");

5 响应数据

response.setContentType("text/html;charset=utf-8");

PrintWriter out=response.getWriter();

out.println("xxxxx");