-
ajax
-
同步和异步
举个例子：普通B/S模式(同步) AJAX技术(异步)
* 同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事 * 异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕 同步是指：发送方发出数据后，等接收方发回响应以后才发下一个 数据包的通讯方式。 异步是指：发送方发出数据后，不等接收方发回响应，接着发送下 个数据包的通讯方式易懂的理解:
异步传输: 你传输吧，我去做我的事了，传输完了告诉我一声 同步传输: 你现在传输，我要亲眼看你传输完成，才去做别的事
-
什么是ajax?
允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.
2.Ajax的工作原理
AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理—等待—处理—等待缺点。
用户的浏览器在执行任务时即装载了AJAX引擎。AJAX引擎用Javascript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。
AJAX引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器间的交流。现在，可以用Javascript调用AJAX引擎来代替产生一个HTTP的用户动作，内存中的数据编辑、页面导航、数据校验这些不需要重新载入整个页面的需求可以交给AJAX来执行。
- ajax得实现方式基于 Jquery来实现
Jquery对js得一种封装 使我们操作dom元素更加简单。
（1）$.get(url,data,callback,type);
1. url: 请求服务器的地址。
2. data: 请求时携带的参数 格式是key/value {key:value,key:value}
3. callback: 服务器响应成功后调用的函数。 function(msg){} msg:服务器响应的内容。
4. type: 服务器响应的数据格式. text 文本类型 json对象类型 xml这个不大用。
（2）$.post(url,data,callback,type); 和get方式一样
（3）$.ajax({
url: 请求路径,
data: 携带的数据
type: 请求方式
success: 服务器响应成功后触发的函数，
dataType: 服务器响应的数据类型
});
4. json对象
JSON（Javascript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是Javascript原生格式，这意味着在Javascript中处理JSON数据不需要任何特殊的API或工具包。
JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。
规则如下:
1）映射用冒号（“：”）表示。名称:值
2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2
3） 映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}
4） 并列数据的集合（数组）用方括号(“[]”)表示。
[
{名称1:值,名称2:值2},
{名称1:值,名称2:值2}
]
5 元素值可具有的类型：string, number, object, array, true, false, null
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2021/10/30
Time: 14:13
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
$Title$
<%--①引入jquery得插件--%>
服务端响应的数据格式为json
练习: 点击某个按钮使表格数据回显
2. ajax+dao+servlet+layui
创建一个web工程并把所有jar放入web-inf/lib下
把layui得插件下载
在网页中引入layui相关的css和js
编写自己的网页
编写servlet
编写dao
package com.ykq.dao;
import com.ykq.entity.User;
import java.util.ArrayList;
import java.util.List;
public class UserDao extends baseDao{
//查询所有记录
public List queryAll() {
List list=new ArrayList<>();
try {
getConnection();
String sql = "select * from tb_user";
ps = connection.prepareStatement(sql);
resultSet = ps.executeQuery();
while (resultSet.next()) {
User user = new User();
user.setUserId(resultSet.getInt("userId"));
user.setSex(resultSet.getInt("sex"));
user.setUsername(resultSet.getString("username"));
user.setRealname(resultSet.getString("realname"));
user.setPassword(resultSet.getString("password"));
list.add(user);
}
}catch (Exception e){
e.printStackTrace();
}finally {
closeAll();
}
return list;
}
//查询该表得总条数
public Integer count() {
try {
getConnection();
String sql = "select count(*) as c from tb_user";
ps = connection.prepareStatement(sql);
resultSet = ps.executeQuery();
while (resultSet.next()) {
return resultSet.getInt("c");
}
}catch (Exception e){
e.printStackTrace();
}finally {
closeAll();
}
return 0;
}
}
编写user实体和tableLayui实体
package com.ykq.entity;
public class User {
private Integer userId;
private String username;
private String password;
private String realname;
private Integer sex;
@Override
public String toString() {
return "User{" +
"userId=" + userId +
", username='" + username + ''' +
", password='" + password + ''' +
", realname='" + realname + ''' +
", sex=" + sex +
'}';
}
public User() {
}
public User(Integer userId, String username, String password, String realname, Integer sex) {
this.userId = userId;
this.username = username;
this.password = password;
this.realname = realname;
this.sex = sex;
}
public User(String username, String password, String realname, Integer sex) {
this.username = username;
this.password = password;
this.realname = realname;
this.sex = sex;
}
public Integer getSex() {
return sex;
}
public void setSex(Integer sex) {
this.sex = sex;
}
public Integer getUserId() {
return userId;
}
public void setUserId(Integer userId) {
this.userId = userId;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getRealname() {
return realname;
}
public void setRealname(String realname) {
this.realname = realname;
}
}
package com.ykq.util;
public class TableLayui {
private Integer code=0; //状态码
private String msg=""; //信息
private Integer count; //总条数
private Object data; //表格数据
public TableLayui() {
}
public TableLayui(Integer code, String msg, Integer count, Object data) {
this.code = code;
this.msg = msg;
this.count = count;
this.data = data;
}
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Integer getCount() {
return count;
}
public void setCount(Integer count) {
this.count = count;
}
public Object getData() {
return data;
}
public void setData(Object data) {
this.data = data;
}
}
2.2 添加分页:
（2）servlet
（3）dao代码
4. 添加删除和修改按钮
5. 添加相应的事件
5.完成删除功能
后台:servlet
公共结果类
public class CommonResult {
private Integer code; //状态码
private String msg; //消息
private Object data; //数据
}
- 添加表格头部工具栏
表格头工具栏添加监听事件
出现添加表单的弹出层
弹出框
<%--表单--%>
确认添加
servlet
