-
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" %>
<html>
<head>
<title>$Title$</title>
<%--①引入jquery得插件--%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>
</head>
<body>
<button onclick="ck()">点击我</button>
</body>
<script>
//表示一个json对象 {k:v,k:v} 简单
// var p={"n":"刘一凡","a":17};
// alert(p.n+"----->"+p.a);
//集合json对象
// var students=[
// {"name":"刘健","age":20},
// {"name":"王飞","age":18},
// {"name":"王一同","age":38}
// ];
// alert(students[0].name);
// var p={
// "programmers":
// [
// {"firstName": "Brett", "email": "brett@newInstance.com" },
// {"firstName": "Jason", "email": "jason@servlets.com" }
// ]
//
// }
//
// alert(p.programmers[0].email);
var people ={
"programmers": [
{ "firstName": "Brett", "email": "brett@newInstance.com" },
{ "firstName": "Jason", "email": "jason@servlets.com" },
{ "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
],
"authors": [
{ "firstName": "Isaac", "genre": "science fiction" },
{ "firstName": "Tad", "genre": "fantasy" },
{ "firstName": "Frank", "genre": "christian fiction" }
],
"musicians": [
{ "firstName": "Eric", "instrument": "guitar" },
{ "firstName": "Sergei", "instrument": "piano" }
]};
window.alert(people.programmers[1].firstName);
window.alert(people.musicians[1].instrument);
function ck(){
/*$.get("${pageContext.request.contextPath}/ajax01",function(result){ //
//拿到结果使用
alert(result);
});*/
/*$.post("${pageContext.request.contextPath}/ajax01",{"uname":"范龙飞","age":18},function(result){ //
//拿到结果使用
alert(result);
});*/
$.ajax({
url: "${pageContext.request.contextPath}/ajax01",
data: "uname=刘哥&age=19",
type: "POST",
success: function (result) {
alert(result)
}
})
}
</script>
</html>
服务端响应的数据格式为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<User> queryAll() {
List<User> 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; //数据
}
- 添加表格头部工具栏
表格头工具栏添加监听事件
出现添加表单的弹出层
弹出框
<%--表单--%>
<form style="display: none;margin: 0 10px" class="layui-form" action="" id="userForm">
<div class="layui-form-item">
<label class="layui-form-label">账号:</label>
<div class="layui-input-inline">
<input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码:</label>
<div class="layui-input-inline">
<input type="text" name="password" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">真实姓名:</label>
<div class="layui-input-inline">
<input type="tel" name="realname" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">性别:</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男" checked="">
<input type="radio" name="sex" value="女" title="女">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="button" class="layui-btn" lay-submit="" lay-filter="submitUser" value="立即提交">
<input type="reset" class="layui-btn layui-btn-primary" value="重置">
</div>
</div>
</form>
确认添加
servlet
244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
