Web前端-Ajax-01-Ajax概述
Web前端-Ajax-01-Ajax概述
1.全局刷新和局部刷新
在B/S结构项目中，浏览器负责向服务器发送请求，服务器负责接收请求，并将处理结果发送回浏览器。
浏览器将返回的html、jsp等命令文件进行解析并展示到页面中。
1.1全局刷新
浏览器在接收到响应包后，在展示数据时，浏览器原有内容被响应包中数据覆盖掉。
全局刷新原理:
-
必须由浏览器亲自向服务端发送请求协议包
-
这个行为导致服务端直接将【响应包】发送到浏览器内存中
-
这个行为导致浏览器内存中原有内容被覆盖掉
-
这个行为导致浏览器在展示数据时候，只有响应数据可以展示
原理图：
全局刷新实例：
全局刷新特点：
- 整个浏览器被新的数据所覆盖。
- 在网络中传输大量的数据。
- 浏览器需要加载、渲染页面
1.2局部刷新
浏览器接受响应包后，在展示数据时，既可以在窗口中看到本次的响应数据，又可以看到浏览器内存中原有数据。
局部刷新原理：
- 不能由浏览器发送请求给服务端
- 浏览器委托位于浏览器内存中的一个脚本对象【异步对象】代替浏览器发送请求
- 这个行为会导致服务端直接将【响应包】发送到脚本对象内存中。
- 这个行为会导致脚本对象内容被覆盖掉，但是此时浏览器内存中绝大部分内容没有受到任何影响。
- 这个行为会导致浏览器在展示数据时，同时展示原有数据和本次响应数据。
原理图：
局部刷新实例：
局部刷新特点：
- 在浏览器内部，发起请求，获取数据。
- 只改变页面中的部分内容，其余页面无需加载和渲染。
- 网络中数据传输量少，给用户的体验感好。
Ajax就是用来做局部刷新的，而局部刷新需要使用到异步请求对象。
2.异步请求对象
局部刷新需要创建一个对象，代替浏览器发起请求行为，同时代替浏览器接收响应数据，这个对象就叫做异步请求对象【XMLHttpRequest】
- 异步请求对象位于浏览器内存中
- 可以同时存在多个异步请求对象
- 异步请求对象用于在后台与服务器交换数据
全局刷新是同步行为，异步刷新是异步行为【浏览器数据没有全部更新】
XMLHttpRequest对象是在JavaScript中创建的，语法：
var xmlHttp = new XMLHttpRequest();
XMLHttpRequest对象作用：
- 在不重新加载页面的情况下更新网页
- 在页面已加载后向服务器请求数据
- 在页面已加载后向服务器接收数据
Ajax中的核心对象就是XMLHttpRequest。
3.AJAX介绍
AJAX：Asynchronous JavaScript And XML(异步的JavaScript和XML)
AJAX是一种混合使用现有技术，实现局部刷新的新方法，不是一种新的编程语言。
AJAX中使用的技术有：JavaScript、HTML、DOM、XML、CSS等，主要使用JavaScript和XML。
-
JavaScript作用：
- 负责创建异步对象
- 使用异步对象发送请求
- 更新页面的DOM对象
- 接收响应数据
-
XML作用：
-
发送和接收的数据格式，现在主要由JSON代替。
-
XML格式：
<数据> <数据1>商品1</数据1> <数据2>商品2</数据2> <数据3>商品3</数据3> </数据>
-
AJAX不单单需要前端的技术，同时也需要后端(服务器)的配合。服务器需要提供数据，数据是AJAX请求的响应结果。
4.AJAX异步实现步骤
4.1创建异步对象
var xmlHttp = new XMLHttpRequest();
4.2给异步对象绑定onreadystatechange事件
onreadystatechange事件：
- 由该事件处理异步对象发送请求、获取数据的过程。
- 通过这个事件，我们可以知道异步对象是发送请求还是获取数据。
- 通过这个事件，我们还可以知道这个异步对象发布请求、处理请求的各种状态。
当异步对象的readystate属性值发生改变时，就会触发这个事件。
这个事件需要指定一个函数，在函数中处理状态的变化。
如：
xmlHttp.onreadystatechange = function() {
//处理请求的状态变化
if(xmlHttp.readyState === 4) {
//处理服务端的数据，更新当前页面
}
}
异步对象的readyState属性：表示异步对象请求的状态变化。
有0到4五个属性值：
- 0：创建异步对象时。【new XMLHttpRequest()】
- 1：初始化异步对象时。【xmlHttp.open()】
- 2：异步对象发送请求时。【xmlHttp.send()】
- 3：从服务端拿到初始数据时。注意3是异步对象内部使用
- 4：异步对象将接收到的初始数据处理完毕时。开发人员负责处理此时的数据
- 在4时，开发人员的职责就是用处理完毕的数据更新当前页面
回调：当请求的状态变化时，异步对象会自动调用onreadystatechange事件对应的函数。
异步对象的status属性：表示网络请求状况【200、404、500】。
当status === 200时，才表示网络请求是成功的。
xmlHttp.onreadystatechange = function() {
//处理请求的状态变化
if(xmlHttp.readyState === 4 && status === 200) {
//处理服务端的数据，更新当前页面
}
}
4.3初始化异步请求对象
异步的方法：open()
xmlHttp.open("请求方式【get/post】","服务端的访问地址","异步【true】/同步【false】");//默认为true
如：
xmlHttp.open("get","loginServlet?name=zhagnsan&pwd=123",true);
4.4使用异步对象发送请求
xmlHttp.send();
4.5获取服务端返回的数据
使用异步对象的属性【responseText/responseXML】
例子：var date = xmlHttp.responseText;
xmlHttp.onreadystatechange = function() {
//处理请求的状态变化
if(xmlHttp.readyState === 4 && status === 200) {
//处理服务端的数据，更新当前页面
var date = xmlHttp.responseText;
document.getElementById("name").value = date;
}
}
5.AJAX实例----BMI指数
需求：计算某个用户的BMI指数。
用户在jsp中输入自己的身高、体重，servlet自动计算BMI指数，并显示BMI指数的计算结果和建议。
BMI指数：身体质量指数，是用体重(kg)来除以身高(m)的平方得出的数字，是目前国际上常用的衡量人体胖瘦程度以及是否健康的一个标准。
成人的BMI数值：
- 过轻：低于18.5
- 正常：18.5-23.9
- 过重：24-27
- 肥胖：28-32
- 非常肥胖：>32
5.1全局刷新实现计算BMI
5.1.1流程
-
新建一个网站MyWeb，
-
创建一个JSP文件【one.jsp】，通过表单提交用户信息
-
创建一个Servlet类【BmiServlet】，用于处理请求，然后转发调用result.jsp文件
-
创建一个JSP文件【result.jsp】，用于将处理结果写入响应体，发送给浏览器
-
浏览器接收响应数据，响应数据将浏览器原有数据替换
5.1.2编写表单提交信息页面
one.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>全局刷新计算BMI</title>
</head>
<body>
<center>
<h2>计算BMI</h2>
<form action="/MyWeb/bmi" method="get">
<table>
<tr>
<td>姓名:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>体重(kg):</td>
<td><input type="text" name="weight"></td>
</tr>
<tr>
<td>身高(m):</td>
<td><input type="text" name="height"></td>
</tr>
<tr>
<td><input type="submit" value="计算"></td>
<td><input type="reset" value="重置"></td>
</tr>
</table>
</form>
</center>
</body>
</html>
5.1.3编写Servlet处理请求
BmiServlet
package com.tsccg.controller;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @Author: TSCCG
* @Date: 2021/08/27 22:48
*/
public class BmiServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取请求头中的请求参数【姓名、身高、体重】
String name = request.getParameter("name");
float height = Float.parseFloat(request.getParameter("height"));
float weight = Float.parseFloat(request.getParameter("weight"));
//2.计算BMI指数，并判断身体状况
float bmi = weight/(height*height);
/*
1. 过轻：低于18.5
2. 正常：18.5-23.9
3. 过重：24-27
4. 肥胖：28-32
5. 非常肥胖：>32
*/
String msg = null;
if (bmi < 18.5) {
msg = ",比较受";
} else if (bmi >=18.5 && bmi <=23.9) {
msg = ",很正常";
} else if (bmi >= 24 && bmi <= 27) {
msg = ",比较胖";
} else {
msg = ",贼胖";
}
//3.将BMI指数与建议放入当前请求作用域对象
String result = "尊敬的用户" + name + ",您的BMI指数为：" + bmi + msg;
request.setAttribute("result",result);
//4.通过请求转发向Tomcat申请调用result.jsp，将BMI指数与建议写入响应体
request.getRequestDispatcher("/result.jsp").forward(request,response);
}
}
web.xml配置信息：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<servlet>
<servlet-name>BmiServlet</servlet-name>
<servlet-class>com.tsccg.controller.BmiServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>BmiServlet</servlet-name>
<url-pattern>/bmi</url-pattern>
</servlet-mapping>
</web-app>
5.1.4编写响应数据
result.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>计算结果</title>
<style type="text/css">
p {
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<center>
<p>${result}</p>
</center>
</body>
</html>
5.1.5测试
发布网站，开启Tomcat服务器，打开浏览器访问one.jsp文件
5.2局部刷新实现计算BMI
5.2.1流程
- 创建一个JSP文件【two.jsp】，通过【异步对象】发送请求，携带用户参数，申请访问BmiServlet
- 【BmiServlet】用于处理请求，然后转发调用result.jsp文件
- 【result.jsp】将处理结果写入响应体，发送回【异步对象】。
- 【two.jsp】中的【异步对象】接收响应数据，将接收到的响应数据写入当前页面中的一个div对象里，进行展示。
5.2.2编写异步对象提交并接收数据页面
two
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>局部刷新计算BMI</title>
<script type="text/javascript">
var doAjax = function() {
//1.创建异步对象
var xmlHttp = new XMLHttpRequest();
//2.绑定onreadystatechange事件
xmlHttp.onreadystatechange = function() {
// alert("readState:" + xmlHttp.readyState + ";status:" + xmlHttp.status)//【测试语句】显示readyState和status属性值变化
if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {//readyState:4;status:200
// alert(xmlHttp.responseText);//【测试语句】显示接收到的响应数据
//接收响应数据
var result = xmlHttp.responseText;
//更新DOM对象
document.getElementById("showResult").innerHTML = result;
}
}
//3.初始化异步对象
//获取参数对象value
var name = document.getElementById("name").value;
var height = document.getElementById("height").value;
var weight = document.getElementById("weight").value;
//拼接请求参数:name=张三&height=1.8&weight=100
var param = "name=" + name + "&height=" + height + "&weight=" + weight;
//初始化
xmlHttp.open("get","bmi?"+param,true);//readyState:1;status:0
//4.发送请求
xmlHttp.send();//readyState:2;status:200
}
</script>
</head>
<body>
<center>
<h2>计算BMI</h2>
<!-- 通过异步对象发送请求，不需要使用表单 -->
<table>
<tr>
<td>姓名:</td>
<td><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td>身高(m):</td>
<td><input type="text" name="height" id="height"></td>
</tr>
<tr>
<td>体重(kg):</td>
<td><input type="text" name="weight" id="weight"></td>
</tr>
<tr>
<td><input type="button" value="计算" onclick="doAjax()"></td>
</tr>
</table>
<!-- 展示响应数据 -->
<div id="showResult"></div>
</center>
</body>
</html>
5.2.3测试
