AJAX
全局刷新 和 局部刷新
异步对象(XMLHttpRequest)
——readyState属性
——status属性
5个实现步骤
同步与异步
JQuery
DOM对象与JQuery对象
选择器
过滤器
——表单属性过滤器
函数
事件
JQuery 与 Ajax
实例演示
AJAX
- 出现时间——2003年
- Asynchronous JavaScript and XML
(异步的JavaScript和XML)
JavaScript:用于更新dom对象,更新页面
XML:传输数据的格式(已经被JSON替代了)
全局刷新 和 局部刷新
全局刷新:浏览器重新渲染 页面
局部刷新:在浏览器内部,发起请求,改变部分页面
异步对象(XMLHttpRequest)
- 现浏览器内都内建了 XMLHttpRequest 对象,使用JavaScript可以直接创建
readyState属性
- 表示请求的状态变化
0 | 创建异步对象(现在基本用不到了) |
---|---|
1 | 初始化异步请求对象,xmlHttp.open() |
2 | 发送请求,xmlHttp.send() |
3 | 接受数据 |
4 | 读取数据 |
status属性
- 表示网络请求状况(Http状态码)
open()方法
xmlHttp.open(请求方式get|post,请求地址或servlet对象,
同步|异步请求(boolean默认为true,异步))
5个实现步骤
创建对象
var xmlhttp = new XMLHttpRequest();
绑定onreadystatechange事件
(当异步对象发起请求,获取数据都会触发该事件)
xmlhttp.onreadystatechange = function(){}
初始化异步对象
xmlHttp.open();
使用异步对象发送请求
xmlHttp.send();
获取返回数据
var data = xmlHttp.responseText;
同步与异步
同步:需要等待Servlet对象处理完数据后继续执行其他代码(send()方法之后的代码)
异步:无需等待Servlet对象处理完数据,直接执行其他代码(send()方法之后的代码)
异步可以在其他代码中发送其他请求,使请求直接互相独立
JQuery
- JavaScript的库
- 可以兼容各种浏览器(包括IE)
DOM对象与JQuery对象
- DOM对象就是JS对象,而JQuery语法表示的对象都是JQuery对象
- JQuery对象都是DOM数组,默认操作数组中的全部成员
对象转换
DOM - > JQuery $(DOM对象)
JQuery - > DOM 使用下标形式
选择器
$("选择器字符串");
选择器字符串的格式和CSS选择器是相同的,如不清楚点击这里查看CSS选择器
表单选择器
$(":text"); 选择所有type:text 的表单标签(与是否有<from>标签无关)
过滤器
- 对已经选择出来的对象,重新进行筛选
- 过滤器不能单独使用,必须和选择器一同使用
$("选择器:first"); 第一个
$("选择器:last"); 最后一个
$("选择器:eq(n)"); 第n个
$("选择器:lt(n)"); 小于n的所有对象
$("选择器:gt(n)"); 大于n的所有对象
表单属性过滤器
$(":text:enabled"); 选择所有可用的 type:text 的表单标签
$("select>option:selected"); 下拉列表中被选中的值
函数
val()
obj.val(); 获取值
obj.val(); 给所有DOM对象赋值
attr()
obj.attr("属性名"); 获取属性值
obj.attr("属性名","值"); 给属性赋值
remove()
- 将DOM对象及其子对象全部删除
empty()
- 将子对象全部删除
append()
obj.append("<div>???</div>"); 为DOM对象添加子对象
html()
obj.html(); 获取DOM对象中的内容
obj.html(值); 为DOM对象中的内容赋值
each()
- 可以对数组,json,DOM数组(JQuery对象)进行循环
$.each(循环内容,function(index,element){})
index为当前索引,element为当前索引对应的数组内容
ready()
- 在DOM对象创建好之后才会执行
事件
$(选择器).事件名称(处理函数)
JQuery事件名称就是JS事件名称去掉on字段
on() 绑定事件
$(选择器).on("事件名称",处理函数);
on方式 绑定 动态生成元素的事件
$(需要绑定的有效外层元素).on(绑定事件类型,需要绑定的JQuery对象,回调函数)
例:
$("#Element").on("click",$(".classname"),function(){});
JQuery 与 Ajax
$.ajax(); 实现Ajax的核心函数
$.post(); 使用post方式调用ajax请求(内部调用$.ajax()方法)
$.get(); 使用get方式调用ajax请求(内部调用$.ajax()方法)
$.ajax()
- 参数是一个json格式的参数
json中该包含的内容:
async:布尔值,表示同异步处理方式
contentType:传给服务器的数据类型,可以不写
data:表示参数和参数值,常用 json
dataType:表示期望从服务器获取的数据类型,可选xml,html,text,json
error:一个函数,请求错误时执行该函数
success:一个function(data),请求成功时执行该函数,data是服务器传回后经过Ajax处理后的数据
url:请求地址
type:请求方式,默认是Get,不区分大小写
$.get(url,data,function(resp),dataType); 使用get方式发送Ajax请求
$.post(url,data,function(resp),dataType); 使用post方式发送Ajax请求
————————————————————————————————
改变CSS样式
obj.css("属性名","值");
实例演示
实例内容:实现一个级联列表
前端代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<title>级联菜单</title>
<script type="text/javascript" src="jQuery-3.6.js"></script>
<script>
$(function(){
$("#province").change(function(){
var pro = $("select>option:selected")[0].value;
var data = {province:pro};
$.get("newProvince",data,function(resp){
var select = $("select:last");
select.empty();
$.each(resp,function(i,option){
select.append("<option>"+ option +"</option>");
})
},"json");
})
});
</script>
<style>
select{
width:200px;
}
</style>
</head>
<body>
<select id="province">
<option>河北</option>
<option>河北</option>
<option>山西</option>
<option>辽宁</option>
<option>吉林</option>
<option>黑龙江</option>
<option>江苏</option>
<option>浙江</option>
<option>安徽</option>
<option>福建</option>
<option>江西</option>
<option>山东</option>
<option>河南</option>
<option>湖北</option>
<option>湖南</option>
<option>广东</option>
<option>海南</option>
<option>四川</option>
<option>贵州</option>
<option>云南</option>
<option>陕西</option>
<option>甘肃</option>
<option>青海</option>
<option>台湾</option>
<option>内蒙古</option>
<option>广西</option>
<option>西藏</option>
<option>宁夏</option>
<option>新疆</option>
<option>北京</option>
<option>天津</option>
<option>上海</option>
<option>重庆</option>
<option>香港</option>
<option>澳门</option>
</select>
<select>
<option>石家庄</option>
<option>唐山</option>
<option>秦皇岛</option>
<option>邯郸</option>
<option>邢台</option>
<option>保定</option>
<option>张家口</option>
<option>承德</option>
<option>沧州</option>
<option>廊坊</option>
<option>衡水</option>
</select>
</body>
</html>
后端代码
package Servlet;
import Tool.Mysql;
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;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
public class newProvince extends HttpServlet {
@Override
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException{
String province = request.getParameter("province");
String json = findCities(province);
response.setContentType("text/html;charset=utf-8");
PrintWriter pw = response.getWriter();
pw.print(json);
}
private String findCities(String province) {
Connection conn = Mysql.connection("province");
String sql = "select * from city where province_number in(select number from province where name = ?);";
PreparedStatement ps = Mysql.prepareStatement(conn,sql);
Mysql.setString(ps,1,province);
ResultSet rs = Mysql.executeQuery(ps);
String json = "{";
int num = 1;
while(Mysql.next(rs)){
json = json + "\"" + (num++) + "\":\"" + Mysql.getString(rs,"name") + "\",";
}
json = json.substring(0,json.length() - 1);
json += "}";
return json;
}
}
实现效果