JQuery、Servlet及JSP
一、jQuery
1、jQuery定义：javaScript库。
在jQuery中，$是jQuery的简写。$.ajax等价jQuery.ajax。
2、DOM对象与jQuery对象：
DOM对象定义：通过javaScript中getElementsByName等方法获取节点元素，得到即是DOM对象；
var vari=DOM对象
jQuery对象定义：通过jQuery包装DOM对象后产生的对象。
var $vari=jQuery对象
3、两者之间的相互转换：
（1）DOM对象—>jQuery对象：var $variable =$(DOM对象);
（2）jQuery对象—>DOM对象：方式一：var $a=$("#a");var a=$a[0];
方式二：通过jQuery对象本身提供的get(index)方法获取DOM对象
var $a=$("#a");var a=$a.get(0);
4、$(document).ready(function(){})方法
（1）$(document).ready(function(){
// DOM结构绘制完毕后执行此处代码
});
简写：$(function(){
// DOM结构绘制完毕后执行此处代码
});
eg1:
firstjQuery页面
5、jQuery选择器
（1） id选择器 $(#ID名称)
eg: $( "#myDiv").css( "border", "2px solid yellow" );
(2)通用选择器 $("*" )
(3)类选择器 $(".class")
(4).复选框选择器 $(":checkbox" )
(5)后代选择器 $( "ancestor descendant" )
(6)子选择器 $("parent > child" )
(7)多元素选择器 $( "selector1, selector2, selectorN" )
eg2:
jQuery选择器
jQuery select!
6、事件冒泡:
事件冒泡：当在有包含关系的DOM层级上绑定同一个事件时，事件会按照DOM层级结构顺序从内到外一次触发事件；
停止事件冒泡：在事件处理函数中加上event事件对象，调用event事件对象的stopPropagation()方法。
阻止默认行为的也使用event事件对象：event.preventDefault();
eg3:时间冒泡：
事件冒泡
parentDiv内容
childDiv内容
parentDiv内容
eg4:阻止默认行为：
阻止默认行为
二、Servlet
1、Servlet定义：
使用Java语言编写的服务端程序。主要运行在服务器端，由服务器调用
注意：Servlet是单实例，尽量少用全局变量。
2、Servlet运行流程及 体系结构：
—HttpServletRequests请求——>
Web浏览器 Web容器（Servlet）
<—HttpServletResponse响应——
Servlet(接口)<——GenericServlet(抽象类)<——HttpServlet(抽象类)
3、Servlet实现方式：
（1）实现Servlet接口，覆写其中的方法；
（2）继承GenericServlet类，覆写service方法；
（3）继承HttpServlet类
根据要求可以覆写doGet(xxx)、doPost(xxx)、service(xxx)， 如果覆写了service(xxx)方法，则执行service(xxx)方法，而不执行doGet(xxx)或doPost(xxx)。
eg1:用户登录界面设置：
(1)登录页面
登录页面
(2)欢迎页面
欢迎页面
恭喜，登录成功！
(3)失败页面
失败页面
用户名或密码错误，请重新登录！
点击跳转
(4)服务器端响应
package org.afanti.com;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
String username=req.getParameter("username");
String pwd=req.getParameter("pwd");
if("lily".equals(username) && "123789".equals(pwd)){
req.getRequestDispatcher("/hello/welcome.html").forward(req,resp);
}else{
req.getRequestDispatcher("/hello/fail.html").forward(req,resp);
}
}
}(5)web.xml
HelloWeb
index.html
index.htm
index.jsp
default.html
default.htm
default.jsp
firstServlet
org.LoginServlet
firstServlet
/hello/loginURL
注意：url两种访问方式：（优先访问后台服务路径）
第一种：访问资源 http://localhost/HelloServlet/hello/login.html
第二种：访问后台服务路径（直接与Servlet关联）
4、Servlet配置方式：
（1）注解： @WebServlet(urlPatterns={“/xxx”})；
（2）web.xml(部署描述符)配置
注意：
5、Servlet生命周期：
加载（实例化）：Servlet容器创建Servlet实例；
初始化：该容器调用init()方法；
服务：如果请求Servlet,则容器调用service()方法；
销毁：销毁实例之前调用destroy()方法。
6、服务端 跳转（转发）与客户端跳转（重定向）
跳转路径：
（1）服务器端跳转：
服务器端如果是绝对路径，要写成： /跳转路径 （"/"代表的是上下文根目录后的"/"）
（2）客户端跳转：
使用的是绝对路径，要写成： /上下文根目录/跳转路径
三、JSP（Java Server Page）
1、JSP定义：
Java服务页，动态页面技术。存货于Web容器中。
JSP=HTML+Java代码（即在HTML页面中嵌入Java代码）
JSP与Servlet关系：
Servlet是JSP前身，本质一样。 JSP页面在运行时由Web容器转换成Servlet类，然后编译，再运行编译好的.class文件，最终转换成HTML代码发送给客户端浏览器。
2、在HTML页面中嵌入Java代码
（1）<%!
Java类、方法、全局变量(或常量)
%>
（2）<%
Java代码(语句),局部变量
%>
eg2:HTML页面中嵌入Java代码:
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
第一个JSP页面
<%!
String s="hello,JSP";
%>
<%=s %>
JSP知识的学习！
<%
String num=request.getParameter("pwd");//获取请求参数名为pwd的参数值
if("123890".equals(num))
{%>
密码正确！欢迎登录！
<%
}else{
%>
密码不对，请重新输入密码！
<%
}
%>
3、JSP四种属性范围：
（1） page属性范围:
使用pageContext内置对象操作，但是习惯上将这种范围称为page范围。只在一个页面中保存属性，跳转之后无效
（2）request属性范围
在一个请求范围内保存属性，例如：服务器端跳转后想要让属性保存下来，则可以使用request属性范围。
（3）session属性范围（ Session代表客户端与服务器端的一次会话，保存于服务器端。）
也就是属性可以在一个会话范围内保存，只要是 同一个会话，则无论是客户端跳转还是服务端跳转，都可以保存。
（4） application属性范围
将属性设置到服务器中，这样，所有会话都可以 访问该属性。不宜设置过多，因为会影响服务器性能。
eg3:
(1)pageContext页面属性
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
pageContext页面属性
<%
pageContext.setAttribute("pageAttr","page范围的属性值"); // 设置page页面范围属性
String pageAttr=(String)pageContext.getAttribute("pageAttr");
%>
在本页面接收到的page属性范围的值是：<%=pageAttr%>
点击跳转
(2)request属性范围
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
request属性范围
<%
request.setAttribute("reqAttr","request请求属性范围的值"); // 设置请求范围的属性
request.getRequestDispatcher("scope.jsp").forward(request,response); // 服务器端跳转(转发)，保证跳转之后是同一个请求
%>
(3)session属性范围
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
session属性范围
<%
session.setAttribute("sessionAttr","session范围的属性值");
// request.getRequestDispatcher("scope.jsp").forward(request,response); // 服务器端跳转(转发)，保证跳转之后是同一个请求
%>
点击跳转
(4)application属性范围
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
application属性范围
<%
application.setAttribute("appAttr","application范围的属性值");
%>
点击跳转
(5)接收属性
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
接收属性
<%
String pageAttr=(String)pageContext.getAttribute("pageAttr"); // 获取page范围属性
String reqAttr=(String)request.getAttribute("reqAttr"); // 获取request范围属性
String sessionAttr=(String)session.getAttribute("sessionAttr"); // 获取session范围属性
String applicationAttr=(String)application.getAttribute("appAttr"); // 获取application范围属性
%>
接收到的page属性范围的值是：<%=pageAttr%>
接收到的request属性范围的值是：<%=reqAttr%>
接收到的session属性范围的值是：<%=sessionAttr%>
接收到的application属性范围的值是：<%=applicationAttr%>
4、Cookie与Session
（1）Cookie: Cookie是Http header的一部分，其传输由HTTP协议控制;
要将Cookie发送到浏览器，需要调用HttpServletResponse的addCookie(cookie对象)方法；
注意：. 在客户端每次向服务器端发送请求时都会将之前设置的Cookie随着头信息一起发送到服务器上； Cookie由服务器端生成，但保存于客户端。
（2）Cookie与Session关系：（重点理解）
在Cookie中保存着一个SessionId(在Tomcat中的这个Cookie名为JSESSIONID),这样用户在每次发出请求时都会将此SessionID发 送到服务器端，服务器端依靠此Cookie中保存着的SessionId来区分每一个不同的客户端。
（1）生成cookie对象，并将其发送给客户端：
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
Cookie
<%
Cookie cookie=new Cookie("mycookie","Hello,this is my cookie!"); // 生成一个Cookie对象
response.addCookie(cookie); // 将该Cookie发送给客户端
%>
（2）获取请求头信息：
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="java.util.Enumeration"%>
获取所有的请求头信息(request headers)
所有的请求头信息如下：
<%
Enumeration enumers=request.getHeaderNames(); // 获取所有的头信息名称
while(enumers.hasMoreElements()){
String headerName=enumers.nextElement(); // 获取当前的头信息名称
String headerValue=request.getHeader(headerName);
out.println(""+headerName+"=============>"+headerValue+"
"); // 输出到浏览器
}
String sessionId=session.getId();
%>
当前的SessionId是：<%=sessionId%>