Java Web：理解，视频笔记，AJAX作业代码，xhr，表格拼接，JSON,异步对象【诗书画唱】
有时要擅长用，善用搜索引擎，问老师之类的人和有用信息，解惑信息，解决问题的信息，个人理解，个人思考等的记录，这会是很好的学习方法——诗书画唱
个人对JSON的格式的总结：[{自己定义的对象1的属性名1：自己写的对应的属性值1，自己定义的对象1的属性名2：自己写的对应的属性值2，......},{自己定义的对象2的属性名1：自己写的对应的属性值1，自己定义的对象2的属性名2：自己写的对应的属性值2，......},......]
个人的理解：每个{}的部分有时就是可以视为一个完整的对象，因为有时包含完整的对象的所有属性名和属性值。
个人理解：先执行html，后执行js，再执行servlet，再执行js（回调函数）。
个人对上图的理解：是把数据放到了response中之后用responseText获取。
个人对上图的理解：将JSON字符串转换成了数组。
个人对异步对象的理解：前一个任务执行没完毕，也会执行后一个任务的对象。
异步就是有类似于“就近原则”一样的规则，哪个更好执行就先执行哪个，比同步这种只会从上到下执行，而且上一个没执行完就不会执行下一个，若一直没执行成功就会一直死耗着，卡在那里的“死脑筋”更灵活。
个人对conf的理解：config的缩写，配置，类似于一些如果不用而用别的就会不得不用上很多有重复内容的别的内容，如果用就是只要用一次的原来会重复内容，有格式，模板式的内容等等。
个人对上图的理解：是在调用封装的函数
在商品表中插入一些数据。
使用ajax技术实现打开list.jsp页面，能够显示商品表中所有商品信息的功能。
create table Sp(
id int primary key auto_increment,
name varchar(100) ,
price Double,
type varchar(100)
);
--select * from Sp
insert into Sp(
name ,
price ,
type ) values
("诗书画唱手机1",66663,"诗书画唱牌1"),
("诗书画唱手机2",66664,"诗书画唱牌2"),
("诗书画唱手机3",66665,"诗书画唱牌3");
如果servlet中用的时JSON的字符串的拼接，那么在jsp中写的AJAX的部分要转换成数组后再用拼接等，这样才可以拼接成表格的字符串，之后除了下拉框（用innerHTML会有兼容性的问题），都可以用innerHTML。用innerText等的话就单纯是字符串，是不行的。当然除了下拉框，其实在servlet中拼接成表格等自己想要的字符串就会更简单。
（1）、用拼接HTML代码的方法
package com.SSHC.bean;
public class Sp {
private Integer id;
private String name;
private Double price;
private String type;
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 Double getPrice() {
return price;
}
public void setPrice(Double price) {
this.price = price;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
}
package com.SSHC.controller;
import java.io.IOException;
import java.util.List;
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 com.SSHC.bean.Sp;
import com.SSHC.dao.SpDao;
/**
* Servlet implementation class ListServlet
*/
@WebServlet("/ListServlet")
public class ListServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ListServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
SpDao ud = new SpDao();
List<Object> list;
try {
list = ud.selectAll(Sp.class,null);
/*StringBuilder jsonString = new StringBuilder("[");
String dot = "";
for(Object o : list) {
Sp sp = (Sp)o;
jsonString.append(dot);
jsonString.append("{\"id\":");
jsonString.append(sp.getId());
jsonString.append(",\"name\":\"");
jsonString.append(sp.getName());
jsonString.append(",\"price\":\"");
jsonString.append(sp.getPrice());
jsonString.append(",\"type\":\"");
jsonString.append(sp.getType());
jsonString.append("\"}");
dot = ",";
}
jsonString.append("]");
System.out.println(jsonString);*/
StringBuilder html=new StringBuilder ();
html.append("<table border='1'><tr><td>id</td><td>name</td><td>price"
+ "</td><td>type</td></tr>");
for (Object o : list) {
Sp p = (Sp)o;
html.append("<tr><td>"+p.getId()+"</td><td>"+p.getName()+"</td><td>"+p.getPrice()
+ "</td><td>"+p.getType()+"</td></tr>");
}
html.append("</table>");
response.setCharacterEncoding("UTF-8");
//将数据传送到回调函数中
response.getWriter().write(html.toString());
//response.getWriter().write(jsonString.toString());
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
package com.SSHC.dao;
import java.lang.reflect.Field;
import java.lang.reflect.Method;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Timestamp;
import java.util.ArrayList;
import java.util.List;
import com.SSHC.util.DbUtil;
//万能Dao
//T不是一个具体的java类，他是一个泛型参数
public class BaseDao<T> {
public<T> List<T>selectAll(Class cls,String SQL) throws Exception{
Connection conn = null;
PreparedStatement pstm = null;
ResultSet rs = null;
List<T>list = new ArrayList<T>();
//通过反射技术获取表的名字，表的名字刚好和bean的名字一样
//获取类的类名
String tableName = cls.getSimpleName();
String sql=null;
if(SQL==null){
sql = "select * from " + tableName;}
else if(SQL!=null){
sql = "select * from " + tableName
+SQL;}
System.out.println(sql);
conn = DbUtil.getConn();
pstm = conn.prepareStatement(sql);
rs = pstm.executeQuery();
//获取bean中的所有属性名
Field []fs = cls.getDeclaredFields();
while(rs.next()) {
//通过反射创建出cls对象的实例
Object obj = cls.newInstance();
for(int i = 0;i < fs.length;i ++) {
//bean中的属性名
String fname = fs[i].getName();
//获取bean中的属性的类型
Class type = fs[i].getType();
Object o = rs.getObject(fname);
//System.out.println(o);
//将属性对应的set方法名拼接出来
//取出属性名的首字母,将它变成大写
String methodName = "set"
+ fname.substring(0,1).toUpperCase()
+ fname.substring(1);
//System.out.println(methodName);
//通过反射调用set方法
Method m = cls.getDeclaredMethod(methodName, type);
System.out.println(m);
m.invoke(obj, o);
}
list.add((T)obj);
}
return list;
}
public static Integer countAdd;
public Integer add(T t) throws Exception{
Connection conn = null;
PreparedStatement pstm = null;
Integer count = -1;
String tableName = t.getClass().getSimpleName();
//System.out.println(tableName);
StringBuilder sql = new StringBuilder("insert into "
+ tableName + " (");
//取出t对象中的所有的属性名
Field []fs = t.getClass().getDeclaredFields();
String dot = "";
for(int i = 0;i < fs.length;i ++) {
sql.append(dot);
String fname = fs[i].getName();
sql.append(fname);
dot = ",";
}
sql.append(")values(");
String dot1 = "";
for(int i = 0;i < fs.length;i ++) {
sql.append(dot1);
sql.append("?");
dot1 = ",";
}
sql.append(")");
//System.out.println(sql);
conn = DbUtil.getConn();
pstm = conn.prepareStatement(sql.toString());
//调用t对象中所有的get方法
for(int i = 0;i < fs.length;i ++) {
//取出属性名
String fname = fs[i].getName();
//拼接get方法
String methodName = "get"
+ fname.substring(0,1).toUpperCase()
+ fname.substring(1);
//取出需要调用的方法
Method m = t.getClass().getDeclaredMethod(methodName);
//反射调用get方法
Object val = m.invoke(t);
System.out.println("新增的数据是：" + val);
//设置占位符
pstm.setObject(i + 1, val);
}
count = pstm.executeUpdate();
countAdd=count;
System.out.println(countAdd);
return count;
}
public static Integer countUpdate;
public Integer update(T t,String SQL) throws Exception{
System.out.println("这时传过来的SQL为："+SQL);
Connection conn = null;
PreparedStatement pstm = null;
Integer count = -1;
StringBuilder sql = new StringBuilder("update ");
//获取表名，就是获取t对象的类名
Class cls = t.getClass();
String tableName = cls.getSimpleName();
sql.append(tableName + " set ");
//获取t对象的所有属性名
Field[]fs = cls.getDeclaredFields();
//每个javabean的第一个属性必须是id
//下标是从1开始的，也就是排除了id属性
String dot = "";
//定义一个List存放所有的修改的值
List<Object>params = new ArrayList<Object>();
for(int i = 0;i < fs.length;i ++) {
Field f = fs[i];
//获取属性名
String fname = f.getName();
System.out.println("下标为"+i+"的属性名："+fname);
//调用getXXX方法来获取t中的属性值
String methodName = "get"
+ fname.substring(0,1).toUpperCase()
+ fname.substring(1);
System.out.println(methodName);
//通过反射获取方法对象
Method m = cls.getDeclaredMethod(methodName);
//反射调用getXXX方法
Object obj = m.invoke(t);
//当获取到的值不为空时，才能进行修改
if(obj != null) {
sql.append(dot);
sql.append(fname + " = ? ");
dot = ",";
params.add(obj);
}
}
//将id也放到params容器中去
// Method m1 = cls.getDeclaredMethod("getId");
Method m1 = cls.getDeclaredMethod(
"get"
+fs[0].getName().substring(0,1)
.toUpperCase()
+ fs[0].getName().substring(1));
Object id = m1.invoke(t);
params.add(id);
//拼接where条件
fs[0].getName();
System.out.println("这个表的第一列的列名"
+ "(一般都为编号名)为："+fs[0].getName());
// sql.append("where id = ? ");
if(SQL==null){
sql.append("where "+fs[0].getName()+" = ? ");}
System.out.println(sql);
conn = DbUtil.getConn();
System.out.println("SQL:"+SQL);
if(SQL!=null){
sql.append(SQL);
}
System.out.println("这时执行的修改语句为："+sql);
pstm = conn.prepareStatement(sql.toString());
//设置占位符的值
if(SQL==null){
for(int i = 0;i < params.size();i ++) {
pstm.setObject(i + 1, params.get(i));
}}
if(SQL!=null){
pstm.setObject(1, "已支付");
}
System.out.println("这时执行的修改语句为："+sql);
count = pstm.executeUpdate();
countUpdate=count;
return count;
}
// public Integer delete(Integer id){
// return 0;
// }
//万能Dao删除方法
public static Integer countDelete;
public Integer delete(Integer id,Class cls)
throws Exception{
Connection conn = null;
PreparedStatement pstm = null;
Integer count = -1;
String tableName = cls.getSimpleName();
Field[]fs = cls.getDeclaredFields();
for(int i = 0;i < fs.length;i ++) {
Field f = fs[i];
//获取属性名:fs[i].getName();
String fname = f.getName();
System.out.println("下标为"+i+"的属性名："+fname);
//调用getXXX方法来获取t中的属性值
String methodName = "get"
+ fname.substring(0,1).toUpperCase()
+ fname.substring(1);
System.out.println(methodName);
//通过反射获取方法对象
Method m = cls.getDeclaredMethod(methodName);
//反射调用getXXX方法
//当获取到的值不为空时，才能进行修改
}
// String sql = "delete from " + tableName
// + " where id = ?";
String sql = "delete from " + tableName
+ " where "+fs[0].getName()+" = ?";
conn = DbUtil.getConn();
pstm = conn.prepareStatement(sql);
pstm.setInt(1, id);
count = pstm.executeUpdate();
countDelete=count;
return count;
}
public static void main(String[] args) throws Exception {
}
}
package com.SSHC.dao;
import com.SSHC.bean.Sp;
public class SpDao extends BaseDao<Sp> {}
package com.SSHC.util;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.Properties;
public class DbUtil {
private static String driverName;
private static String url;
private static String user;
private static String pwd;
static {
//读取properties文件
Properties prop = new Properties();
//将db.properties文件读取到内存中去
InputStream is = DbUtil.class.getClassLoader()
.getResourceAsStream("db.properties");
//加载内容
try {
prop.load(is);
//读取内容
driverName = prop.getProperty("dn");
url = prop.getProperty("url");
user = prop.getProperty("un");
pwd = prop.getProperty("up");
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
//获取数据库连接对象的方法
public static Connection getConn(){
Connection conn = null;
try {
Class.forName(driverName);
conn = DriverManager.getConnection(url,user,pwd);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return conn;
}
public static void close(ResultSet rs,PreparedStatement pstm
,Connection conn){
try {
if(rs != null) {
rs.close();
}
if(pstm != null) {
pstm.close();
}
if(conn != null) {
conn.close();
}
} catch(Exception e) {
e.printStackTrace();
}
}
}
dn=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/firstjsp?useUnicode=true&characterEncoding=UTF-8
un=root
up=root
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
//页面中的所有的Html标签都被解析出来以后，就会运行下面的函数
window.onload = function(){
//获取省份下拉框
var table = document.getElementById('table');
//获取省份下拉框中的数据（我现在执行了）
//从js代码跳转到java代码怎么实现呢？ajax
var xhr = createXhr();
if(xhr) {
//设置提交方式是POST提交和执行的servlet的url路径
xhr.open('POST','ListServlet');
//设置ajax请求头
xhr.setRequestHeader("content-type",
"application/x-www-form-urlencoded");
//设置回调函数
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){
table.innerHTML = xhr.responseText;
}
}
//提交ajax请求
xhr.send('pid=0');
}
}
//将创建XMLHttpRequest对象的方法封装起来
function createXhr(){
var xhr = null;
if(window.XMLHttpRequest) {
//判断window对象中是否有XMLHttpRequest属性
xhr = new XMLHttpRequest();
} else {
//如果没有XMLHttpRequest属性，就使用ActiveXObject创建
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
</script>
<body>
<div id='table'></div>
</body>
</html>
（2）、用拼接JSON字符串的方法
其余的不变，就是servlet和jsp，Ajax等的部分变了：
package com.SSHC.controller;
import java.io.IOException;
import java.util.List;
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 com.SSHC.bean.Sp;
import com.SSHC.dao.SpDao;
/**
* Servlet implementation class ListServlet
*/
@WebServlet("/ListServlet")
public class ListServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ListServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request,
* HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request,
* HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
SpDao ud = new SpDao();
List<Object> list;
try {
list = ud.selectAll(Sp.class,null);
StringBuilder jsonString = new StringBuilder("[");
String dot = "";
for(Object o : list) {
Sp sp = (Sp)o;
jsonString.append(dot);
jsonString.append("{\"id\":");
jsonString.append(sp.getId());
jsonString.append(",\"name\":\"");
jsonString.append(sp.getName());
jsonString.append("\",\"price\":");
jsonString.append(sp.getPrice());
jsonString.append(",\"type\":\"");
jsonString.append(sp.getType());
jsonString.append("\"}");
dot = ",";
}
jsonString.append("]");
System.out.println(jsonString);
/*StringBuilder html=new StringBuilder ();
html.append("<table border='1'><tr><td>id</td><td>name</td><td>price"
+ "</td><td>type</td></tr>");
for (Object o : list) {
Sp p = (Sp)o;
html.append("<tr><td>"+p.getId()+"</td><td>"+p.getName()+"</td><td>"
+p.getPrice()
+ "</td><td>"+p.getType()+"</td></tr>");
}
html.append("</table>");*/
response.setCharacterEncoding("UTF-8");
//将数据传送到回调函数中
//response.getWriter().write(html.toString());
response.getWriter().write(jsonString.toString());
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
<%@ page language="java" contentType="text/html;
charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional
//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
//页面中的所有的Html标签都被解析出来以后，就会运行下面的函数
window.onload = function(){
//获取省份下拉框
var table = document.getElementById('table');
//获取省份下拉框中的数据（我现在执行了）
//从js代码跳转到java代码怎么实现呢？ajax
var xhr = createXhr();
if(xhr) {
//设置提交方式是POST提交和执行的servlet的url路径
xhr.open('POST','ListServlet');
//设置ajax请求头
xhr.setRequestHeader("content-type",
"application/x-www-form-urlencoded");
//设置回调函数
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){
var arr = JSON.parse(xhr.responseText);
var xhr2="<table border='1'><tr><td>id</td><td>name</td><td>price"
+ "</td><td>type</td></tr>";
for(var i = 0;i < arr.length;i ++) {
var sp = arr[i];
var id = sp.id;
var name = sp.name;
var price = sp.price;
var type = sp.type;
xhr2=xhr2+"<tr><td>"+id+"</td><td>"
+name+"</td><td>"+price+"</td><td>"+type+"</td></tr>"
}
xhr2=xhr2+"</table>";
table.innerHTML = xhr2;
}
}
//提交ajax请求
// xhr.send('pid=0');
xhr.send();
// xhr.send(null);
}
}
//将创建XMLHttpRequest对象的方法封装起来
function createXhr(){
var xhr = null;
if(window.XMLHttpRequest) {
//判断window对象中是否有XMLHttpRequest属性
xhr = new XMLHttpRequest();
} else {
//如果没有XMLHttpRequest属性，就使用ActiveXObject创建
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
</script>
<body>
<div id='table'></div>
</body>
</html>
2、封装代码。
//将创建XMLHttpRequest对象的方法封装起来
function createXhr(){
var xhr = null;
if(window.XMLHttpRequest) {
//判断window对象中是否有XMLHttpRequest属性
xhr = new XMLHttpRequest();
} else {
//如果没有XMLHttpRequest属性，就使用ActiveXObject创建
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
//conf={"pid":0,pwd:1}
function ajax(url,conf,fn){
var xhr = createXhr();
if(xhr) {
xhr.open('POST',url);
xhr.setRequestHeader("content-type",
"application/x-www-form-urlencoded");
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){
fn(xhr);
}
}
var str = '';
var dot = '';
for(var attr in conf){
str += dot;
str += attr;
str += '=';
str += conf[attr];
dot = '&';
}
xhr.send(str);
}
}
