1. Ajax 引言

a) 概念

Asynchronous Javascript And XML

👉 异步请求 JavaScript + XML

b) 传统请求

发起传统请求的方式

1. 地址栏
2. 超链接
3. 表单
4. location.href
5. 

传统请求的问题

• 响应的是新页面
• 页面整体刷新
• 用户必须等待响应完成
• ❌ 用户体验差

c) 异步请求的特点

• 响应内容：页面局部 / 字符串
• 不刷新页面
• 用户无需等待即可继续操作

d) 传统请求 vs 异步请求

✅ 建议：在合适场景下优先使用异步请求

2. 异步请求的开发

a) 创建异步请求对象

// Chrome / Firefox / Safari
var xhr = new XMLHttpRequest();

// IE5 / IE6
var xhr = new ActiveXObject("Microsoft.XMLHTTP");

3. 用户名检测案例

• 不再跳转页面
• 控制表单是否提交

4. Ajax 开发步骤

a) 创建异步请求对象

// IE
xhr = new ActiveXObject("Microsoft.XMLHTTP");

// 非 IE
xhr = new XMLHttpRequest();

b) 发送请求

GET 请求

xhr.open("GET", "URL?name=suns&pwd=123&sex=male");
xhr.send(null);

POST 请求

xhr.open("POST", url, true); // true 表示异步
xhr.setRequestHeader(
  "Content-Type",
  "application/x-www-form-urlencoded"
);
xhr.send("name=suns&pwd=123&sex=male");

📌 为什么要设置 Content-Type？

模拟表单提交，告诉服务器当前数据是表单格式

c) 监听响应

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var result = xhr.responseText;
    // DOM 编程更新页面
  }
};

d) 服务器端处理

• ❌ 不再进行页面跳转
• ✅ 返回字符串信息
• ✅ 使用 response.getWriter()输出

5. JSON 协议串

JSON 本质：字符串

a) 作用

• 在不同编程语言之间传输数据

b) JSON 核心格式

① 对象形式

{ "name": "suns", "age": 18 }

② 集合形式

["Java", "Ajax", "Spring"]

③ 内嵌对象

{
  "user": {
    "name": "suns",
    "age": 18
  }
}

④ Map 类型

与对象写法一致

c) Java 中的 JSON 工具

• Json-lib
• Gson（Google）
• Fastjson（阿里）
• Jackson（Spring MVC）

Gson 示例

Gson gson = new Gson();
String json = gson.toJson(obj);

Gson 常见问题

① 属性名不一致

② 对象回环问题

③ @Expose 注解

未标注的属性不会被转换

使用 GsonBuilder（更灵活）

日期类型处理

JSON → JS 对象

var obj = JSON.parse(jsonString);

6. 案例：Ajax 显示所有用户信息

AJAX 框架 · Day2

1. Spring MVC 对 Ajax 的支持

a) 底层整合

b) @ResponseBody

• 自动将对象转换为 JSON
• 底层使用 Jackson

✅ 引入 Jackson jar 包

Jackson 常用注解

实战推荐配置

2. Struts2 与 Ajax 集成

3. Ajax 编程思想

✅ 适用场景：

• 页面局部交互
• 结构简单
• 非整页刷新