JavaWeb学习笔记——JQuery与AJAX基础

本文是学习Java时所记录的学习笔记，本节是JQuery和AJAX的基础内容，因为这两个技术使用的时候会相互依赖，所以放在一起。掌握后能实现JQuery操作页面元素以及JQuery配合AJAX实现前后端数据交互，实现局部刷新。是从慕课网学习，提取了我觉得是重点的内容，欢迎留言，私信交流~

JQuery基础

JQuery简介

什么是JQuery？

轻量级JS库，JQuery的核心是选择器，用于获取页面元素，使用十分简单。

什么是JavaScript库？

由第三方厂商开发的JavaScript函数库，为了简化JavaScript的开发。

主流JavaScript库

• JQuery
• Vue.js
• AngularJS
• React
• …

JQuery的具体实现

下载与安装

JQuery官网：jquery.com
需要的JAR包：jquery-3.3.1.js
前端开发的IDE工具推荐：Eclipse、Hbuilder、sublime、webstorm

压缩版文件

.min.（文件名中包含min字样）

文件中有“min”字样，表示文件是被压缩过，文件大小会小很多。通常开发时使用不带min字样的jar包，项目部署时可以使用带min字样的jar包。

JQuery选择器语法

语法1：JQuery(选择器表达式)

语法2：$(选择器表达式)

案例

案例1

选择a标签，设置css属性为“color=ref font-weight=bold”。

$("a").css({"color":"red","font-weight":"bold"});

案例2

选择id为liebiao的标签，追加内容“<br>test</br>”

$("#liebiao").append("<br>test</br>");

案例3

为span标签增加onclick事件，click是onclick的简写。点击后执行function里的方法（这里的function方法没有添加具体的执行内容）

$("span").click(function(){})

案例4

设置href属性包含163值的a标签，属性修改为：“href=“http://www.163.com/””

 $("a[href*='163']").attr("href","http://www.163.com/");

JQuery的相关知识

基本选择器

语法	说明
$("#id")	ID选择器，指定id元素的对象
$(“标签”)	元素选择器，选择指定标签名的选择器
$(".class")	类选择器，选中拥有指定css类的元素
$(“S1,S2,SN”)	组合选择器，对多个元素进行选择（多个上面3种表达式）

层叠选择器

语法	说明
$(“ancestor descendant”)	后代选择器
$(“ancestor>descendant”)	子选择器
$(“prev~siblings”)	兄弟选择器

属性选择器

根据元素的属性值来选择元素的选择器表达式。

语法	说明
$(“selector[attribute=‘value’]”)	选中属性值等于具体值的组件
$(“selector[attribute^=‘value’]”)	选中属性值以某值开头的组件
$("selector[attribute$("selector[attribute=‘value’]")	选中属性值以某值结尾的组件
$(“selector[attribute*=‘value’]”)	选中属性值包含某值的组件

位置选择器（不常用，仅了解）

通过位置获取指定元素，例如“获取第3个元素”。

语法	说明
$(“selector:first”)	获取第一个元素
$(“selector:last”)	获取最后一个元素
$(“selector:even”)	获取偶位置的元素（从0开始，0是偶数）
$(“selector:odd”)	获取奇位置的元素（从0开始，0是偶数）
$(“selector:eq(n)”)	获取指定位置的元素（从0开始，0是偶数）

表单选择器（不常用，仅了解）

获取表单元素的简化形式，例如“获取所有文本框”。

语法	说明
$(“selector:input”)	获取所有输入元素
$(“selector:text”)	获取文本框
$(“selector:password”)	获取密码框
$(“selector:submit”)	获取提交按钮
$(“selector:reset”)	获取重置按钮
…	…

操作元素属性

方法名	说明	示例
attr(name|properties|key)	获取或设置元素属性	$(“a[href*=‘163’]”).attr(“href”,“http://www.163.com/”);
removeAttr(name)	移除元素指定属性	$(“a”).removeAttr(“href”);

操作元素的CSS样式

方法名	说明	示例
css()	获取或设置匹配元素的样式属性	$(“a”).css({“color”:“red”,“font-weight”:“bold”});
addClass()	为每个匹配的元素添加指定的类名	$(“li”).addClass(“highlight”);
removeClass()	从所有匹配的元素中删除全部或者指定的类	$(“p”).removeClass(“myclass”);

设置元素内容

方法名	说明	示例
val()	获取或设置输入项的值	$(“input[name=‘uname’]”).val(“admin”);
text()	获取或设置元素的纯文本（显示内容不转义，获取转义）	$(“span.myclass”).text(“test”);
html()	获取或者设置元素内部的HTML文本（显示转义，获取不转义）	$(“span.myclass”).html(“test”);
append()	把数据追加到最后	$("#liebiao").append(" "+json+"");

事件处理方法

方法名	说明	示例
on(“click”,function)	为选中的页面元素绑定单击事件	$(“p.myclass”).on(“click”,function(){});
click(function)	是绑定事件的简写形式	$(“span”).click(function(){})
event	事件对象，包含了事件的具体信息（如按下哪个键等）	$(“input”).keypress(function(event)){}

常用事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click（单击）	keypress（按下弹起）	submit（提交）	load（加载时）
dblclick（双击）	keydown（按下）	change（输入项内容变化）	resize（尺寸变化时）
mouseenter（鼠标移入）	keyup（弹起）	focus（输入项获得焦点）	scroll（滚动时）
mouseleave（鼠标移出）		blur（失去焦点）	unload（窗口关闭）
mouseover（鼠标移动）

页面就绪函数

页面就绪函数是指在页面加载完成后执行的函数。

• 语法1: $(document).ready(function)
• 语法2：$(function)

Ajax基础

Ajax简介

什么是Ajax？

Asynchronous JavaScript And XML（异步的JavaScript和XML）,Ajax的特点是可以在不刷新页面的前提下，进行局部更新。

（Ajax的逻辑就是：把前端数据传到后台，后台处理后把需要传回的数据转换为JSON字符串并传给前端，前端再处理传回的JSON字符串即可）

通常ajax和JQuery配合使用。

Ajax的具体实现

方法一：通过XmlHttpRequest对象实现

1. 创建XmlHttpRequest对象
2. 发送Ajax请求
3. 处理服务器响应

不同版本创建XmlHttpRequest的方式不同

<!--以下代码可以通用在新老版本-->
var xmlhttp;
if(window.XMLHttpRequest){
	//IE7+,Firefox,Chrome,Opera,Safari浏览器存在XMLHttpRequest对象
	xmlhttp=new XMLHttpRequest();
}
else{
	//IE6,IE5浏览器没有XMLHttpRequest对象
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

根据服务器响应状态进行下一步处理

xmlhttp.onreadystatechange=function()
{
    //响应已被接收且服务器处理成功时才执行
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        //获取响应体的文本
        var responseText = xmlhttp.responseText;
        //对服务器结果进行处理
        //...具体执行内容...
    }
}

方法二：JQuery提供的Ajax简写

和方法一的写法不同，方法二的实现代码更加简洁。

实现流程：

1. 使用$.ajax({})语句实现ajax。
2. 在内部添加设置项（如url、type、dataType和success等）
3. 前端页面通过Ajax提交内容到后台，后台处理后返回对应格式的数值（根据前端ajax里dataType数值的值来决定返回的格式）。
4. 如果前面流程执行成功，则在把返回的内容放在success中执行下一步操作。如果失败则把返回内容放在error里执行下一步操作。

案例

为id=yuangong的标签添加点击事件。点击标签后通过ajax传递内容，访问地址为url，提交类型为get，数据内容为data，服务器返回值的类型为dataType，成功后执行success里的内容。

<script type="text/javascript">
$(function(){
    $("#yuangong").click(function(){
    	$("#liebiao").text("");
    	$.ajax({
    		"url":"/JQueryAjax/list",
    		"type":"get",
    		//下面这种形式也可以
    		//"data":{"id":"abc","group":"123"},
    		"data":"id=yuangong",
    		"dataType":"json",
    		"success":function(json){
    			for(var i=0;i<json.length;i++){
    				$("#liebiao").append("<br>"+json[i]+"</br>");
    			}
    		}
    	})
    });
})

案例1——访问html页面自动加载ajax获得数据

• 该案例实现访问cascade.html页面，就会自动加载ajax代码，ajax代码会访问后端/ajax/channel，后端处理之后返回数据给前端，前端把数据处理后再展现出来。
• cascade.html前台页面，关键部分代码：

  <head>
  <script type="text/javascript">
  $(function(){
  	$.ajax({
  		"url" : "/ajax/channel",
  		"data" : {"level" : "1"},
  		"type" : "get" , 
  		"dataType" : "json" , 
  		"success" : function(json){
  			console.log(json);
  			for(var i = 0 ; i < json.length ; i++){
  				var ch = json[i];
  				$("#lv1").append("<option value='" + ch.code + "'>" + ch.name + "</option>")
  			}
  		}
  	})
  })
  </script>
  </head>
  

• ChannelServlet.java后端代码，使用servlet实现访问控制。后端处理比较简单，只需要将要返回的内容以key:value的形式编写，然后转换为字符串，再把字符串返回给前端即可。

  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  	String level = request.getParameter("level");
  	List chlist = new ArrayList();
  	if(level.equals("1")) {
  		chlist.add(new Channel("姓名" , "张三"));
  		chlist.add(new Channel("姓名" , "李四"));
  	}else{
  		chlist.add(new Channel("姓名" , "汤姆"));
  		chlist.add(new Channel("姓名" , "杰克"));
  	}
  	String json = JSON.toJSONString(chlist);
  	response.setContentType("text/html;charset=utf-8");
  	response.getWriter().println(json);
  }
  

案例2——点击html页面中的标签触发ajax，实现局部刷新

• 该案例实现点击id=1v1的标签后，触发js方法，执行ajax向后台/ajax/channel发送数据，后端处理完毕后返回数据，前端接收到数据后进行处理然后展示。
• cascade.html前台页面，关键部分代码：

  <head>
  <script type="text/javascript">
  $(function(){
  	$("#lv1").on("change" , function(){
  		var parent = $(this).val();
  		console.log(parent);
  		$.ajax({
  			"url" : "/ajax/channel" , 
  			"data" : {"level" : "2" , "parent" : parent},
  			"dataType" : "json" , 
  			"type" : "get" ,
  			"success" : function(json){
  				console.log(json);
  				//移除所有lv2下的原始option选项
  				$("#lv2>option").remove();
  				for(var i = 0 ; i < json.length ; i++){
  					var ch = json[i];
  					$("#lv2").append("<option value='" + ch.code +"'>" + ch.name + "</option>")
  				}
  			}
  		})
  	})
  })
  </script>
  </head>
  

• ChannelServlet.java后端代码，使用servlet实现访问控制。后端处理比较简单，只需要将要返回的内容以key:value的形式编写，然后转换为字符串，再把字符串返回给前端即可。

  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  	String level = request.getParameter("level");
  	String parent = request.getParameter("parent");
  	List chlist = new ArrayList();
  	if(level.equals("1")) {
  		chlist.add(new Channel("姓名" , "张三"));
  		chlist.add(new Channel("姓名" , "李四"));
  	}else if(level.equals("2")) {
  		if(parent.equals("en")) {
  			chlist.add(new Channel("姓名" , "汤姆"));
  			chlist.add(new Channel("姓名" , "杰克"));
  		}else if(parent.equals("rus")){
  			chlist.add(new Channel("姓名" , "亚历山大"));
  			chlist.add(new Channel("姓名" , "马克西姆"));
  		}
  	}
  	String json = JSON.toJSONString(chlist);
  	response.setContentType("text/html;charset=utf-8");
  	response.getWriter().println(json);
  }
  

Ajax的相关知识

XMLHttpRequest相关（较复杂的AJAX实现方法）

XMLHttpRequest类
直接在html中使用如下方法即可实现对应功能。

方法名称	说明	示例
xmlhttp.open()	设置请求地址。参数分别代表：请求地址链接，请求方式，是否异步	xmlhttp.open(“GET”,"/ajax/cs?flag=1",true)
xmlhttp.send()	向目标地址发送请求
xmlhttp.onreadystatechange	每当readyState发生改变时，就会触发该事件	xmlhttp.onreadystatechange=function(){}
xmlhttp.readyState	反应当前XMLHttpRequest的状态
xmlhttp.status	服务器响应状态码，200成功，404未找到

readyState值	说明
readyState=0	请求未初始化
readyState=1	服务器连接已建立
readyState=2	请求已被接收
readyState=3	请求正在处理
readyState=4	响应文本已被接收

JQuery提供的Ajax简写（推荐的AJAX实现方法）

简写Ajax	说明
$.ajax()	调用ajax方法
$.get()	发送Get方式Ajax请求
$.post()	发送Post方式Ajax请求
$.ajaxSetup()	设置Ajax全局默认值

常用属性	说明
url	发送请求地址
type	请求类型 get | post
data	向服务器传递的参数
dataType	服务器响应的数据类型 text | json | xml | html | jsonp| script
success	接收响应时的处理函数
error	请求失败时的处理函数