我的JAVA-Web基础（2）

1.JDBC

防止sql注入

2.JSP

JSP的基本语法

基本语法是

<% %> Java代码

<%= %> 输出变量可以转换成${变量}的EL表达式

<%! %>定义变量

JSP的基本语法包括以下几个主要部分：

1. 表达式（Expression）

表达式用于将Java代码的输出插入到页面中。表达式的语法是 <%= %>，它会自动调用 toString() 方法并将结果输出到页面。

语法：
复制代码
```
<%= expression %>
```
示例：
复制代码
```
<html>
<body>
    <p>当前时间是: <%= new java.util.Date() %></p>
</body>
</html>
```
在这个例子中，<%= new java.util.Date() %> 会输出当前的时间。

2. 脚本片段（Scriptlet）

脚本片段允许你在JSP页面中嵌入多行Java代码。脚本片段的语法是 <% %>，它可以直接编写Java代码块。

语法：
复制代码
```
<% Java code %>
```
示例：
复制代码
```
<html>
<body>
    <%
        String message = "Hello, World!";
        out.println("<p>" + message + "</p>");
    %>
</body>
</html>
```
在这个例子中，<% ... %> 包含了一个Java代码块，定义了一个字符串变量 message 并将其输出到页面。

3. 声明（Declaration）

声明用于在JSP页面中定义Java变量或方法。声明的语法是 <%! %>，它会在JSP页面编译时被转换为类的成员变量或方法。

语法：
复制代码
```
<%! Java code %>
```

示例：

复制代码

<html>
<body>
    <%!
        int count = 0;

        public String getGreeting() {
            return "Welcome to JSP!";
        }
    %>

    <p>访问次数: <%= ++count %></p>
    <p><%= getGreeting() %></p>
</body>
</html>

在这个例子中，<%! ... %> 定义了一个整数变量 count 和一个方法 getGreeting()，它们可以在整个JSP页面中使用。

4. 指令（Directive）

指令用于控制JSP页面的行为，如引入其他文件、设置页面属性等。常见的指令有 @page、@include 和 @taglib。

@page 指令：用于设置JSP页面的全局属性，如编码、错误页面、导入包等。
- 语法：
  复制代码
```
<%@ page attribute="value" %>
```
- 常用属性 ：
  - contentType：指定页面的内容类型和字符编码。例如：
    复制代码
```
<%@ page contentType="text/html; charset=UTF-8" %>
```
  - import：导入Java类。例如：
    复制代码
```
<%@ page import="java.util.*, java.text.*" %>
```
  - errorPage：指定错误页面。例如：
    复制代码
```
<%@ page errorPage="error.jsp" %>
```

@include 指令：用于在编译时将另一个文件的内容包含到当前JSP页面中。

语法：
复制代码
```
<%@ include file="header.jsp" %>
```

示例：

复制代码

<%@ include file="header.jsp" %>
<p>This is the main content of the page.</p>
<%@ include file="footer.jsp" %>

@taglib 指令：用于引入自定义标签库（Tag Library），如JSTL（JavaServer Pages Standard Tag Library）。
- 语法：
  复制代码
```
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
```

6.内置对象

JSP提供了多个内置对象，这些对象可以直接在JSP页面中使用，而无需显式声明。常见的内置对象包括：

request：表示客户端的HTTP请求对象，可以获取请求参数、头信息等。
response：表示服务器的HTTP响应对象，可以设置响应头、状态码等。
out ：用于向客户端输出内容，类似于 System.out。
session：表示用户的会话对象，可以存储用户的状态信息。
application ：表示 ServletContext 对象，可以访问Web应用的全局配置和资源。
config ：表示 ServletConfig 对象，可以获取Servlet的初始化参数。
pageContext：提供对JSP页面上下文的访问，可以获取其他内置对象、管理页面属性等。

示例：

复制代码

<html>
<body>
    <p>请求的URL: <%= request.getRequestURL() %></p>
    <p>会话ID: <%= session.getId() %></p>
    <p>应用程序名称: <%= application.getServletContextName() %></p>
</body>
</html>

显示为：4-dddd 1-aaaa 2-bbbb 3-cccc

解释：有一个response缓冲区，out的缓冲区，最终显示给用户的是response缓冲区

当out的缓冲区空间不为0时，除了response是直接往response缓冲区写东西完，其他都是往out缓冲区写东西，最后out缓冲区拼在response缓冲区里面

当out的缓冲区空间为0时，out和response写东西按写html的顺序往response缓冲区写东西

7. JSTL（JavaServer Pages Standard Tag Library）

JSTL 是一组标准的标签库，提供了丰富的标签来简化JSP页面的开发。JSTL 标签库包括核心标签库（c）、格式化标签库（fmt）、SQL标签库（sql）和函数标签库（fn）。

引入JSTL：

复制代码

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

常用标签：

<c:if>：条件判断。

复制代码

<c:if test="${param.username == 'admin'}">
    <p>Welcome, Admin!</p>
</c:if>

<c:choose>、<c:when>、<c:otherwise>：多条件判断。

复制代码

<c:choose>
    <c:when test="${param.username == 'admin'}">
        <p>Welcome, Admin!</p>
    </c:when>
    <c:otherwise>
        <p>Welcome, Guest!</p>
    </c:otherwise>
</c:choose>

<c:forEach>：循环遍历集合或数组。

复制代码

<c:forEach var="item" items="${items}">
    <p>${item}</p>
</c:forEach>

<c:set>：设置变量。

复制代码

<c:set var="name" value="John Doe" />
<p>Name: ${name}</p>

<c:url>：生成URL。

复制代码

<a href="<c:url value='/login' />">Login</a>

总结

JSP 提供了丰富的语法和功能，使开发者能够轻松地创建动态Web页面。通过结合表达式、脚本片段、声明、指令、内置对象和JSTL标签库，你可以灵活地处理用户输入、生成动态内容、管理会话和应用程序状态等。

表达式：用于输出Java代码的结果。
脚本片段：用于编写多行Java代码。
声明：用于定义Java变量和方法。
指令：用于控制JSP页面的行为。
内置对象：提供了对请求、响应、会话等的访问。
JSTL：简化了JSP页面的开发，提供了丰富的标签库。

通过合理使用这些语法元素，你可以编写出高效、可维护的JSP页面。

3.jQuery 的 `$.ajax()` 方法详解

$.ajax() 是 jQuery 中用于发起异步HTTP请求的核心方法。它允许你通过JavaScript与服务器进行通信，而无需刷新整个页面。$.ajax() 提供了丰富的配置选项，可以处理各种类型的请求（如GET、POST等），并且支持多种数据格式（如JSON、XML、HTML等）。

1. 基本语法

复制代码

$.ajax({
    url: 'URL',          // 请求的URL
    type: 'GET',         // 请求类型（GET、POST等）
    data: {},            // 发送到服务器的数据
    dataType: 'json',    // 期望从服务器接收的数据类型
    success: function(response) {
        // 请求成功时的回调函数
    },
    error: function(xhr, status, error) {
        // 请求失败时的回调函数
    }
});

2. 常用参数详解

url：
- 类型：字符串
- 描述：指定请求的目标URL。
- 示例：
  复制代码
```
url: '/api/data'
```
type：
- 类型：字符串
- 描述：指定HTTP请求的方法（GET、POST、PUT、DELETE等）。默认值是 GET。
- 示例：
  复制代码
```
type: 'POST'
```
data：
- 类型：对象、字符串或数组
- 描述：发送到服务器的数据。可以是键值对的对象、查询字符串或表单数据。
- 示例：
  复制代码
```
data: { name: 'John', age: 30 }
```
dataType：
- 类型：字符串
- 描述：期望从服务器接收到的数据类型。常见的值有：
  - json：表示JSON格式的数据。
  - xml：表示XML格式的数据。
  - html：表示HTML文档。
  - text：表示纯文本。
  - script：表示JavaScript代码。
- 示例：
  复制代码
```
dataType: 'json'
```
success：
- 类型：函数
- 描述：当请求成功时调用的回调函数。该函数接收从服务器返回的数据作为参数。
- 参数：
  - response：从服务器返回的数据。
  - status：请求的状态（通常是 "success"）。
  - xhr：XMLHttpRequest 对象。
- 示例：
  复制代码
```
success: function(response) {
    console.log('Data received:', response);
}
```
error：
- 类型：函数
- 描述：当请求失败时调用的回调函数。该函数接收三个参数：xhr、status 和 error。
- 参数：
  - xhr：XMLHttpRequest 对象。
  - status：错误状态（如 "error", "timeout", "abort" 等）。
  - error：具体的错误信息。
- 示例：
  复制代码
```
error: function(xhr, status, error) {
    console.error('Error:', error);
}
```

3. 常见使用场景

3.1 GET 请求

复制代码

$.ajax({
    url: '/api/users',
    type: 'GET',
    success: function(users) {
        console.log('Users:', users);
    },
    error: function(xhr, status, error) {
        console.error('Error fetching users:', error);
    }
});

3.2 POST 请求

复制代码

$.ajax({
    url: '/api/users',
    type: 'POST',
    data: JSON.stringify({ name: 'John', age: 30 }),
    contentType: 'application/json',
    success: function(response) {
        console.log('User created:', response);
    },
    error: function(xhr, status, error) {
        console.error('Error creating user:', error);
    }
});

3.3 发送表单数据

复制代码

$('#myForm').on('submit', function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为

    $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: $(this).serialize(), // 将表单数据序列化为查询字符串
        success: function(response) {
            console.log('Form submitted successfully:', response);
        },
        error: function(xhr, status, error) {
            console.error('Error submitting form:', error);
        }
    });
});

3.4 处理JSON响应

复制代码

$.ajax({
    url: '/api/data',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log('Received JSON data:', data);
    },
    error: function(xhr, status, error) {
        console.error('Error fetching JSON data:', error);
    }
});