java-web/docs/tasks/chapter03-tasks.md

3. 交互式前端技术

第一部分：响应式设计与Bootstrap（30分钟）

1. Bootstrap快速入门

   • 目标：熟悉Bootstrap的基本安装和使用。
   • 步骤：
     1. 创建一个新的HTML文件，引入Bootstrap的CDN链接。
     2. 使用Bootstrap的栅格系统创建一个简单的响应式布局。
     3. 添加一些Bootstrap组件，如按钮、导航栏等。

2. 响应式布局练习

   • 目标：使用Bootstrap栅格系统创建一个简单的响应式布局。
   • 步骤：
     1. 使用12列栅格系统创建一个包含标题、正文内容和侧边栏的布局。
     2. 当屏幕宽度减小时，布局应该自动调整以适应小屏幕设备。

第二部分：AJAX与异步请求处理（45分钟）

1. Fetch API练习

   • 目标：使用Fetch API发送GET和POST请求。
   • 步骤：
     1. 创建一个HTML文件，包含一个按钮和一个输出结果的区域。
     2. 使用Fetch API发送GET请求到 https://jsonplaceholder.typicode.com/posts。
     3. 显示接收到的数据。
     4. 在页面添加一个简单的表单，使用Fetch API发送POST请求到https://jsonplaceholder.typicode.com/posts，并显示服务器的响应。

2. jQuery AJAX练习

   • 目标：使用jQuery的AJAX方法发送请求。
   • 步骤：
     1. 创建一个HTML文件，包含一个按钮和一个输出结果的区域。
     2. 使用$.get()方法发送GET请求到https://jsonplaceholder.typicode.com/posts
     3. 显示接收到的数据。
     4. 在页面添加一个简单的表单，使用$.ajax()方法发送POST请求到https://jsonplaceholder.typicode.com/posts，并显示服务器的响应。

第三部分：XML简介（10分钟）

1. XML文档创建
   • 目标：创建一个简单的XML文档。
   • 步骤：
     1. 创建一个XML文件，包含一个描述书籍的信息。
     2. 包括书名、作者、出版日期等信息。
     3. 使用注释和处理指令。
     4. 验证XML文档是否符合规范。

第四部分：JSON简介（15分钟）

1. JSON文档创建
   • 目标：创建一个简单的JSON文档。
   • 步骤：
     1. 创建一个JSON文件，包含一个描述个人的信息。
     2. 包括姓名、年龄、地址等信息。
     3. 使用嵌套的对象和数组。