详细介绍：AJAX 入门

01-AJAX 简介

1.1 什么是 AJAX ？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

一个标准。就是AJAX 不是新的编程语言，而

AJAX 在不重新加载整个页面的情况下, 和服务器进行数据交互, 进行局部刷新, 也称为局部刷新技术。

1.2 同步和异步

同步: 发送请求, 必须等待响应, 在响应没有返回之前, 客户端什么事情都没法干 ,只能等待响应的返回。

异步: 发送请求, 不必等待响应, 客户端该干嘛干嘛, 当响应返回的时候, 通知客户端来处理响应。

举例：

同步：对讲机: 通话之前要先对号, 接通之后才能通话。

异步：QQ/微信发送信息: 发送完信息, 去看视频; 不需要等待回复, 当对方回复的时候, 会通知来处理响应。

同步: 去照相馆照相, 照完相等清洗照片, 每个2分钟问一下照片洗出来了吗, 直到照片洗出来才去理发。

异步: 去照相馆照相, 照完相等清洗照片; 告诉老板洗出来给我打电话,我过来取; 然后去理发了。

同步请求是刷新整个页面的技术. 响应的时候会返回整个页面的 html 代码.。

异步请求是局部刷新技术, 不会返回整个页面数据, 只会返回页面中的小部分数据。

1.3 AJAX 用于什么场景?

适合于处理响应速度要求特别高的, 或者提高用户体验的功能。

地图类: 导航, 使用同步延时特别高; 使用异步。

秒杀系统:实时展示商品数量, 还有多久...

提高用户体验表单使用最多: 比如, 用户名唯一性验证。

异步；就是手机端软件: 都异步。就是后端项目: 后台都

02-AJAX 基础

2.1 创建异步对象

XMLHttpRequest 对象: 用来发送异步请求以及获取响应资料, 它是构造函数

var ajax = new XMLHttpRequest();
console.log(ajax);
// 兼容性处理, 在早期浏览器(IE5, IE6, IE7) , 有兼容问题
// IE5, IE6 内核的浏览器, 利用 ActiveXObject 对象来处理异步请求
if(XMLHttpRequest) { // 若浏览器帮助此对象, 使用这个对象来创建
ajax = new XMLHttpRequest();
} else { // IE5, IE6 兼容处理
ajax = new ActiveXObject("Microsoft.HTTP");
}
console.log(ajax);

2.2 发送请求

1）方式介绍

方法	描述
open(method,url,async)	否异步处理请求。就是配置请求, 规定请求方式、请求地址以及 method：请求方式；GET 或 POST url：请求地址 async：true（异步）或 false（同步）, 默认异步
send(string)	将请求发送到服务器。 string：仅用于 POST 请求, 用于传递参数

2）创建步骤

[1] 创建 XMLHttpRequest 对象。

[2] 调用 open 方法部署请求。

[3] 调用 send 途径发送请求。

<button onclick="sendGet()">请求发送</button>
<script type="text/javascript">
function sendGet(){
var ajax=new XMLHttpRequest();
ajax.open("get", "/07-ajax/ajaxTest?name=wuxiaojun&sex=男&age=20");
ajax.send();
}
</script>

2.3 接收响应

1）属性介绍

属性	描述
onreadystatechange	响应事件, 监听服务器端响应状态的改变，每当 readyState (响应状态) 属性改变时，就会调用该函数。
readyState	响应状态存有响应状态的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪; 说明服务器端开始返回响应; 前0-3这4状态并不是所有的浏览器都有, 不过每个浏览器都有第5个状态
status	响应状态码 200: "OK" 404: 未找到页面 500: 服务器错误

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应内容。

2）接收响应步骤

老板(浏览器) 接待客人(王总), 老板不会在一直在门口等待, 一般找个小弟看着, 当王总来的时候通知老板出来迎接客人。

[1] 添加 onreadystatechange 事件( 小弟 ), 监听服务端状态的改变 ----> 找个小弟在门口盯着。

[2] 当 readyState == 4 的时候, 说明响应就绪, 服务器开始发送响应 -----> 来了一个人, 小弟询问是否是王总。

[3] 当 status == 200 的时候, 说明响应成功 -----> 来了一个人, 小弟询问确定是王总。

[4] 通过 responseText 接收响应数据 -----> 通知老板出来接待客人。

[5] 依据 DOM 运行完成局部刷新。

<button onclick="getResponse()">接收响应</button>
<h3>1</h3>
<h3>2</h3>
<h3>3</h3>
<h3>4</h3>
<h3>5</h3>

<h2></h2>
<h3>6</h3>
<h3>7</h3>
<h3>8</h3>
<h3>9</h3>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
function getResponse() {
// 1. 发送请求
var ajax = new XMLHttpRequest();
// 2. 配置请求
ajax.open("get", "/04-ajax/response");
// 3. 发送请求
ajax.send();
// 4. 接收响应
// [1] 通过 onreadystatechange 事件, 监听服务器端响应状态的变化
ajax.onreadystatechange = function() {
// [2] 当 readyState == 4 , 说明响应就绪, 服务器端开始返回响应数据
if(ajax.readyState == 4) {
// [3] 当 status == 200 , 说明响应成功
if(ajax.status == 200) {
// [4] 接收响应数据
var data = ajax.responseText;
// [5] 通过 DOM 操作完成局部刷新
$("h2").html(data);
}
}
}
}
</script>

2.4 AJAX 工作原理

AJAX 的核心是 XMLHttpRequest 对象（XHR），它行在后台与服务器进行通信。

原理流程：

1） JavaScript 创建 XMLHttpRequest

2）调用 open() 方法配置请求（URL、请求方式等）。

3）调用 send() 发送请求。

4）服务器处理并返回数据（JSON、XML、文本等）。

5） JavaScript 接收数据，更新页面部分内容。

2.5 同步请求和异步请求的区别？

1）发送方式不同：

同步请求: 地址栏输入, 超链接, form 表单, location.href

异步请求: 通过 XMLHttpRequest 对象发送请求

2）响应方式不同：

同步请求: 请求转发, 重定向; 返回都是整个页面数据

异步请求: 通过 response 输出流将响应返回, 返回部分数据.

3）发送请求的时机不同：

异步请求: 先进入 jsp 页面, 然后利用事件来触发异步请求的发送

比如: 点击的时候发送, 失去焦点的时候发送, 表单提交的时候发送, 文档就绪的时候发送

03-异步请求

3.1 发送异步请求

[1]创建 XMLHttpRequest 对象

var ajax=new XMLHttpRequest();

[2]配置请求

ajax.open("请求方式","请求地址");

建议请求地址使用绝对地址：/工程名称/servlet-url

[3]发送请求

用, GET 方式不需要就是ajax.send(data);//data:POST 方式

3.2 发送带参数的异步请求

1）GET 方式

[1]创建 XMLHttpRequest 对象

var ajax=new XMLHttpRequest();

[2]配置请求

ajax.open("请求方式","请求地址?参数名称=参数值&参数名称=参数值&...");

建议请求地址使用绝对地址：/工程名称/servlet-url

[3]发送请求

ajax.send();

2）POST 方式

[1]创建 XMLHttpRequest 对象

var ajax=new XMLHttpRequest();

[2]配置请求

ajax.open("请求方式","请求地址");

建议请求地址使用绝对地址：/工程名称/servlet-url

[3]设置请求头

ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

[4]发送请求

ajax.send("参数名称=参数值&参数名称=参数值&...");

3.3 接收响应

1.接受响应，建立与发送完请求的基础上
2.通过 onreadystatechange 事件，监听响应状态的变化
ajax.onreadystatechange=function (){
3.若 readyState=4，说明响应就绪(404,500类型响应)
if(ajax.readyState==4){
4.若 status==200, 说明响应成功
if(ajax.status==200){
5.通过 responseText 获取响应
var txt=ajax.responseText;
6.通过 DOM 处理完成局部刷新
}
}
}

3.4 完整代码

1）前端页面

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.3.4.1.js"></script>
<script type="text/javascript">
//ajax 根据 id 获取用户
function getUser(){
//获取 id 值
var id = $("input[name='id']").val();
//ajax 发送请求获取 id 对应的用户信息
//1.创建 ajax 核心对象（异步对象）---XMLHttpRequest
var ajax = new XMLHttpRequest();
//2.设置请求
ajax.open("get","GetUserServlet?id="+id,true);
//3.发送
ajax.send(null);
//4.响应处理
ajax.onreadystatechange=function(){
if(ajax.readyState==4&&ajax.status==200){
//接收结果数据做出响应 -- 局部更新页面
//响应材料（1）responseText---json 格式字符串 (2)responseXML
var data = ajax.responseText;
console.log(data);
//下面的操控是错误的 data 接收的是 json 格式的字符串不是 json 对象
//data.id data.username data.password data.realname
//需要将 json 格式的字符串 ------> json 对象
var json = JSON.parse(data);
console.log(json);
var str = "ID:"+json.id+",用户名:"+json.username+",密码:"+json.password+",真实名称:"+json.realname;
//局部更新
$("#div1").html(str);
//json 对象 -----> json 格式字符串
var ss = JSON.stringify(json);
console.log(ss);
}
}
}
</script>
</head>
<body>
用户id:<input type="text" name="id"><input type="button" onclick="getUser()" value="取用户"><br>
<h2>用户信息:</h2>
<div id="div1">
</div>
</body>
</html>

2）后台servlet

package com.youzhong.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.youzhong.dao.UserDAO;
import com.youzhong.entity.User;
/**
* Servlet implementation class GetUserServlet
*/
public class GetUserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 是一个处理 ajax 请求的 servlet
// 根据 id 查询用户
// 1. 抓取参数 id
String id = request.getParameter("id");
// 2. dao 查询用户
UserDAO dao = new UserDAO();
User user = dao.findById(Integer.parseInt(id));
// 3. 使用 out 流写回 user 数据
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
// 把 user 对象 ---> json 格式字符串启用 jackson
ObjectMapper om = new ObjectMapper();
String json = om.writeValueAsString(user);
out.println(json);
out.flush();
out.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}

04-JSON 数据

4.1 什么是 JSON ?

JSON（JavaScript Object Notation）一种轻松的数据格式 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。就是，比 xml 更轻巧。JSON

4.2 JSON 数据格式

1）JSON 对象:对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。属性名称使用引号包裹。

语法：

{
"属性名称": 值,
"属性名称": 值,
"属性名称": 值,
...
}

JSON 对象是 JS 对象中的一种; JSON 对象的属性采用引号包裹然后 JSON 对象中没有方法。

2）JSON 数组：JSON 数组就是 js 数组。

[对象,对象,对象,...,对象]

<script type="text/javascript">
// 定义 json 对象, 用来存储数据
var jsonObj = {
"name": "王丽",
"age": 23,
"sex": "女"
};
console.log(jsonObj);
// 应用属性: 对象.属性
console.log(jsonObj.sex);
// json 数组
var jsonArr = [{
"name":"王磊",
"sex":"男"
},{
"name":"李娜",
"sex":"女"
}];
console.log(jsonArr);
// 遍历集合
for (var i = 0; i < jsonArr.length; i++) {
console.log(jsonArr[i].name);
}
</script>

4.3 json 字符串和 json数据的转换

json数据 = JSON.parse(json格式的字符串); // 将 json 格式的字符串转换为 json 素材(对象,数组)

json字符串 = JSON.stringify(json内容); // 将 json 数据转换为 json 格式的字符串

<table border="1">
<tr>
<td>药草名称</td>
<td><input type="text" name="yname"></td>
</tr>
<tr>
<td>药草类型</td>
<td>
<select>
<option>请选择</option>
</select>
</td>
</tr>
<tr>
<td>药草产出时间</td>
<td><input type="date" name="birthday"></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="提交"></td>
</tr>
</table>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$("select").click(function (){
var ajax=new XMLHttpRequest();
ajax.open("get","/012-json/typeServlet");
ajax.send();
ajax.onreadystatechange=function (){
if(ajax.readyState==4&&ajax.status==200){
var txt=ajax.responseText;
var json=JSON.parse(txt);
for(var i=0;i<json.length;i++){
$("select").append("<option>"+json[i].type_name+"</option>");
}
}
}
})
</script>

05-JQuery 操作 AJAX

5.1 发送 get 请求

$.get(url,[data],[fn],[dataType]): url 是必填参数, 其他参数是可选参数(需要就添加, 不需要就去掉)

url: 请求地址

data: 可选参数, 请求参数

fn: 响应处理函数, 有一个参数用来接收响应数据

通过dataType: 数据类型, 默认是字符串; 规定返回响应数据的类型, 若是 json 数据, 需要设置 json , 能够自动进行数据转换

<button>发送请求 - 无参</button>
<button>发送请求 - 有参</button>
<button>发送请求 - 接收响应</button>
<button>发送请求 - 接收JSON内容响应</button>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$("button:eq(0)").click(function() {
// 发送请求
$.get("/04-ajax/ajaxTest");
});
$("button:eq(1)").click(function() {
// 参数:
// [1] 利用传参字符串: 参数名称=参数值&参数名称=参数值&...
// $.get("/04-ajax/ajaxTest","name=zhangli&age=23&sex=man");
// [2] 使用 js 对象传参
// {参数名称: 参数值,参数名称: 参数值,...,参数名称: 参数值}
var data = {
name: "lili",
age: 23,
sex: "woman"
};
$.get("/04-ajax/ajaxTest", data);
});
$("button:eq(2)").click(function() {
// 接收响应
$.get("/04-ajax/response", function(response) {// response : 响应数据
console.log(response);
});
});
$("button:eq(3)").click(function() {
// 接收 json 数据
$.get("/04-ajax/json",function(response) {
console.log(response);
console.log(typeof response);
},"json");
});
</script>

5.2 发送 post 请求

可选参数(得就添加, 不需要就去掉)就是$.post(url,[data],[fn],[dataType]): url 是必须参数, 其他参数

url: 请求地址

data: 可选参数, 请求参数

fn: 响应处理函数, 有一个参数用来接收响应材料

dataType: 数据类型, 默认是字符串; 规定返回响应资料的类型, 若是 json 资料, 需要设置 json , 可以自动进行数据转换

5.3 get 和 post 的选择

1）当我们传递参数有中文或者提交整个表单（尤其是表单有上传），就选择 post

通过2）其它的，选择 get 能够。（get 请求方式执行速度 > post 请求方式）

5.4 综合性的方法

$.ajax(url, [settings]); 发送任何类型的异步请求

url: 必填参数, 请求的 url

settings: 部署对象, 可选参数

{

GET 方式就是method: "", // 请求方式, 默认

data: "", // 请求参数, 可以是传参字符串或者 js 对象

success: function(response) { // 响应成功的处理函数

error: function(err) { // 响应失败的处理函数

dataType: "" , // 将响应数据转换为何种类型, 默认字符串, 可以设置为 json 将响应资料转换为 json 数据

}

<button>发送请求 - 无参</button>
<button>发送请求 - 有参</button>
<button>发送请求 - 接收响应</button>
<button>发送请求 - 接收JSON数据响应</button>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$("button:eq(0)").click(function() {
// 发送请求
$.ajax("/04-ajax/ajaxTest", {
method: "post"
});
});
$("button:eq(1)").click(function() {
// 发送带参数的请求
var formData = {
name: "李四",
age: 23,
sex: "男"
};
$.ajax("/04-ajax/ajaxTest",{
method: "post",
data: formData
});
});
$("button:eq(2)").click(function() {
// 接收响应
$.ajax("/04-ajax/response", {
success: function(response) { // 响应成功的处理函数
alert(response);
},
error: function(err) { // 响应失败的处理函数, 服务器报错
console.log(err); // err: 错误信息对象
// 获取错误信息
$("body").append(err.responseText);
}
})
});
$("button:eq(3)").click(function() {
// 接收 json 材料
$.ajax("/04-ajax/json", {
success: function (response) {
console.log(response);
console.log(typeof response);
},
dataType: "json" // 将响应数据转换为 json
})
});
</script>

posted @ 2025-08-16 21:07 wzzkaifa 阅读(15) 评论(0) 收藏举报

刷新页面返回顶部

wzzkaifa

详细介绍：AJAX 入门

01-AJAX 简介

1.1 什么是 AJAX ？

1.2 同步和异步

1.3 AJAX 用于什么场景?

02-AJAX 基础

2.1 创建异步对象

2.2 发送请求

2.3 接收响应

2.4 AJAX 工作原理

2.5 同步请求和异步请求的区别？

03-异步请求

3.1 发送异步请求

3.2 发送带参数的异步请求

3.3 接收响应

3.4 完整代码

04-JSON 数据

4.1 什么是 JSON ?

4.2 JSON 数据格式

4.3 json 字符串和 json数据的转换

05-JQuery 操作 AJAX

5.1 发送 get 请求

5.2 发送 post 请求

5.3 get 和 post 的选择

5.4 综合性的方法

公告