AJAX
文章目录
1.全局刷新和局部刷新
- 全局刷新： 整个浏览器被新的数据覆盖。 在网络中传输大量的数据。 浏览器需要加载，渲染页 面。
- 局部刷新： 在浏览器器的内部，发起请求，获取数据，改变页面中的部分内容。
其余的页面无需加载和渲染。 网络中数据传输量少， 给用户的感受好。 - ajax是用来做局部刷新的。局部刷新使用的核心对象是 异步对象（XMLHttpRequest）
这个异步对象是存在浏览器内存中的 ，使用javascript语法创建和使用XMLHttpRequest对象。
2.ajax:Asynchronous JavaScript and XML
（异步的 JavaScript 和 XML）
Asynchronous: 异步的意思
JavaScript：javascript脚本，在浏览器中执行
and : 和
xml : 是一种数据格式
-
ajax：是一种做局部刷新的新方法（2003左右），不是一种语言。 ajax包含的技术主要
有javascript,dom,css, xml等等。 核心是javascript 和 xml 。
-
javascript：负责创建异步对象,发送请求， 更新页面的dom对象。 ajax请求需要服务器端的数 据。
-
xml： 网络中的传输的数据格式。 使用json替换了xml 。
<数据>
<数据1>宝马1</数据1>
<数据2>宝马2</数据2>
<数据3>宝马3</数据3>
<数据4>宝马4</数据4>
</数据>
3.ajax中使用XMLHttpRequest对象
-
1）创建异步对象 var xmlHttp = new XMLHttpRequest();
-
2）给异步对象绑定事件。onreadystatechange ：当异步对象发起请求，获取了数据都会
触发这个事件。
这个事件需要指定一个函数， 在函数中处理状态的变化。btn.onclick = fun1() function fun1(){ alert("按钮单击"); } 例如： xmlHttp.onreadystatechange= function(){ 处理请求的状态变化。 if(xmlHttp.readyState == 4 && xmlHttp.status== 200 ){ //可以处理服务器端的数据，更新当前页面 var data = xmlHttp.responseText; document.getElementById("name").value= data; } }
-
异步对象的属性 readyState 表示异步对象请求的状态变化
- 0：创建异步对象时， new XMLHttpRequest();
- 1: 初始异步请求对象， xmlHttp.open()
- 2：发送请求， xmlHttp.send()
- 3: 从服务器端获取了数据，此时3， 注意3是异步对象内部使用， 获取了原始的数据。
- 4：异步对象把接收的数据处理完成后。 此时开发人员在4的时候处理数据。
在4的时候，开发人员做什么 ？ 更新当前页面。
-
异步对象的status属性，表示网络请求的状况的， 200， 404， 500， 需要是当status==200
时，表示网络请求是成功的。 -
- 初始异步请求对象
异步的方法open().
xmlHttp.open(请求方式get|post, “服务器端的访问地址”, 同步|异步请求（默认是true，异步请求）)
例如：
xmlHttp.open(“get”, “loginServlet?name=zs&pwd=123”,true);
- 初始异步请求对象
-
4)使用异步对象发送请求
xmlHttp.send()获取服务器端返回的数据， 使用异步对象的属性 responseText .
使用例子：xmlHttp.responseText回调：当请求的状态变化时，异步对象会自动调用onreadystatechange事件对应的函数。
访问地址： 使用get方式传递参数
http://localhost:8080/course_myajax/bmiPrint?name=李四&w=82&h=1.8
Ajax的请求方式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TnDE6JCK-1621748826484)(笔记图片\ajax请求处理方式.png)]
4.json使用
-
ajax发起请求-------servlet
（返回的一个json格式的字符串 { name:"jiancheng:“冀”,“shenghui”:“石家庄”}）
-
json分类：
-
- json对象 ，JSONObject ,这种对象的格式 名称:值， 也可以看做是 key:value 格式。
-
- json数组， JSONArray, 基本格式 [{ name:“河北”, jiancheng:“冀”,“shenghui”:“石家庄”} , { name:“山西”, jiancheng:“晋”,“shenghui”:“太原”} ]
-
-
为什么要使用json ：
- json格式好理解
- json格式数据在多种语言中，比较容易处理。 使用java， javascript读写json格式的数据比较容易。
- json格式数据他占用的空间下，在网络中传输快， 用户的体验好。
处理json的工具库： gson（google）； fastjson（阿里），jackson， json-lib
在js中的，可以把json格式的字符串，转为json对象， json中的key，
就是json对象的属性名。
jackson json的使用方式
//使用jsckson 把 obj 转为json格式
ObjectMapper om = new ObjectMapper();
//writeValueAsString()：将参数的java对象转为json格式字符串
String json = om.writeValueAsString(obj);
javaScript中使用json数据的办法
var data = xmlHttp.responseText;
//eval是执行括号中的代码， 把json字符串转为json对象
// var jsonobj = eval("(" + data + ")");
var jsonobj = JSON.parse(data);
5.同步与异步
xmlHttp.open(“get”, “queryjson?” + str, true);
-
true:异步处理请求。使用异步对象发起请求后，不用等待数据处理完毕，就可以执行其他操作。
-
flase:同步处理请求。异步对象必须处理完请求，从服务器端获取数据后，才能执行send之
后的代码
6.项目实例：
根据省份id查询省份信息
SQL文件：
/*
Navicat Premium Data Transfer
Source Server : MySQL80
Source Server Type : MySQL
Source Server Version : 80022
Source Host : localhost:3306
Source Schema : kaoshixitong
Target Server Type : MySQL
Target Server Version : 80022
File Encoding : 65001
Date: 22/05/2021 16:56:38
*/
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for province
-- ----------------------------
DROP TABLE IF EXISTS `province`;
CREATE TABLE `province` (
`id` int NOT NULL AUTO_INCREMENT,
`name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '省份名称',
`jiancheng` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '简称',
`shenghui` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 10 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;
-- ----------------------------
-- Records of province
-- ----------------------------
INSERT INTO `province` VALUES (1, '河北', '冀', '石家庄');
INSERT INTO `province` VALUES (2, '山西', '晋', '太原市');
INSERT INTO `province` VALUES (3, '内蒙古', '蒙', '呼和浩特市 ');
INSERT INTO `province` VALUES (4, '辽宁', '辽', '沈阳');
INSERT INTO `province` VALUES (5, '江苏', '苏', '南京');
INSERT INTO `province` VALUES (6, '浙江', '浙', '杭州');
INSERT INTO `province` VALUES (7, '安徽', '皖', '合肥');
INSERT INTO `province` VALUES (8, '福建', '闽', '福州');
INSERT INTO `province` VALUES (9, '江西', '赣', '南昌');
SET FOREIGN_KEY_CHECKS = 1;
index.jsp
<%--
Created by IntelliJ IDEA.
User: asus
Name: 吕昊
Number: 20180508145
Date: 2021/5/22
Time: 21:36
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) {
var data = xmlHttp.responseText;
//eval是执行括号中的代码， 把json字符串转为json对象
// var jsonobj = eval("(" + data + ")");
var jsonobj = JSON.parse(data);
//更新dom对象
callback(jsonobj);
}
}
//3、初始化异步对象
//拼接字符串
str = "proid=" + document.getElementById("proid").value;
xmlHttp.open("get", "queryjson?" + str, true);
//4、发送请求
xmlHttp.send();
}
//定义函数，处理服务器端返回的数据
function callback(json) {
document.getElementById("proname").value = json.name;
document.getElementById("jiancheng").value = json.jiancheng;
document.getElementById("shenghui").value = json.shenghui;
}
</script>
</head>
<body>
<center>
<table border="2">
<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>
<tr>
<td>省份简称</td>
<td><input type="text" id="jiancheng"></td>
</tr>
<tr>
<td>省会</td>
<td><input type="text" id="shenghui"></td>
</tr>
</table>
</center>
</body>
</html>
实体类Province
package com.entity;
/**
* Created by IntelliJ IDEA.
* User: LvHaoIT (asus)
* Date: 2021/5/22
* Time: 21:44
*/
public class Province {
private Integer id;
private String name;
private String jiancheng;
private String shenghui;
public Province() {
}
public Province(Integer id, String name, String jiancheng, String shenghui) {
this.id = id;
this.name = name;
this.jiancheng = jiancheng;
this.shenghui = shenghui;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getJiancheng() {
return jiancheng;
}
public void setJiancheng(String jiancheng) {
this.jiancheng = jiancheng;
}
public String getShenghui() {
return shenghui;
}
public void setShenghui(String shenghui) {
this.shenghui = shenghui;
}
}
ProvinceDao
package com.dao;
import com.entity.Province;
import com.util.JdbcUtil;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
/**
* Created by IntelliJ IDEA.
* User: LvHaoIT (asus)
* Date: 2021/5/22
* Time: 19:14
*/
public class ProvinceDao {
private JdbcUtil util = new JdbcUtil();
public String queryProvinceNameById(Integer provinceId) {
String name = null;
String sql = "select name from province where id=?";
PreparedStatement ps = util.createStatement(sql);
ResultSet rs = null;
try {
ps.setInt(1, provinceId);
rs = ps.executeQuery();
if (rs.next()) {
name = rs.getString("name");
}
} catch (SQLException throwables) {
throwables.printStackTrace();
} finally {
util.close(rs);
util.close();
}
return name;
}
public Province queryProvinceById(Integer provinceId) {
Province prov = null;
String sql = "select * from province where id=?";
PreparedStatement ps = util.createStatement(sql);
ResultSet rs = null;
try {
ps.setInt(1, provinceId);
rs = ps.executeQuery();
if (rs.next()) {
String name = rs.getString("name");
String jiancheng = rs.getString("jiancheng");
String shenghui = rs.getString("shenghui");
prov = new Province(provinceId, name, jiancheng, shenghui);
}
} catch (SQLException throwables) {
throwables.printStackTrace();
} finally {
util.close(rs);
util.close();
}
return prov;
}
}
QueryJsonServlet
package com.controller;
import com.dao.ProvinceDao;
import com.entity.Province;
import com.util.ReflectUitl;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* Created by IntelliJ IDEA.
* User: LvHaoIT (asus)
* Date: 2021/5/22
* Time: 21:43
*/
public class QueryJsonServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String strproid = request.getParameter("proid");
Integer proid = null;
Province prov = null;
String json = "{}";
if (strproid != null && !"".equals(strproid.trim())) {
proid = Integer.valueOf(strproid);//获取id值
prov = new ProvinceDao().queryProvinceById(proid); //执行sql 返回name
json = ReflectUitl.jsonObject(prov);
}
System.out.println("4:" + json);
response.setContentType("application/json;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(json);//可以将值传递给ajax中的responseText属性
}
}
工具类 jdbcUtil（封装jdbc基本操作）与ReflectUitl(利用反射转换高级类的json格式)
package com.util;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import java.sql.*;
import java.util.Map;
public class JdbcUtil {
private Connection conn = null;
private PreparedStatement ps = null;
static {
try {
//注册驱动
Class.forName("com.mysql.cj.jdbc.Driver");
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
public void close(HttpServletRequest request) {
try {
if (ps != null)
ps.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
ServletContext application = request.getServletContext();//获得全局
Map map = (Map) application.getAttribute("key1");
map.put(conn, true);//表明又可以使用了
}
//------------------重载close方法----------------------end
//封装conn对象创建
public Connection createCon() {
try {
conn = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/kaoshixitong?serverTimezone=UTC", "root", "lh051920");
System.out.println("conn对象创建成功！");
} catch (SQLException throwables) {
throwables.printStackTrace();
System.out.println("conn对象创建失败！");
}
return conn;
}
//封装PreparedStatement对象
public PreparedStatement createStatement(String sql) {
conn = createCon();
try {
ps = conn.prepareStatement(sql);
} catch (SQLException throwables) {
throwables.printStackTrace();
}
return ps;
}
//封装销毁
public void close(ResultSet rs) {
try {
if (rs != null)
rs.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
public void close() {
try {
if (ps != null)
ps.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
try {
if (conn != null)
conn.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
}
package com.util;
import java.lang.reflect.Field;
/**
* Created by IntelliJ IDEA.
* User: LvHaoIT (asus)
* Date: 2021/5/23
* Time: 1:17
*/
public class ReflectUitl {
/**
* 将任意类型对象内容转换为JSON格式字符串返回
*
* @param obj
* @return
*/
public static String jsonObject(Object obj) {
Class classFile = null;
Field fieldArray[] = null;
StringBuffer json = new StringBuffer("{");
//field用来存放类的属性，功能有获取当前对象的成员变量的类型，
// 对成员变量重新设值
//1.获得当前对象的class文件
classFile = obj.getClass();
//2.获得class文件的所有属性
fieldArray = classFile.getDeclaredFields();
//3.获得当前对象所有属性的值
for (int i = 0; i < fieldArray.length; i++) {
Field field = fieldArray[i];
/**
* getName() ： 获取属性的名字
*
* get(Object obj) 返回指定对象obj上此 Field 表示的字段的值
*
* set(Object obj, Object value) 将指定对象变量上此 Field 对象表示的字段设置为指定的新值
*/
field.setAccessible(true);//确保私有属性可以访问使用
String fieldName = field.getName();
try {
Object value = field.get(obj);//将其值返回
//4.将获得的字符串及其值凭借为json格式字符串
//将属性名和属性值进行字符串拼接
json.append("\"");
json.append(fieldName);
json.append("\":");
json.append("\"");
json.append(value);
json.append("\"");
} catch (IllegalAccessException e) {
e.printStackTrace();
}
if ((i + 1) < fieldArray.length)
json.append(",");
}
json.append("}");
return json.toString();
}
}
思维导图
5480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
