Part01:Ajax
1、Ajax概念:
”Asynchronous JavaScript And XML“(异步JavaScript和XML),即使用JavaScript语言与服务器进行异步交互,传输的数据为XML。
2、Ajax作用:
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
3、Ajax应用场景:
4、Ajax优缺点:
优点:
Ajax无需刷新整个页面 因为服务器响应内容不再是整个页面,而是页面中的局部,所以Ajax性能高 缺点:
Ajax虽然提高了用户体验,但无形中向服务器发送的请求次数增多了,导致服务器压力增大 因为Ajax是在浏览器中使用JavaScript技术完成的,所以还需要处理浏览器兼容性问题
5、JS中Ajax的使用:
var xmlhttp;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
确定请求方式和请求路径 xmlhttp.open(请求的方式,请求的路径,[是否异步])
发送请求 xmlhttp.send([post请求的参数]) 编写回调函数
常用属性:
onreadystatechange:监测XMLHttpRequest对象状态变化 readyState:XMLHttpRequest对象状态
0:对象已创建 1:对象调用了open方法 2:对象调用了send方法 3:部分已完成 4:响应已完成 status:响应状态码
responseText:响应回来的内容 注意⚠️:若是post请求需要发送参数,必须设置请求参数的mime类型(xmlhttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);)
<script type="text/javascript">
//向服务器发送get请求
function getAjax() {
//获取XMLHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//确定请求方式和请求路径
xmlhttp.open("get","${pageContext.request.contextPath}/demo1?name=tom");
//发送请求
xmlhttp.send();
//接收结果(回调函数)
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState==4&&xmlhttp.status==200){
//弹出响应回来的内容
alert((xmlhttp.responseText))
}
}
}
//向服务器发送post请求
function postAjax() {
//获取XMLHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//确定请求方式和请求路径
xmlhttp.open("post","${pageContext.request.contextPath}/demo1");
// 设置post请求的请求头
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//发送请求,携带post请求参数
xmlhttp.send("name=tom");
//接收结果(回调函数)
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState==4&&xmlhttp.status==200){
//弹出响应回来的内容
alert((xmlhttp.responseText))
}
}
}
</script>
6、jQuery中Ajax的使用:
$.get(url, params,function(obj){},type);//发送get请求 $.post(url, params,function(obj){},type);//发送post请求
url:请求的路径 params:请求参数;
Fn:成功之后的回调函数
function(obj){//obj就是服务器返回给浏览器的内容} type:返回数据的格式
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
//向服务器发送get请求
function getAjax(){
$.get("${pageContext.request.contextPath}/demo1", "name=张三",function(obj){
alert(obj)
},"text");
}
//向服务器发送post请求
function postAjax(){
$.post("${pageContext.request.contextPath}/demo1", "name=张三",function(obj){
alert(obj)
},"text");
}
</script>
$.ajax({
url:请求路径, type:请求方式,默认get, date:请求参数, success:function (obj) {//成功之后的回调 }, error:function (e) { //错误之后的回调}, dataType:返回数据的格式, async:是否异步 默认true })
Part02:校验用户名是否可用案例
1、案例需求:
在不刷新页面的情况下查询数据库中是否存在输入的用户名,若存在,提示:该用户名已存在,并且提交按钮不可用,若不存在,提示该用户名可以使用。
2、主要代码:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function () {
//失去焦点
$("[name=sname]").blur(function () {
$.post("/student", "sname=" + $("[name=sname]").val(), function (obj) {
if (obj == 1) {
$("#sname_msg").html("<font color=red>用户名已存在❌</font>")
$("#sub").attr("disabled", "disabled")
} else {
$("#sname_msg").html("<font color=green>用户名正确✅</font>")
$("#sub").removeAttr("disabled")
}
})
})
})
</script>
</head>
<body>
<h3>请输入要添加用户的信息:</h3>
<form action="#">
用户名:<input type="text" name="sname">
<span id="sname_msg"></span>
年 龄:<input type="text" name="sage">
性 别:<input type="radio" value="男" name="ssex">男<input type="radio" value="女" name="ssex">女
<input type="submit" value="添加" id="sub">
</form>
</body>
</html>
package Servlet;
import service.StudentService;
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.sql.SQLException;
@WebServlet(name = "StudentServlet",urlPatterns = {"/student"})
public class StudentServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//解决请求和响应乱码问题
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//获取前台输入的数据
String sname = request.getParameter("sname");
//创建StudentService调用方法
StudentService studentService = new StudentService();
int flag = studentService.queryStudent(sname);
response.getWriter().print(flag);
} catch (SQLException e) {
e.printStackTrace();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
package service;
import dao.StudentDao;
import java.sql.SQLException;
public class StudentService {
public int queryStudent(String sname) throws SQLException {
//创建StudentDao调用方法
StudentDao studentDao = new StudentDao();
return studentDao.queryStudent(sname);
}
}
package dao;
import Utils.C3P0Utils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ScalarHandler;
import java.sql.SQLException;
public class StudentDao {
public int queryStudent(String sname) throws SQLException {
//创建QueryRunner对象
QueryRunner queryRunner = new QueryRunner(C3P0Utils.getDataSource());
//编写sql
String sql = "select count(*) from student where sname = ?";
//执行sql
int value = ((Long) (queryRunner.query(sql, new ScalarHandler<>(), sname))).intValue();
return value;
}
}
Part03:JSON
1、JSON概念:
2、JSON格式:
数组格式:[e1,e2…] JSON对象:{“key”:”value”,”key2”:”value2”}
3、Java对象和JSON数据进行转换:
导入jar包
第一种方法 第二种方法: 方法:
第一种方法:
JSONArray.fromObject(数组或者list) JSONObject.fromObject(map或者javaBean)
//数组
String[] strings = {"a","b","c"};
JSONArray jsonArray = JSONArray.fromObject(strings);
System.out.println(jsonArray);
//list
List<String> list = new ArrayList<>();
list.add("dd");
list.add("ee");
list.add("ff");
JSONArray jsonArray1 = JSONArray.fromObject(list);
System.out.println(jsonArray1);
//map
Map<String,String> map = new HashMap<>();
map.put("hh","HH");
map.put("ii","II");
map.put("jj","JJ");
map.put("kk","KK");
JSONObject jsonObject = JSONObject.fromObject(map);
System.out.println(jsonObject);
//JavaBean
User user = new User("张三", "123");
JSONObject jsonObject1 = JSONObject.fromObject(user);
System.out.println(jsonObject1);
第二种方法
gson.toJson(数组/list/map/JavaBean )
//数组
String[] strings = {"a","b","c"};
Gson gson = new Gson();
String json = gson.toJson(strings);
System.out.println(json);
//list
List<String> list = new ArrayList<>();
list.add("dd");
list.add("ee");
list.add("ff");
String json1 = gson.toJson(list);
System.out.println(json1);
//map
Map<String,String> map = new HashMap<>();
map.put("hh","HH");
map.put("ii","II");
map.put("jj","JJ");
map.put("kk","KK");
String json2 = gson.toJson(map);
System.out.println(json2);
//JavaBean
User user = new User("张三", "123");
String json3 = gson.toJson(user);
System.out.println(json3);
Part04:搜索下拉提示案例
1、案例需求:
在键盘弹起的时候去数据库中查询4条数据,展示出来,鼠标经过是变成灰色,移开时变回白色,点击时输入框变成点击的数据 一开始点击后输入框变成[object HTMLDivElement],加上innerHTML后获取到真正数据
function cl(a){
$("#cxid").prop("value",a.innerHTML);
}
2、主要代码:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function () {
//键盘弹起事件
$("#cxid").keyup(function () {
$.post("/search","name="+$("#cxid").val(),function (obj) {
$("#did").html("");
if(obj != ""){
//遍历
$(obj).each(function () {
$("#did").append("<div onmouseover='over(this)' onmouseout='out(this)' onclick='cl(this)'>"+this+"</div>");
$("#did").show();
})
}else {
$("#did").hide();
}
},"json");
})
});
</script>
</head>
<body>
<center>
<div>
<h3>搜索下拉提示案例</h3>
<div>
<input type="text" name="cx" id="cxid" value="">
<input type="button" value="搜索?">
</div>
<div id="did" style="border: 1px solid gainsboro;width:150px;position: relative;left: -30px;display: none">
</div>
</div>
</center>
</body>
<script type="text/javascript">
function over(obj) {
$(obj).css("background-color","gainsboro");
}
function out(obj) {
$(obj).css("background-color","white");
}
function cl(a){
$("#cxid").prop("value",a.innerHTML);
}
</script>
</html>
package Servlet;
import com.google.gson.Gson;
import service.SearchService;
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.sql.SQLException;
import java.util.List;
@WebServlet(name = "SearchServlet",urlPatterns = {"/search"})
public class SearchServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//从前台获取输入的数据
String name = request.getParameter("name");
//创建SearchService调用方法
SearchService searchService = new SearchService();
List<Object> list = searchService.queryName(name);
//把list转换为json
Gson gson = new Gson();
String s = gson.toJson(list);
//把json数据传给前台
response.getWriter().print(s);
} catch (SQLException e) {
e.printStackTrace();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
package service;
import dao.SearchDao;
import java.sql.SQLException;
import java.util.List;
public class SearchService {
public List<Object> queryName(String name) throws SQLException {
//创建SearchDao调用方法
SearchDao searchDao = new SearchDao();
return searchDao.queryName(name);
}
}
package dao;
import Utils.C3P0Utils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ColumnListHandler;
import java.sql.SQLException;
import java.util.List;
public class SearchDao {
public List<Object> queryName(String name) throws SQLException {
//创建QueryRunner
QueryRunner queryRunner = new QueryRunner(C3P0Utils.getDataSource());
String sql = "select name from cx where name like ? limit 0,4";
List<Object> query = queryRunner.query(sql, new ColumnListHandler<>(), "%" + name + "%");
return query;
}
}