第一章 Ajax 前端技术
前端技术： 在浏览器中执行的程序都是前端， html ， css，js 等等
后端技术：在服务器中执行的程序， 使用 java 语言开发的后端程序。 servlet,jsp, jdbc,mysql,tomcat 等等
1 全局刷新和局部刷新
1）全局刷新： 使用 form， href 等发起的请求是全局刷新。
用户发起请求， 视图改变了， 跳转视图，使用新的数据添加到页面。
缺点：
1. 传递数据量比较大。 占用网络的带宽
2. 浏览器需要重新的渲染整个页面。
3. 用户的体验不是那么好
2）局部刷新： 在当前页面中，发起请求，获取数据，更新当前页面的 dom 对象。 对视图部分刷新。
特点：
1. 数量比较小， 在网络中传输速度快。
2. 更新页面内容， 是部分更新页面， 浏览器不用全部渲染视图。
3. 在一个页面中，可以做多个 局部刷新
4. 从服务器获取的是数据， 拿到更新视图
2 异步请求对象
在局部刷新中，使用异步请求对象，在浏览器内部发起请求，获取数据。
异步对象是在浏览器内部的一种 javascript 对象。 各大浏览器都能支持异步对象的使用。chrome ,firefox, ie, opper ,
异步对象 XMLHttpRequest
3. 异步对象 XMLHttpRequest 介绍
js 中的一种对象， 使用 js 语法创建和使用这个对象。
var xhr = new XMLHttpRequest();
之后就可以 使用 xhr 对象的属性或者函数，进行异步对象的操作。
使用异步对象实现局部刷新， 异步对象主要负责发起请求，传递请求的参数，并从服务器接收数据。
局部刷新需要使用那些技术：
1）javascript ： 创建 XMLHttpRequest 对象， 调用它的属性或者方法
2）dom：处理 dom，更新 select 的数据
3）css: 处理视图， 更新，美化。
4）servlet：服务器端技术
5）数据格式：json。 它之前是 xml
把上面这些技术的综合使用叫做 ajax（阿贾克斯）。
4 Ajax
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分页面内容的新方法
AJAX 不是新的编程语言，它是多种技术的综合使用。 包含了 javascript, dom
,css, 服务器端技术， servlet ，jsp ，jdbc 等等， 还有 json 数据格式。
使用 AJAX 实现局部刷新。
Ajax 核心是 javascript 和 xml （json）：使用 javascript 操作异步对象 XMLHttpRequest. 和服务器交换使用 json 数据格式。
5. 异步对象 XMLHttpRequest 属性和方法
-
创建异步对象，使用 js 的语法
var xhr = new XMLHttpRequest();
-
XMLHttpRequest 方法
①）open(请求方式, 服务器端的访问地址，异步还是同步) --true 是异步
例如：xhr.open(“get”,“loginServlet”,true);
②）send(): 使用异步对象发送请求
-
XMLHttpRequest 属性
readyState 属性：请求的状态
0：表示创建异步对象时，new XMLHttpRequest();
1：表示初始异步对象的请求参数。 执行 open()方法
2：使用 send()方法发送请求。
3：使用异步对象从服务器接收了数据
4：异步对象接收了数据，并在异步对象内部处理完成后。
status 属性：网络的状态，和 Http 的状态码对应
200：请求成功
404： 服务器资源没有找到
500： 服务器内部代码有错误
responseText 属性：表示服务器端返回的数据
例如： var data = xhr.responseText;
6. 异步对象 XMLHttpRequest 使用步骤
1）使用 js 创建异步对象
var xhr = new XMLHttpRequest();
2)给异步对象绑定事件。事件名称 onreadystatechange
例如 button 增加单击事件 onclick
xhr 绑定事件
xhr.onreadysatechange=function() { 当事件发生时执行的代码 }
<input type="button" onclick="btnClick()" />
<script type="text/javascript">
function btnClick(){
按钮单击的处理代码
}
</script>
在绑定事件中做什么，根据 readyState 值做请求的处理
xhr.readystatechagne=function(){
if( xhr.readyState==4 && xhr.status==200 ){
从服务器获取了数据， 更新当前页面的dom对象，完成请求的处理
var data = xhr.responseText;
更新dom对象
document.getElementById("#mydiv").innertHTML = data;
}
}
-
初始请求的参数，执行 open()函数
xhr.open(“get”,“loginServlet”,true)
4)发送请求，执行 send()
xhr.send()
7. 第一个例子
使用全局刷新， 实现计算 bmi
可以使用 jsp 显示 request 作用域中的数据，使用 el 表达式
也可以使用 HttpServletResponse 对象输出数据， 数据给了浏览器。 浏览器可以接收 HttpServletResponse 对象 print 的数据
8 同步请求和异步请求
看 open(请求方式， 访问 uri 地址，boolean 是不是异步的)
true：异步请求
false：同步请求
第二章 jQuery
-
jquery 的介绍
jquery 就是 js 函数库， 里面有大量的 js 函数， 使用这些函数操作 dom 对象， 做事件，动画， ajax 处理
地址： https://jquery.com/
-
下载
下载地址：https://jquery.com/download/
压缩版本： 文件体积比较小，适合项目上线后使用。 jquery-3.4.1.min.js
未压缩：体积比较大，可读性比较好，适合开发阶段使用 jquery-3.4.1.js
2.1 使用 jquery
步骤：
-
需要在你的项目中加入 jquery 的文件， idea 中是把 jquery 放在 webapp 目录。一般是创建一个 js 目录。存放 js 文件的。 对于 hbuilder 工具， 放在项目的 js 目录中就可以了
-
创建一个 html 文件或者 jsp 都可以， 在文件中使用
<script type="text/javascript" src="jquery的文件的相对路径" /> 这样是不行的 <script type="text/javascript" src="jquery的文件的相对路径" /></script>这样是可以的 -
在 js 代码中，调用 jquery 中函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个jquery例子</title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
/*
$:jquery中的函数名
document:是参数
$(document): 把js中的document对象变成jquery可以使用的对象。
然后调用ready()的函数。 这个ready()是jquery中的函数
ready()的执行时间在页面dom对象加载后执行的。相当于js中onload事件
ready(函数):表示在页面对象加载后执行 这个函数
*/
/* $(document).ready(function(){
alert("使用jquery了")
}) */
/* $(document).ready( myinit() )
function myinit(){
alert("====相当于οnlοad==")
} */
//jquery提供了简单方式,使用ready()
//$( 参数是一个函数 )
$( function(){
alert("简单的方式使用ready")
} )
</script>
</head>
<body>
</body>
</html>
2.2 对象的分类
dom 对象和 jquery 对象。 在一个文件中同时存在两种对象
dom 对象： 使用 js 的代码获取，创建的对象。 html 中的对象都是 dom 对象。
jquery 对象： 使用 jquery 获取获取的对象。
为什么要使用 dom 对象，还有 jquery 对象？
目的是要 dom 对象的函数或者属性， 以及使用使用 jquery 中提供的函数或者属性。
要 dom 中的内容就需要使用 dom 对象， 要使用 jquery 函数库中的函数需要使用 jquery 对象。
dom 对象和 jquery 对象可以相互转换的
2.2.1. dom 对象转为 jquery 对象。
语法： $( dom 对象 ) 得到的是一个 jquery 对象， 可以调用 jquery 中提供的函数
<input type="text" id="t1" />
//通过js的函数，获取dom对象
var dom= document.getElementById("t1");
//把dom转为jquery
var jqueryObj = $(dom);
//调用jquery中的函数
jqueryObject.val();//获取dom对象的value属性的值
提示：为了区分dom对象和jquery对象，可以在jquery对象变量名上，加一个$ , 例如 $obj
2.2.2 jquery 对象转为 dom 对象。
语法： jquery 对象是一个数组， 数组成员是 dom 对象。 使用 [下标] 或 get(下标)
<input type="text" id="txt1"/>
使用jquery的方式表示这个dom对象
$("#txt1"):获取id是txt1的dom对象。
var obj = $("#txt1"); //obj是一个jquery对象，是一个包含了一个成员的dom数组。 obj[0]就是dom对象
var dom = obj[0]; 或者 obj.get(0)
//使用dom对象的函数或者属性
alert(dom.value)
2.3 选择器
什么是选择器： 选择器就是一个字符串， 是一个定位 dom 对象的字符串。 使用这个字符串作为条件定位 dom 对象。 可以使用 id ，class 样式名称， 标签名称等作为选择器使用，定位 dom 对象
2.3.1 基本选择器
使用 dom 对象的 id， class 名称， 标签名称等作为条件定位 dom 对象。
-
使用 dom 对象的 id 作为条件
语法： $(“#id”) document.getElementById(“id”)
-
class 选择器，使用对象的 class 名称定位 dom 对象
语法：$(“.class 名称”) document.getElementsByClassName()
-
标签选择器，使用标签名称作为条件定位 dom 对象
语法：$(“标签名称”) document.getElementsByTagName()
-
所有选择器
语法： $(“*”)
-
组合选择器
语法：$(“#id,.class,标签名称”)
组合选择器使用 id 或者 class 名称或者标签名称定位 dom 对象， id，class，标签名称可以任意组合。
2.3.2 表单选择器
表单选择器使用 dom 对象的 type 属性值定位 dom 对象的， 和 form 标签无关。
语法： $(“:type 属性值”)
例如：
<input type="text" />
<input type="text" />
使用表单选择器： $(":text")
2.4 过滤器
过滤器是一个字符串，用了筛选 dom 对象的， 过滤器是和选择器一起使用的。 在选择了 dom 对象后，在进行过滤筛选。
2.4.1 基本过滤器
使用 dom 对象在数组中的位置，作为过滤条件的。
1）选择数组中第一个 dom 成员
语法：$(“选择器:first”)
- 选择数组中最后一个成员
语法：$(“选择器:last”)
- 选择等于指定下标的 dom 成员
语法：$(“选择器:eq(下标)”)
4）选择大于某个下标的所有成员
语法：$(“选择器:gt(下标)”)
5）选择小于某个下标的所有成员
语法：$(“选择器:lt(下标)”)
2.4.2 表单过滤器
根据对象的状态作为条件，筛选 dom 对象
1）获取可用的文本框
语法：$(“:text:enabled”)
- 获取不可用的文本框
语法： $(“:text:disabled”)
3）获取选中的复选框
语法：$(“:checkbox:checked”)
- 获取选中下拉列表框
语法： $(“选择器 > option:selected”)
<select id="lang">
<option value="java">java</option>
<option value="sql">sql</option>
</select>
2.5 函数
2.5.1 第一组函数
1）val()：操作 dom 对象的 value 值
val(): 没有参数， 获取 dom 数组中第一个 dom 对象的 value 值
val(参数)： 有参数， 给 dom 数组中所有 dom 对象的 value 属性赋值
2）text() : 操作标签的文本内容，标签开始和结束之间的内容
text(): 没有参数， 把 dom 数组中所有 dom 对象的文本内容链接起来，形成一个字符串，并返回这个这个字符串。
text(参数)：给 dom 数组中的所有成员统一赋予新的文本
3）attr(): 操作 value ，文本以外的属性时。
attr(“属性名”)：获取 dom 数组中第一个 dom 成员的此属性值
attr(“属性名”,“属性值”)：给 dom 数组中所有 dom 成员此属性赋值
2.5.2 第二组函数
1） remove()
删除选择的 dom 对象和他的子对象
语法： $(”选择器“).remove()
2） empty()
删除 dom 对象的子对象
语法： $(“选择器”).empty()
- append()
给 dom 对象在他的后面增加新的 dom 对象
语法： $(“选择器”).append( 子 dom 对象 )
- html()
html(): 获取 dom 数组中第一个 dom 对象的文本值（ html()返回结果相当于 innertHTML ）
html(参数)：给 dom 数组中所有成员设置新的文本内容。 （html()返回结果相当于 innertHTML ）
5)each()
each 是循环函数， 可以循环数组， json ， dom 对象数组
① $.each( 要循环的内容， function(index,element ){ 处理函数} )
要循环的内容: 可以是数组， json 对象， dom 对象数组。
function： 循环的处理函数， 每个成员都会执行函数一次。
index：是循环变量的值， 名称自定义
element： 和 index 对应的成员， element 名称是自定义的
例如
doArrayContent： function(index,element ){ 处理函数} )
② $(“选择器”).each(function(index,element){ 处理函数} )
可以对 jquery 对象进行循环处理。 jquery 对象就是 dom 数组
2.6 事件
jquery 可以给 dom 对象绑定事件，在程序执行期间动态的处理事件
2.6.1 第一种事件绑定语法
语法： $(“选择器”).事件名称(事件的处理函数)
$(“选择器”)：选择 0 或多个 dom 对象。给他们绑定事件
事件名称： 就是 js 中的 去掉 on 的部分。 例如单击事件 onclick, 这里的事件名称就是 click
事件的处理函数: 函数定义， 当事件发生时，执行这个函数。
例如：
<input type="button" id="btn" value="绑定事件"/>
绑定事件
$("#btn").click( function(){ 单击的处理代码 } )
$(":button").click(function(){ 单击处理代码})
<script type="text/javascript">
$(function(){
//页面dom对象加载后执行, 相当于onload事件
//绑定事件
$("#btn").click(function(){
alert("==button单击了，执行处理函数==")
})
})
</script>
<body>
<input type="button" id="btn" value="绑定事件" /><br/>
</body>
2.6.2 第二种事件绑定方式， on
语法： $(“选择器”).on( 事件名称, function(){事件处理函数})
事件： 就是 js 中去掉 on 的部分。
function： 事件处理函数
<body>
<input type="button" id="btn" value="绑定事件" /><br/>
</body>
<script>
$("#btn").on("click",function(){ alert("按钮单击了")})
</script>
2.7 Ajax
使用 jquery 提供的函数实现 ajax 请求的处理。 代替直接使用 XMLHttpRequest. 但是 jquery 实际还是使用的异步对象。
2.7.1 $.ajax() 核心的函数
语法： $.ajax( { json 格式的参数} )
json 格式的参数：key 是定义好的， 需要开发人员给 key 赋值。 这些 key 是用来表示 ajax 请求必须的参数
例如，请求的 uri 地址， 是不是异步请求， 请求的方式等等。
$.ajax(
{
url:"queryProvinceServlet",
type:"get",
data:{"name":"李四","age":20},
dataType:"json",
success:function(resp) { 开发人员获取数据，更新dom对象 },
error:function(){ alert("请求错误")}
}
)
url：服务器的地址，例如某个 servlet 的访问地址。 queryProvinceServlet
type:表示请求的方式，get，post。 默认是 get。 这个值不用区分大小写
data：表示提交的请求参数。 可以是 string， 数组， json 类型的。 推荐使用 json 格式。
例如： data: {“name”:“李四”,“age”:20}
jquery 在发送请求时，会把 json 中的 key 作为请求的参数使用， key 对应的值作为参数数据。
转为的结果： http://localhost:8080/myweb/queryProvinceServlet?name=李四&age=20
dataType: 数据格式， 可以是 html， text ， xml ，json 等等。 表示发起请求后，希望服务器端返回的数据格式。 jquery 可以尝试使用对应格式处理返回的数据。 比如你指定了 dataType:json,表示希望服务器返回的是 json 格式数据。 然后 jquery 把 json 数据转为 json 对象。服务器代码可以获取到 dataType 的内容。
例如： 请求中 dataType:“json”, jquery 发起请求后，
在请求头中 Accept: application/json, text/javascript, /; q=0.01
如果 dataType:“text”, 请求中
Accept: text/plain, /; q=0.01
success: 函数 function。 当服务器端返回了数据，jquery 处理完数据后，执行这个函数。 等同于异步对象的 readyState==4 $$ status=200 的情况
例如： success:function( data){ 开发人员处理服务器返回的数据 }
data 是自定义形参， 相当于 data= xhr.responseText
error:function(), 当请求错误时，执行这个函数。
contentType:表示请求的参数数据格式。例如 application/json , 这个内容可以不写。
async: 是一个 boolean 表示请求是同步的还是异步的。 true 是异步的，默认是 true； false 同步的.
2.7.2 $.get()
$.get()这个函数就是执行 get 请求方式的 ajax
语法： $.get(url, 请求参数， success 函数， dataType)
例如：
$.get(
"queryName",
{ proid: 1 },
function (resp) {
获取省份名称;
},
"text"
);
2.7.3 $.post()
$.post() 执行 post 请求的 ajax。
语法： $.post(url, 请求参数， success 函数， dataType)
例如：
$.post(
"queryName",
{ proid: 1 },
function (resp) {
获取省份名称;
},
"text"
);
2.8 级联查询
思路：有两个数据库的查询 1： 查询所有的省份名称和 id ； 2 根据提交的省份 id ，查询 city 表，得到城市列表
有两个 servlet 接收请求， 一个查询所有的省份 ；一个是接收省份 id 的参数，查询省份对应的城市列表。
数据格式使用 json
发起请求使用 $.ajax, $.get, $.post
事件： onChange()
实现步骤：
1.数据表 province( 获取全部的 id 和 name 列的值)，
city 表根据 provinceid 的值，得到 id，name 列
2.创建 web 应用。 加入 mysql 驱动的 jar 和 jackson 的 jar
3.创建实体类， Province , City
4.创建 Dao 类， QueryDao 类，有两个方法
5.创建 Servlet， 两个 servlet ，一个是查询所有的省份名称， 一个是查询城市列表
6.创建 jsp， 发起两个 ajax 请求。
内容来源
https://www.bilibili.com/video/BV1gK411P7RQ?p=123&vd_source=8c0b9dc47f516c774fd7562538579fc5
侵删
扫一扫
209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
