JSP语法, EL, JSTL, JSON，Ajax辨析

发表于 更新于 分类于 评论数：
本文字数： 5.9k 阅读时长 ≈ 7 分钟

TODO

前言

对前端了解不多，在Web开发的学习中，时不时会遇到各种各样的前端语法的困扰，多种相似的表达式混用难免蛋疼。虽说已有各种框架解决了对这些前端脚本的解析，但本文旨在列举和梳理其中的知识体系，以免再混淆。

JSP语法与JSP脚本

此处参考了博客https://segmentfault.com/a/1190000013152739#articleHeader5

JSP(Java Server Page), Java服务器界面，是一种特殊的简化的Servlet，主要特点是JSP中java代码可以和页面html代码组合使用。此处不细讲其工作原理和内容。本文主要关注其语法与脚本书写。

JSP初印象

在最简单的Web开发中，IDE初始生成的JSP页面index.jsp,再页面中使用Java输出Hello World如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%@ page language="java" contentType="text/html; charset=utf-8"
   pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
  <title>Insert title here</title>
</head>
<body>
<%
String s = "HelloWorld";//此处为Java代码
out.println(s);
%>
</body>
</html>

JSP语法

从上面代码看到，JSP中包含了HTML代码和Java代码

JSP脚本

JSP中的Java代码就是JSP脚本，必须有<% %>括起来，否则jsp会将其解析为HTML代码，出现解析偏差或出错。

1
2
3
4
<%
String s = "HelloWorld";//此处为Java代码
out.println(s);
%>
JSP内容输出表达式

<%= %> 用于在JSP中输出一个Java变量

1
2
3
4
5
6
7
8
9
10
....
<body>
<%
User user = (User) session.getAttribute("user");//jsp的session内置对象
%>
用户名<%=user.getUsername() %><br/>
年龄<%=user.getAge() %><br/>
性别<%=user.getGender() %><br/>
</body>
....
JSP内容定义表达式

<%! %> JSP定义表达式，用于成员变量的定义，在Java代码块里的是局部变量。但已经没人用了

JSP注释

<%-- --%> 不起任何实际作用

还可以注释 <% %>

在java代码中依然可以使用java支持的注释:

1
2
3
4
//

/**
*/

JSP指令

JSP用于声明JSP页面的相关属性，语法为

1
<%@指令  属性名="值"  %>

如在JSP初印象中，制定了JSP的语言，文档类型，编码类型

1
2
<%@ page language="java" contentType="text/html; charset=utf-8"
   pageEncoding="utf-8"%>

JSP指令还可用于在jsp中引入java类

1
2
<%@page import="java.util.Random"%>
<%@page import="java.util.Random,java.text.*"%>

EL表达式

EL（Expression Language）表达式语言，是为了使JSP写起来更加简单。不属于编程语言。用于查找作用域中的数据，然后对它们执行一些简单的操作，用于对jsp标签的属性赋值

在MVC模式中, JSP只充当视图，视图的任务就是显示响应，不需要在JSP中做任何关于程序控制和业务逻辑的事情。所以在JSP页面中应该尽可能少的、或者是完全不出现Java代码。来自百度百科

EL能干什么

可以从域对象（request, session, application, pageContext等）中取得数据。
无需导包，可直接在JSP中使用。

EL表达式语法结构

1
2
3
4
5
6
${expression}
${requestScope.key}
${pageContextScope.key}
${sessionScope.key}
${applicationScope.key}
${key} <%--如果不指定域，那么会依次从域中搜索--%>

EL举例

1
2
3
4
5
6
7
8
9
${username} 取得request里面名字为username的属性值（如果不存在返回空字符串）
${user.username}
${list[index]}
${map.key}
${pageContext.request.contextPath}

${10+89} 支持放置表达式运算
${age>10}
${empty user} 是否是null对象

运算符号最好在{}内部实现，比如${a.count*b.price},而不能写成${a.count}
*
${b.price}

JSTL

此处参考了博客https://blog.csdn.net/qq_42350238/article/details/88994988

JSTL（JavaServer Pages Standard Tag Library，JSP标准标签库)是一个不断完善的开源的JSP标签库,通常与EL表达式合作实现JSP页面的编写，让JSP写起来更加简单，优雅。可以让JSP页面在不写java代码的情况下实现取数据。

jstl是一个标签库，什么是标签库？可以只用一些自定义有自定义功能的标签。

其实EL+JSTL标签比java代码好用，就前端来说，而且它可以直接操作json类型，完美适应。

JSTL的引入

下载地址
http://tomcat.apache.org/taglibs/standard/

要使用jstl提供的标签，要先引入JSTL对应的标签库taglib

如何引入jstl标签库：(利用JSP指令的语法)

1
2
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

就可以引入对应想要的标签库，其中

  • uri：JSP标签的命名空间
  • prefix：命名空间的前缀(简称)

JSTL的使用(常用标签举例)

跟数据存储相关： set, out, remove

1
2
3
4
5
6
7
8
9
10
11
12
<c:set var="username" value="123" scope="request"></c:set>
<%
//request.setAttribute("username", "123");
%>

<c:out value="${username }"></c:out>
${username}

<c:remove var="username" scope="request" />
<%
//request.removeAttribute("username");
%>

条件标签

if 语句

1
2
3
<c:if test="${age>=19 }">
<font color="green">你是成年人</font>
</c:if>

if else 语句

1
2
3
4
5
6
7
8
<c:choose>
<c:when test="${age>=19 }">
<font color="green">你是成年人</font>
</c:when>
<c:otherwise>
<font color="red">未成年</font>
</c:otherwise>
</c:choose>

循环标签

1
2
3
4
5
6
7
<c:forEach items="${lists }" var="user">
${user.username }:${user.age }<br/>
</c:forEach>
<c:forEach items="${map }" var="kv">
${kv.key }:${kv.value }<br/>
</c:forEach>
（要给属性提供get方法）

JSON

JSON (JavaScript Object Notation, JS对象表达) 是一种轻量级的数据交换格式,采用完全独立于编程语言的文本格式来存储和表示数据. 详细介绍可参考http://www.json.org/json-zh.html

JSON只用于存储可被解析的数据，其本质是一个字符串

JSON出现之前，通常用XML来传递数据。XML也是一种纯文本格式，所以它适合在网络上交换数据，但由于XML规范繁琐复杂，

格式非常简单，有两种结构。

JSON两种结构

对象

对象结构以{大括号开始，以}大括号结束。内部由多个键值对构成，键值对之间由,分隔:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "name": "小明",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": "\"W3C\" Middle School",
  "skills": [
            "JavaScript",
            "Java",
            "Python",
            "Lisp"
            ]
}

相当于一个JavaBean，对象中包含了一个

数组

数组类型可以是对象类型，即元素是对象。由方括号[ ]规定。

1
2
3
4
5
6
7
8
9
10
[
    {
      "name": "小明",
      "age": 14,
    },
    {
      "name": "小华",
      "age": 22,  
    }
]

JSON注意事项

  • JSON规定字符集必须是UTF-8。

  • 为了统一解析，JSON的字符串规定必须用双引号""，Object的键也必须用双引号""。

此处参考了廖雪峰的官方网站对JS的讲解

JSON字符串与JSON对象辨析

  • 字符串：指使用“”双引号或’’单引号包括的字符。例如：var comStr = ‘this is string’;

  • json字符串：指的是符合json格式要求的js字符串。例如：var jsonStr = “{StudentID:’100’,Name:’tmac’,Hometown:’usa’}”;

  • json对象：指符合json格式要求的js对象。例如：var jsonObj = { StudentID: “100”, Name: “tmac”, Hometown: “usa” };

此处参考了mcgrady的博客

Ajax

Ajax, 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

最常用的应用就是在前端注册信息时，不刷新网页的情况下校验是否存在重复的用户名，或者校验输入的邮箱格式是否正确。

  • 作用：在不进行页面跳转或者页面刷新的情况下，向服务器发起请求，并取得服务器响应的数据。

  • 应用领域：数据校验

  • 优点： ①用户体验比较好(不需要页面跳转，速度快) ②服务器压力比较小

jQuery发起Ajax请求

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
	url:"xxxservlet",
	type:"post",
	data:{
		key:value,
		key:value
	},
	dataType:"json",
	success:function(msg){
		msg.key;
	}
});

其他参数和用法http://api.jquery.com/jQuery.ajax/

JavaScript发起Ajax请求

1
2
3
4
5
6
7
8
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","xxxservlet",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function(){
	if (xmlhttp.readyState==4 && xmlhttp.status==200){
		//成功后的处理
    }
}

其他参数和用法http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp

0%