该博客主要介绍Ajax第四阶段学习内容，对比全局刷新和局部刷新，阐述Ajax借助异步对象完成局部刷新的原理与创建步骤。通过计算BMI的实例展示全局和局部刷新应用，还给出Ajax第二个例子，涉及数据库操作。此外，介绍JSON的使用，包括Jackson转换、页面创建及测试等。
思维导图
p1/30 Ajax第四阶段的学习内容介绍
p2/30 全局刷新和局部刷新以及两种刷新方式的对比
p3/30 异步对象【Ajax借助异步对象完成局部刷新】
p4/30 Ajax概念
p5/30 创建异步对象的步骤第一部分【创建异步对象】
p6/30 创建异步对象的步骤第二部分【readyState】
p7/30 创建异步对象的步骤第三部分
p8/30 全局刷新计算BMI创建页面【身体质量指数】
<html>
<head>
<title>全局刷新</title>
</head>
<body>
<p>全局刷新计算BMI</p>
<form action="" method="get">
姓名：<input type="text" name="name"><br>
体重（公斤）：<input type="text" name="weight"><br>
身高（米）：<input type="text" name="height"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
p9-10/30 全局刷新计算BMI创建tomcat【请求转发调用jsp文件显示信息】
package com.bjpowernode.controller;
import java.io.IOException;
import java.lang.reflect.Field;
/**
* @Author：马仲杰
* @Date 2021/6/1
**/
@javax.servlet.annotation.WebServlet(name = "BmiServlet")
public class BmiServlet extends javax.servlet.http.HttpServlet {
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
}
protected void doGet(javax.servlet.http.HttpServletRequest request,
javax.servlet.http.HttpServletResponse response)
throws javax.servlet.ServletException, IOException {
//1、接受请求参数
String strName = request.getParameter("name");
String weight = request.getParameter("weight");
String height = request.getParameter("height");
//2、计算BMI bmi = (weight/height)的平方
float w = Float.valueOf(weight);
float h = Float.valueOf(height);
float bmi = w/(h*h);
//3、判断BMI的范围
String msg = "";
if(bmi <= 18.5){
msg = "您比较瘦";
}else if (bmi > 18.5 && bmi <= 23.9) {
msg = "您的身体很正常";
}else if(bmi > 24 && bmi <= 27){
msg = "您的身体比较胖";
}else{
msg = "您很肥胖";
}
System.out.println("msg="+msg);
msg = "您好："+strName+"先生/女士，您的bmi值是："+bmi+","+msg;
//把数据写入request
request.setAttribute("msg",msg);
//请求转发
request.getRequestDispatcher("/result.jsp").forward(request,response);
}
}
<%--
Created by IntelliJ IDEA.
User: ZhongjieMa
Date: 2021/6/1
Time: 22:35
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>结果页面</title>
</head>
<body>
<p>显示bmi计算结果</p>
<h3>${msg}</h3>
</body>
</html>
p11/30 全局刷新计算BMI创建tomcat【通过PrintWriter显示信息】
其他内容不变，只是对这一部分进行改变
p12/30 局部刷新计算BMI创建tomcat【使用ajax】
p13/30 ajax计算bmi状态变化
p14/30 ajax计算bmi接受数据
p15/30 ajax获取数据更新dom
p16/30 ajax第二个例子创建库和表数据
直接将province和city的sql文件新建查询即可。
p17/30 ajax第二个例子创建页面
p18/30 ajax第二个例子创建网站
p19/30 ajax第二个例子dao访问数据库
dao中的查询方法：JDBC六步
package com.bjpowernode.dao;
import java.sql.*;
/**
* @Author：马仲杰
* @Date 2021/6/3
**/
public class ProvinceDao {
//1、根据id获取名称
public String queryProvinceNameById(Integer provinceId) {
//传统的JDBC六步
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
String sql = "";
String url = "jdbc:mysql://localhost:3306/bjpowernode";
String username = "root";
String password = "333";
String name = "";
try {
//注册驱动
Class.forName("com.mysql.jdbc.Driver");
//获取连接
conn = DriverManager.getConnection(url, username, password);
//注册数据库操作对象
sql = "select name from province where id=?";
ps = conn.prepareStatement(sql);
//设置参数值
ps.setInt(1, provinceId);
//执行sql语句
rs = ps.executeQuery();
//查询结果集
while (rs.next()){//当rs中有多余1条数据时使用此方式遍历
name = rs.getString("name");
}
} catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
} finally {
//释放资源
try {
if (rs != null) rs.close();
if (ps != null) ps.close();
if (conn != null) conn.close();
} catch (Exception e) {
e.printStackTrace();
}
}
return name;
}
}
p20/30 ajax第二个例子创建servlet
package com.bjpowernode.controller;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* @Author：马仲杰
* @Date 2021/6/3
**/
@WebServlet(name = "QueryProvinceServlet")
public class QueryProvinceServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("连接成功了");
//使用HttpServletResponse输出数据
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println("中国");
out.flush();
out.close();
}
}
P21/30 ajax第二个例子调试程序
<%--
Created by IntelliJ IDEA.
User: ZhongjieMa
Date: 2021/6/1
Time: 22:11
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Ajax根据省份id获取名称</title>
<script type="text/javascript">
function search(){
//发起ajax请求,传递参数给服务器，服务器返回数据
//1、创建异步对象
var xmlHttp = new XMLHttpRequest();
//2、绑定事件
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
alert(xmlHttp.responseText);
}
// var data = xmlHttp.responseText;
// document.getElementById("proname").innerText = data;
}
//3、初始化异步对象
//接受请求参数
// var proid = document.getElementById("proid").value;
// var param = "proid="+proid;
xmlHttp.open("get","query",true);
//4、发起请求
xmlHttp.send();
}
</script>
</head>
<body>
<p>Ajax根据省份id获取名称</p>
<table>
<tr>
<td>省份编号：</td>
<td><input type="text" id="proid">
<input type="button" value="搜索" onclick="search()">
</td>
</tr>
<tr>
<td>省份名称：</td>
<td><input type="text" id="proname">
</td>
</tr>
</table>
</body>
</html>
P22/30 json介绍【返回的数据是多个的时候，需要使用JSON】
P23/30jackson使用【把java对象转换为json格式】
P24/30 创建使用json的页面
<%--
Created by IntelliJ IDEA.
User: ZhongjieMa
Date: 2021/6/4
Time: 12:02
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>使用json格式的数据</title>
<script type="text/javascript">
function search(){
//发起ajax请求,传递参数给服务器，服务器返回数据
//1、创建异步对象
var xmlHttp = new XMLHttpRequest();
//2、绑定事件
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
// alert(xmlHttp.responseText);
// 更新dom对象
document.getElementById("proname").value = xmlHttp.responseText;
}
}
//3、初始化异步对象
//接受请求参数
var proid = document.getElementById("proid").value;
xmlHttp.open("get","query?proid="+proid,true);
//4、发起请求
xmlHttp.send();
}
</script>
</head>
<body>
<p>ajax请求使用json格式的数据</p>
<table border="2px">
<tr>
<td>省份编号：</td>
<td><input type="text" id="proid">
<input type="button" value="搜索" onclick="doearch()">
</td>
</tr>
<tr>
<td>省份名称：</td>
<td><input type="text" id="proname"></td>
</tr>
<tr>
<td>省份简称：</td>
<td><input type="text" id="projiancheng"></td>
</tr>
<tr>
<td>省会：</td>
<td><input type="text" id="proshenghui"></td>
</tr>
</table>
</body>
</html>
P25/30 创建使用json的dao中的方法
package com.bjpowernode.dao;
import com.bjpowernode.entity.Province;
import java.sql.*;
/**
* @Author：马仲杰
* @Date 2021/6/3
**/
public class ProvinceDao {
//1、根据id获取名称
public String queryProvinceNameById(Integer provinceId) {
//传统的JDBC六步
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
String sql = "";
String url = "jdbc:mysql://localhost:3306/bjpowernode";
String username = "root";
String password = "333";
String name = "";
try {
//注册驱动
Class.forName("com.mysql.jdbc.Driver");
//获取连接
conn = DriverManager.getConnection(url, username, password);
//注册数据库操作对象
sql = "select name from province where id=?";
ps = conn.prepareStatement(sql);
//设置参数值
ps.setInt(1, provinceId);
//执行sql语句
rs = ps.executeQuery();
//查询结果集
while (rs.next()){//当rs中有多余1条数据时使用此方式遍历
name = rs.getString("name");
}
} catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
} finally {
//释放资源
try {
if (rs != null) rs.close();
if (ps != null) ps.close();
if (conn != null) conn.close();
} catch (Exception e) {
e.printStackTrace();
}
}
return name;
}
//1、根据id获取一个完整的Province对象
public Province queryProvinceById(Integer provinceId) {
//传统的JDBC六步
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
String sql = "";
String url = "jdbc:mysql://localhost:3306/bjpowernode";
String username = "root";
String password = "333";
Province province = null;
try {
//注册驱动
Class.forName("com.mysql.jdbc.Driver");
//获取连接
conn = DriverManager.getConnection(url, username, password);
//注册数据库操作对象
sql = "select id,name,jiancheng,shenghui from province where id=?";
ps = conn.prepareStatement(sql);
//设置参数值
ps.setInt(1, provinceId);
//执行sql语句
rs = ps.executeQuery();
//查询结果集
while (rs.next()){//当rs中有多余1条数据时使用此方式遍历
province = new Province();
province.setId(rs.getInt("id"));
province.setName(rs.getString("name"));
province.setJiancheng(rs.getString("jiancheng"));
province.setShenghui(rs.getString("shenghui"));
}
} catch (ClassNotFoundException | SQLException e) {
e.printStackTrace();
} finally {
//释放资源
try {
if (rs != null) rs.close();
if (ps != null) ps.close();
if (conn != null) conn.close();
} catch (Exception e) {
e.printStackTrace();
}
}
return province;
}
}
P26/30 创建使用json的Servlet
注意下面的json对象要给一个默认值：“{}”
下面的contentType是application/json
package com.bjpowernode.controller;
import com.bjpowernode.dao.ProvinceDao;
import com.bjpowernode.entity.Province;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* @Author：马仲杰
* @Date 2021/6/4
**/
@WebServlet(name = "QueryJsonServlet")
public class QueryJsonServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//给json一个默认值
String json = "{}";
//获取请求参数，省份id
String provinceId = request.getParameter("proid");
if (provinceId != null && provinceId.trim().length() > 0){
ProvinceDao provinceDao = new ProvinceDao();
Province province = provinceDao.queryProvinceById(Integer.valueOf(provinceId));
//使用jackson将Province对象转为json
ObjectMapper om = new ObjectMapper();
json = om.writeValueAsString(province);
}
//把获取的json数据，通过网络传输给ajax中的异步对象。
//注意，返回的数据就不是text/html了。是json
response.setContentType("application/json;charset=utf-8");
//使用HttpServletResponse输出数据
PrintWriter out = response.getWriter();
out.println(json);//输出的数据会赋值给ajax中的responseText属性
out.flush();
out.close();
}
}
P27/30 测试json格式数据
P28/30 配置idea主题
P29/30 js中转换json对象
P30/30 同步和异步
上面的true表示异步
扫一扫
533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
