# ajax-demo

**Repository Path**: zing173/ajax-demo

## Basic Information

- **Project Name**: ajax-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-18
- **Last Updated**: 2024-11-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 一、Ajax

### 1、同步请求

发起请求后，客户端必须等待服务器响应后，客户端才可以做其它事件。

特点：只能向服务器发起一个请求

实现：

- 客户端发起同步请求 
- Servlet 程序接收客户端的请求
- 加工处理 - 业务对象 - DAO对象
- 把加工处理的结果设置在作用域对象中
- 重定向或转发到 **JSP** 页面
- 在 JSP 中，使用 JSTL + EL 把 Servlet处理的结果读取出来



### 2、异步请求

发起请求后，客户端不需要等待服务器响应，客户端也可以做其它事件。

特点：可以向服务器同时发起多个请求

好处：提高用户体验和执行效率

实现：

- 客户端发起异步请求  - 在某个页面
- Servlet 程序接收客户端的请求
- 加工处理 - 业务对象 - DAO对象
- 把加工处理的结果转换为 JSON 字符串
  - 以流的方式输出到客户端浏览器中
  - Gson
- 在同上一个页面中，读取 JSON 字符串的数据
  - 把 JSON 字符串转换为 JavaScript 对象，便于读取数据
  - JavaScript 
  - DOM操作 

> 客户去餐馆点餐



## 二、如何实现异步请求（Ajax）

### 1、原生 JavaScript 实现

XMLHttpRequest API文档：[XMLHttpRequest - Web API | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest)

作业：原生Ajax实现 HelloWorld，思考如何传递数据！

`有法可依`



### 2、jQuery实现 

https://mvnrepository.com/





## 三、$.ajax

>$.post() / $.get() 

### 1、语法一

```js
$.ajax("url",{选项}) ;
```



### 2、语法二

```js
$.ajax({
    url:'xxx.do',
    ...
}) ;
```



### 3、获取服务器响应的数据

```js
$.ajax("url",{
    // ...
    success:function(data) {
     	// data 就是服务器响应回来的数据 - DOM 操作   
    }
}) ;
```



### 4、客户端向服务器发送数据

方法一：字符串的方式传递

```js
// 语法
data:"参数名1=值&参数名2=值&...&参数名N=值"
```



方法二：对象的方式传递

```js
// 语法
data:{
	参数名1:值,
    参数名2:值,
    ...,
    参数名N:值
}
```



## 四、课堂作业

<img src="images/1698135584575.png" alt="1698135584575" style="zoom: 50%;" />

要求：

1.不需要连接数据库，同时满足用户名和密码非空就登录成功

2.登录失败，则在登录按钮旁边显示错误的帐号或密码

3.登录成功，则把当前登录的帐号保存在本地存储中（提示：localStorage），并跳转到欢迎页面，在欢迎页面显示登录用户信息。



**小结**

1、在客户端中，如何实现页面的跳转呢？

```js
window.location.href = "页面"
location.href = "页面"
```



2、在客户端中，各页面之间如何共享数据呢？

```js
// 设置数据
localStorage.setItem("名称",数据) ;

// 获取数据
var 变量 = localStorage.getItem("名称") ;

// sessionStorage 与 localStorage 用法一样
// 区别：作用范围不一样
```





## 五、JSON

>目标：服务器把数据转换为 JSON 字符串后，再响应回客户端

### 1、概念

JavaScript对象的**字符串**表示

```js
// 对象
{
    "username":"zs",
    "age":18
}

// 数组
[
    
]
```



### 2、作用

- 封装数据：以对象的方式进行数据的封装
- 数据的传递：实现服务器与客户端之间的传递



### 3、Gson工具的使用

#### 1）手工操作

>麻烦，效率低，不小心容易错误

```java
// 程序员需要手工的拼接字符串
String json = "{\"username\":\"zs\",\"age\":18}" ;
```



#### 2）Gson工具操作

>方便、高效
>
>前提：首先把数据封装到相关的 Java 对象中（如实体对象）

```java
// 第一：实例化实体对象，封装相关的数据
User user = new User("张三",20) ;

// 第二：实例化 Gson 对象
Gson gson = new Gson();

// 第三：把实体对象转换为 JSON 字符串
String json = gson.toJson(user);
```



注意：在客户端页面中，为了方便访问数据，需要把 JSON 字符串转换为对应的 JavaScript 对象。

```js
$.ajax("json.do",{
    type:'post',
    
    // 把 JSON 字符串，还原（转换）为对应的 JavaScript 对象
    dataType:'json',
    
    success:function( obj ){
        // 注意：服务器响应回来的是 JavaScript 对象的字符串表示 —— JSON
        // 解决：把 JSON 字符中转换为对应的 JavaScript 对象
        console.log(typeof obj)
        console.log( obj )
        // 错误！！！！
        console.log( obj.username )
    }
}) ;
```



### 4、Gson工具的常用操作

- 序列化

  - `String json = gson对象.toJson(Java对象)`

- 反序列化

  - `类名 对象 = Gson对象.fromJson("JSON字符串",类名.class)`

- 日期时间处理

  ```java
  Gson gson = new GsonBuilder()
      .setPrettyPrinting()
      .setDateFormat("yyyy-MM-dd hh:mm:ss.SSS").create();
  ```



## 六、综合作业

![table](images/img.png)

要求：JDBC + Ajax 实现商品信息表的 CRUD 操作

提示步骤：

第一：创建数据表

```mssql
create table goods 
(
	good_id char(9) primary key,	-- 编号
    good_name varchar(50) ,			-- 名称
    good_price float ,				-- 价格
    good_date date ,				-- 上架日期
    good_status int					-- 状态：1上架，0下架
);

insert into goods values ('201300001','Lenovo A820T',650,'2018-01-07',1);

insert into goods values ('201300007','Acer 星锐 4752G',4000.8,'2019-09-02',1);

insert into goods values ('201300009','ZTE U880',450,'2021-12-07',0);



```



第二：定义实体对象

```java
public class Good {
    // ...
}
```



第三：定义 DAO 接口

```java
public interface GoodDao {
    // ...
}
```



第四：实现 DAO 接口

```java
public GoodDaoImpl implements GoodDao {
    // ...
}
```



第五：编写前端页面，发起异步请求，实现相关的操作



第六：编写服务器端程序（XxxServlet）,实现对相关的请求进行处理

```java
public class XxxServlet extends HttpServlet {
    // 重写 doXxx 方法 ，实现相关的功能 
}
```