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发送请求
ajax.send(data);//data:POST 方式是用, GET 方式不需要

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）一种简单的数据格式，比 xml 更轻巧。JSON 是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。

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(jsonArri.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\("select").append("<option>"+jsoni.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: 配置对象, 可选参数
{
method: "", // 请求方式, 默认是 GET 方式
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>