第4章 JSP编程基础

第4章JSP编程基础本章主要内容JSP工作原理JSP文件的基本元素JSP编程的中文编码问题静态包含和动态包含Ajax与JSP实例4.1JSP工作原理Servlet（

ServerApplet）JSP（JavaServerPage）Java服务器端的页面技术Sun制定的一种服务器端动态页面技术的组件规范，将Servlet中负责输出的语句抽取出来，实现业务处理与结果展示的代码分离。4.1JSP工作原理当JSP页面第一次被请求时Web服务器中的JSP引擎在解析无误后，自动将JSP页面翻译成Servlet编译Servlet源代码进入Servlet的生命周期，初始化、运行和销毁JSP的本质就是Servlet<servlet> <servlet-name>demo</servlet-name> <servlet-class>DemoServlet</servlet-class>

<load-on-startup>1</load-on-startup>

</servlet><servlet-mapping> <servlet-name>demo</servlet-name> <url-pattern>/demo</url-pattern></servlet-mapping>在JSP的生命周期中，解析、翻译、编译是它特有的阶段，在JSP文件首次被访问、JSP文件被更新，与JSP文件对应的Servlet字节码文件被删除时，这三个阶段会发生。4.1JSP工作原理JSP翻译好的Servlet位于哪里？4.2JSP文件的基本元素创建JSP文件位置：WebContent文件扩展名：.jsp文件头：与HTML文件相同，<meta>标签中的charset无效4.2JSP文件的基本元素JSP文件中的注释<!--注释-->：HTML注释，发送至客户端<%--注释-->：JSP注释，不发送至客户端，只有程序员可见Java代码注释：//，/*注释*/浏览器端查看源代码4.2JSP文件的基本元素JSP中的脚本：嵌入到HTML中的Java代码特点：都以“<%”开头，以“%>”结尾表达式代码块

表达式：<%=表达式%>用于在页面中输出动态数据，展示不同取值的数据在“<%=”和“%>”之间可以且仅书写一个表达式4.2JSP文件的基本元素—表达式【例】获取Web应用名，将其作为超链接地址的一部分。将超链接用绝对路径的方式指向“WebContent”目录下的index.jsp文件<ahref="/index.jsp">首页</a><ahref="/web/index.jsp">首页</a><%=request.getContextPath()%><td>表达式输出数据</td>4.2JSP文件的基本元素—代码块代码块：<%Java代码%>书写Java程序：流程控制、Java处理语句【例】输出英文字母表组成的索引超链接。代码块负责程序的逻辑结构表达式负责向页面输出数据4.2JSP文件的基本元素—代码块一个JSP页面可以有许多Java程序段，只要按照逻辑用“<%”和“%>”组织即可，它们将被JSP引擎按顺序执行。在程序段中可以声明变量，它们都是属于该程序段的局部变量。标签：out.write()表达式：out.print()代码块：直接呈现4.2JSP文件的基本元素—声明通过声明定义的变量或者方法，被转化为对应Servlet类中的成员属性和成员方法，为同时访问页面的多个请求线程共享。如果某个请求使变量的取值发生变化，其他线程获取的数据也将随之修改。声明的方法主要用于在JSP页面中重复使用。JSP中嵌入声明的方式：<%!声明变量或方法%>4.2JSP文件的基本元素—声明【例】在JSP页面中对航班出发和到达时间进行格式化输出。时间格式要求12小时制，0点至中午12点用“a.m”标识，13点至凌晨24点用“p.m”标识。例如，上午11:30起飞、下午21:55到达的输出形式为：departuretimeis11:30a.m.andarrivingat9:55p.m.表达式、代码块、声明4.2JSP文件的基本元素—page指令指令：以“<%@”开头，由Web容器解释执行，在客户端不可见。JSP中的page指令：最常用的指令定义整个JSP页面的属性，写在JSP页面的最前面page指令的格式<%@page属性名1=属性值

属性名2=属性值……%>或者：<%@page属性名1=属性值%><%@page属性名2=属性值%>属性：contentType、pageEncoding、import4.2JSP文件的基本元素pageEncoding属性pageEncoding属性设置JSP文件编码，即本地存储.jsp文件时的编码存储JSP文件和读取JSP文件时使用<%@pagepageEncoding="gbk"%>.jsp文件.java文件pageEncoding="gbk"存储读取翻译utf-84.2JSP文件的基本元素contentType属性确定JSP页面响应的类型和字符编码通过响应头信息“Content-Type”通知浏览器以什么样的方式、什么样的编码打开接收到的信息<%@pagecontentType="text/html;charset=UTF-8"%>response.setContentType("text/html;charset=utf-8");4.2JSP文件的基本元素编码之间的关系页面编码：pageEncoding

>contentType>ISO8859-1contentType编码：contentType>pageEncoding>ISO8859-1<%@pagecontentType="text/html;charset=UTF-8"%><%@pagepageEncoding="gbk"%>4.2JSP文件的基本元素自定义JSP文件模板4.2JSP文件的基本元素import属性：导入JSP页面中要使用的Java类或其所在包【例】利用JSP页面输出服务器的当前系统时间。时间表示需要使用java.util.Date类时间的格式化处理需要用SimpleDateFormat类<%@pageimport="java.text.SimpleDateFormat,java.util.Date"%><%@pagecontentType="text/html;charset=UTF-8"pageEncoding="GBK"import="java.util.Date,java.text.SimpleDateFormat"%>4.2JSP文件的基本元素4.2JSP文件的基本元素【例】在页面上输入3个数字代表三角形的三边。计算三角形的面积，或者给输入有误的提示信息。<fieldset><legend>求三角形面积</legend><formmethod="get"action="getArea.jsp"><div>a:<inputtype="text"name="a"placeholder="边长"/></div>

<div>b:<inputtype="text"name="b"placeholder="边长"/><div><div>c:<inputtype="text"name="c"placeholder="边长"/></div><div>

<inputtype="submit"value="求三角形面积"/></div>

</form></fieldset><%@

page

contentType="text/html;charset=UTF-8"%><%@

page

pageEncoding="gbk"%><%@

page

import="java.text.DecimalFormat"

%><%

try{

doublea=Double.parseDouble(request.getParameter("a"));

doubleb=Double.parseDouble(request.getParameter("b"));

doublec=Double.parseDouble(request.getParameter("c"));

if(a>0&&b>0&&c>0&&a+b>c&&b+c>a&&a+c>b){

doubles=(a+b+c)/2;

doublearea=Math.sqrt(s*(s-a)*(s-b)*(s-c)); out.println(newDecimalFormat("#0.00").format(area)); }else{ out.println("您输入的三边长有误"); } }catch(Exceptione){ out.println("您输入的三边长有误"); }%>JavaScript:sum.toFixed(2)4.3JSP编程中的中文编码问题JSP程序执行的过程（1）在操作系统上通过编辑器编写程序，并最终生成.java的源文件保存在操作系统中JSP文件的内容按照pageEncoding读取，然后以固定的UTF-8编码被翻译为.java的编码。（2）通过编译器javac.exe编译这些源文件，得到字节码文件.classjavac.exe在读取.java时默认使用操作系统编码，如果是Eclipse等IDE工具则会自动识别.java的编码格式，并采用该编码进行编译，使用UTF-8编码编译为字节码文件。（3）.class部署在Web容器中运行，获取请求数据，向客户端传递响应结果。4.3JSP编程中的中文编码问题4.4静态包含和动态包含include指令<%@includefile="文件地址"%>include在指令位置处用静态的方式插入一个文件，将被包含文件的内容原封不动的添加到JSP文件中，再整体的进行翻译、编译、执行。【例】在index.jsp中用包含的方式在页面中引入logo用户区和版权区。<%@includefile="foot.html"%><%@includefile="head.jsp"%>4.4静态包含和动态包含执行包含后的index.jsp被翻译为Servlet源代码静态包含发生在解析JSP的阶段，被包含文件的内容被原封不动的添加到JSP文件中。静态包含的目标可以是.html文件或者.jsp文件，但不允许是Servlet。【注意】在JSP文件中包含.html文件时，为了避免中文乱码的发生，在.html文件的首部也增加代码：<%@pagepageEncoding="utf-8"%>该代码在.html中不会生效，它的作用是为了代码插入.jsp后能够正确的被解码。为了不将其显示在客户端，可以采用HTML的注释形式：<!--<%@pagepageEncoding="utf-8"%>-->4.4静态包含和动态包含include动作<jsp:includepage="文件地址"/>page属性支持JSP表达式，可以动态的指定被包含的文件比较<jsp:include>动作与<@include>指令<jsp:include>通知JSP页面动态加载一个文件，不是把指定的目标文件与源文件合并为新的JSP页面，而是告诉Java解释器，这个文件在JSP运行时（字节码文件被加载执行）才被处理。如果包含的文件是普通的.html文件，就将文件的内容发送到客户端，由客户端负责显示；如果包含的文件是JSP文件，JSP引擎就执行这个文件，然后将执行的结果发送到客户端，并由客户端负责显示这些结果。4.4静态包含和动态包含【例】为网站的不同页面的主体部分设计模板，实现动态包含。4.5Ajax与JSP实例Ajax（AsynchronousJavaScriptandXML）：异步式的JavaScript和XML在不重新加载整个页面的情况下，与后台服务器进行少量数据交换、只对部分网页进行更新4.5.1Ajax概述传统交互方式：同步交互，用户向服务器发送一个请求，服务器根据用户的请求执行相应的任务，并返回响应结果。通常用户仅需要刷新页面的一部分数据，刷新整个页面增加了等待时间重复数据的传递，浪费了资源和网络带宽客户端服务器端用户操作网络传输网络传输网络传输网络传输服务器处理服务器处理用户操作用户操作4.5.1Ajax概述异步交互方式在客户端与服务器端引入中间媒介Ajax引擎客户端服务器用户界面网络传输服务器处理Ajax引擎客户端处理请求请求响应响应4.5.1Ajax概述Ajax的组成技术名称说明JavaScriptAjax应用程序使用JavaScript编写CSSAjax应用中，用户界面的样式可以通过CSS独立修改DOM通过JavaScript修改DOM，Ajax应用可以在运行时改变用户界面，或者局部更新页面中的某个节点XMLHttpRequest对象与Web服务器在后台进行异步通信4.5.1Ajax概述Web服务器Web浏览器JavaScriptXMLHttpRequest对象与Web服务器通信DOM控制显示内容和层CSS控制外观4.5.2jQuery的Ajax访问方法异步访问核心：XMLHttpRequest对象步骤1：创建XMLHttpRequest对象步骤2：利用open()方法建立一个请求，发送给服务器步骤3：使用send()方法发送请求步骤4：在对象的onreadystatechange事件下，通过对象的readyState属性和status属性判断请求状态和响应状态4.5.2jQuery的Ajax访问方法$.ajax()$.ajax(options)options为JSON格式的数据，通过options设置Ajax访问服务器的各个细节，语法简单4.5.2jQuery的Ajax访问方法options常用参数url：String类型，为异步请求的服务器端程序的地址。type：String类型，代表Ajax的请求方式（post或get），默认为get。data：向服务器传送的参数数据key：value组成的JSON格式{"name":"海洋","age":"20"}4.5.2jQuery的Ajax访问方法options常用参数dataType:String类型，定义预期从服务器返回的数据类型。如果不指定，jQuery将自动根据响应中的MIME信息确定。常用的取值text：返回纯文本字符串xml：返回XML文档，可用jQuery处理json：返回JSON数据这些类型的数据会传递给回调函数做参数4.5.2jQuery的Ajax访问方法常用参数success：function类型，是请求成功后的回调函数，可以有两个参数。function(data,textStatus){}data是服务器返回的数据，数据类型为dataTypetextStatus是描述服务器状态的字符串，可以缺省error：function类型，是请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象（可选）。回调函数4.5.2jQuery的Ajax访问方法【例】在页面上输入3个数字代表三角形的三边。使用Ajax请求计算三角形面积，根据输入在同一页面中显示三角形的面积，或者给输入有误的提示信息。Ajax—返回String<script> $(function(){ $("#btn").click(function(){//按钮的单击事件

vara=$("#a").val();//获取文本框内的取值

varb=$("#b").val();

varc=$("#c").val(); $.ajax({//进行Ajax请求 "url":"getArea.jsp",//服务器端程序 "type":"post",//请求方式 "data":{'a':a,'b':b,'c':c},//请求参数 "success":function(data){//data为响应字符串 $("#result").html(data);//显示响应结果

} }) }) })</script>

4.5.3Ajax请求案例—注册查重【例】在用户名文本框、确认密码文本框和注册按钮的右侧均有提示信息出现。如果用户名或者密码不符合规则，注册都禁止提交；只有二者都符合要求才能提交注册数据。知识点：Ajax访问JDBC查询JSP返回JSON数据jQuery事件处理

4.5.3Ajax请求案例—注册查重功能要求（1）用户名Ajax查重，在文本框后显示“用户已存在”，或者“用户名可用”。（2）再次进入文本框时，清除文本框原有内容及相应提示。（3）密码不允许为空。（4）两次密码不一致，给出“两次密码输入不同”的提示，否则提示“密码一致”。（5）用户名或两次密码均合法后，可用提交表单（显示一句话即可，扩展：将数据添加至数据表）；否则提示“填写不符合要求，不能提交”。（6）提交表单后，所有文本框情况，提示信息清空。

4.5.3Ajax请求案例—注册查重步骤：（1）准备好数据库、表，至少有一个用户（2）导入jar包，DBUtil类及配置文件（3）编写HTML页面，设置各元素id，为jQuery获取元素做好准备（4）编写JavaScript（jQuery）代码，用户名失去光标时，发送Ajax请求，书写$.ajax()的基本参数（5）编写Ajax请求的JSP，在表中查询用户名，根据查询结果返回JSON数据（6）书写$.ajax()的回调函数（success和error）（7）编写jQuery事件处理

4.5.3Ajax请求案例—注册查重事件处理提示失去光标事件：blur()获得光标事件：focus()JavaScript判断文本框信息为空：==“”提示信息：html()文本框取值：val()用户名合法性和密码合法性可分别设置标识变量，同时为true时允许提交<%@pagecontentType="text/html;charset=UTF-8"%><%@pagepageEncoding="GBK"%><%@pageimport="java.sql.*"%><% Stringusername=request.getParameter("username"); Connectioncon=null; Statementst=null; ResultSetrs=null; try{ Class.forName("com.mysql.jdbc.Driver"); con=DriverManager.getConnection("jdbc:mysql://:3306/temp?characterEncoding=utf8","root","1234"); st=con.createStatement(); Stringsql="select*fromuserwherename='"+username+"'"; rs=st.executeQuery(sql); if(rs.next()){//查找成功，用户已存在 out.print("用户名已存在"); }else{//用户名可用 out.print("OK"); } }catch(Exceptione){ e.printStackTrace();} finally{if(rs!=null){try{rs.close();}catch(Exceptione){}}if(st!=null){try{st.close();}catch(Exceptione){}}if(con!=null){try{con.close();}catch(Exceptione){}} }%>check_user.jsp

4.5.3Ajax请求案例—注册查重客户端查重的Ajax请求varflag_user=false;//用户名合法标识：默认不允许提交注册$("#user").blur(function(){//用户名文本框失去光标时 $.ajax({ "url":"check_user.jsp", "type":"post", "data":{'username':$(this).val()}, "success":function(data){ $("#userResult").html(data.trim());//去掉响应字符串的首尾空格 if(data.indexOf("OK")!=-1){//响应有'OK'字样出现 flag_user=true; } } })})4.5.4向Ajax返回JSON数据JSON是各平台通用的数据格式，纯数据服务器存储和处理PC机浏览器Android手机APPiPhon