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()方法
javascript>javascript">xmlHttp.open(请求方式get|post,请求地址或servlet对象,
同步|异步请求（boolean默认为true，异步）)
5个实现步骤
javascript>javascript">创建对象
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 使用下标形式
选择器
javascript>javascript">$("选择器字符串")；
选择器字符串的格式和CSS选择器是相同的，如不清楚点击这里查看CSS选择器
表单选择器
javascript>javascript">$(":text"); 选择所有type:text 的表单标签（与是否有<from>标签无关）
过滤器
- 对已经选择出来的对象，重新进行筛选
- 过滤器不能单独使用，必须和选择器一同使用
javascript>javascript">$("选择器:first")； 第一个
$("选择器:last")； 最后一个
$("选择器:eq(n)")； 第n个
$("选择器:lt(n)")； 小于n的所有对象
$("选择器:gt(n)")； 大于n的所有对象
表单属性过滤器
javascript>javascript">$(":text:enabled"); 选择所有可用的 type:text 的表单标签
$("select>option:selected"); 下拉列表中被选中的值
函数
val()
javascript>javascript">obj.val(); 获取值
obj.val(); 给所有DOM对象赋值
attr()
javascript>javascript">obj.attr("属性名"); 获取属性值
obj.attr("属性名","值"); 给属性赋值
remove()
- 将DOM对象及其子对象全部删除
empty()
- 将子对象全部删除
append()
javascript>javascript">obj.append("<div>???</div>"); 为DOM对象添加子对象
html()
javascript>javascript">obj.html(); 获取DOM对象中的内容
obj.html(值); 为DOM对象中的内容赋值
each()
- 可以对数组，json，DOM数组（JQuery对象）进行循环
javascript>javascript">$.each(循环内容,function(index,element){})
index为当前索引，element为当前索引对应的数组内容
ready()
- 在DOM对象创建好之后才会执行
事件
javascript>javascript">$(选择器).事件名称(处理函数)
JQuery事件名称就是JS事件名称去掉on字段
on() 绑定事件
javascript>javascript">$(选择器).on("事件名称",处理函数);
on方式 绑定 动态生成元素的事件
javascript>javascript">$(需要绑定的有效外层元素).on(绑定事件类型，需要绑定的JQuery对象，回调函数)
例：
javascript>javascript">$("#Element").on("click",$(".classname"),function(){});
JQuery 与 Ajax
javascript>javascript">$.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，不区分大小写
javascript>javascript">$.get(url,data,function(resp),dataType); 使用get方式发送Ajax请求
$.post(url,data,function(resp),dataType); 使用post方式发送Ajax请求
————————————————————————————————
javascript>javascript">改变CSS样式
obj.css("属性名","值")；
实例演示
实例内容：实现一个级联列表
前端代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<title>级联菜单</title>
<script type="text/javascript>javascript" src="jQuery-3.6.js"></script>
<script>javascript>javascript">
$(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>
后端代码
java">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;
}
}
实现效果
