jQuery和Ajax学习笔记
Ajax介绍
Asynchronous Javascript And XML(异步的JavaScript和XML)
Ajax可以在不刷新页面的前提下，进行页面局部更新
Ajax不是新的技术，Ajax并不是W3C的标准。
Ajax的使用流程：
1、创建XmlHttpRequest对象
2、发送Ajax请求
3、处理服务器响应。
创建XMLHttpRequest对象
XMLHttpRequest用于在后台与服务器交换数据，是AJAX的核心。
XMLHttpRequest并不是W3C的标准，不同浏览器的创建方式不同
--->>>创建XMLHttpRequest对象
在html页面的script标签下使用 new XMLHttpRequest();来创建
var xmlhttp = new XMLHttpRequest(); //返回一个XMLHttpRequest对象
//使用代码如下：
var xmlhttp; //创建变量；
if(window.XMLHttpRequest){
//支持新版本的大部分浏览器
xmlhttp = new XMLHttpRequest();
}else{
//对比较老旧的IE5 IE6支持。
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
发送Ajax请求
xmlhttp.open()用于创建请求。
xmlhttp.send() 用于发送请求。
//创建请求
xmlhttp.open("GET","http://localhost/test?name=admin",true);
//发送到服务器
xmlhttp.send();
//处理服务器响应
xmlhttp.onreadystatechange 事件用于监听AJAX的执行过程
xmlhttp.readyState属性说明XMLHttpRequest当前状态。
readyState值 说明
readyState = 0 请求未初始化
readyState = 1 服务器连接已建立
readyState = 2 请求已被接受
readyState = 3 请求正在被处理
readyState = 4 响应文本已被接受
处理服务器响应
xmlhttp.status属性服务器响应状态码，200：成功，404：未找到...
标准的处理函数如下：
xmlhttp.onreadystatechange = function() //核心事件
{ //响应已被介绍且服务器处理成功时才能执行
if(xmlhttp.readyState == 4&&xmlhttp.status ==200)
{
//获取响应文本
var = responseText = xmlhttp.responseText;
//对服务器结果进行处理
........
//处理：例如将内容更新到一个div块当中
document.getElementById("divContent").innerHTML = responseText;
}
}
注意：对于使用Ajax进行前后端通讯的时候，我们的servlet再处理的过程中，
如果前面是ajax进行请求发送的话，在我们的servlet中，不在进行任何页面
的跳转，而是直接返回产生的信息或者用户所需要的数据。
利用Ajax实现新闻列表
首先创建一个News类，包含四个字段：title,date,source,content;
在Servlet中实例化News对象，然后存储在列表当中，引入FastJson
调用JSON.toJSONString(list_name);将列表转化为JSON对象的字符串
在news.html中，利用ajax，就是上面描述的创建一个请求，将Servlet
中的字符串进行获取，在js中将字符串转化为json对象。
var str = xmlhttp.responseText;
var json = JSON.parse(str); //将字符串转化为json对象。
var xmlhttp; //定义变量
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject();
}
xmlhttp.open("GET","/ajax/news_model",true);
xmlhttp.send();
var html = "";
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var text = xmlhttp.responseText;
var json = JSON.parse(text);
for(var i=0;i"
html += ""+json[i].date+";"+json[i].source+json[i].content+"
"
html += "
"
}
}
document.getElementById("container").innerHTML = html;
}
同步与异步的区别
在open()方法中的第三个参数设置为true时，是进行异步处理
false代表同步执行。
在进行同步处理时，当send()函数发送了请求时，代码不会继续向下执行，
它只会等待服务器响应有了结果菜回继续向下执行，如服务器一直出于阻塞
状态，那么它也会一直处理阻塞状态。下面的代码将不会被执行。
而异步时，需要将第三个参数设置为true，它是指程序调用send()函数时，它
继续往下执行，而不进行等待，而是通过触发onreadystatechange事件监控服务器
的状态参数进而返回服务器返回的结果。
jQuery对Ajax的支持
jQuery对Ajax进行封装，提供了$.ajax()方法
语法：$.ajax( options ); 为其传递一个json的对象。
常用设置项 说明
url 发送请求地址
type 请求类型：POST | GET
data 向服务器传递参数
dataType 服务器响应的数据类型
text | json | xml | html | jsonp | script
success 接受响应时的处理函数
error 请求失败时的处理函数
如何使用呢？
请看下面这个例子
html页面的body下有一个div块，id取名为container
3-5 Ajax函数的详细说明
//error用于处理当请求出现异常时的情况
"error" : function( xmlhttp , errorText ){
console.log(xmlhttp);
console.log(xmlhttp);
if( xmlhttp.status == "405" ){
alert("无效请求");
}else if (xmlhttp.status == "500" ){
alert("服务器内部出错");
}else if(xmlhttp.status == "404"){
alert("文件丢失或者无效的url");
}else{
alert("其它的异常");
}
}
有一点需要说明的是：
data传递多个参数的时候，可以使用json格式进行输入，例如
"data":{"t":"toibe", "abc":"qq" , "cc":"123" }
//但实际代码在运行时，还是会转成是如下的格式：
t=toibe&abc=qq&cc=123;
jQuery与Ajax
了解jQuery 3 的基本使用方法
掌握Ajax处理流程与实现流程
掌握jQuery中Ajax方法的使用
JavaScript库
为了简化JavaScript开发，第三方厂商开发了JavaScript库。
主流的JavaScrip库: jQuery Vue.js AngularJS React …
jQuery是一个轻量级JS库，使用十分简单。
jQuery的核心是选择器，用于获取当前页面的元素。
jQuery提供了大量的高效方法，开发速度大幅提升。
jQuery下载与安装
jQuery官网：jquery.com , 最新版本：3.3.1
jQuery采用独立JS文件发布：jequery -3.3.1.js
要想使用jQuery，就必须在当前页面引入jQuery库。
//jquery的选择器方法
//前面的$("a")称为选择器表达式
// "hightlight"是设置好的CSS样式
$("a").addClass("highlight");
//下面这条语句的作用就是将所有的带有"highlight"的css样式的类全部移除
$("*").removeClass("highlight");
Web页面开发的两个要素
<>在使用HTML开发页面时，有两个基本点
<> 选择HTML页面上在哪些元素
<> 在这些元素上做哪些动作
jQuery选择器
什么是jQuery选择器？
jQuery选择器就是用于选中需要操作的页面元素。
<> 语法1：jQuery（选择器表达式）
<> 语法2：$(选择器表达式) //两者等价
$ 与 jQuery 是相同的含义
基本选择器表达式的使用
基本选择器表达式是jQuery 最基础也是最常用的选择器表达式。
四种最常用的选择器的使用方法。
语法 说明
$("#id") ID选择器，指定id元素的对象
$("标签") 元素选择器，选择指定标签名的选择器
$(".class") 类选择器，选中拥有指定css类的元素
$("S1,S2,SN") 组合选择器，对元素进行组合。
层叠选择器
<>层叠选择器是根据元素的位置关系来选取元素的选择器表达式
语法 说明
$("ancestor descendant") 后代选择器
$("ancestor>descendant") 子选择器
$("prev ~ siblings ") 兄弟选择器 //它只会选择在它之后的兄弟节点
属性选择器
属性选择器是根据元素的属性值来选择元素的选择器表达式
语法 说明
$("selector[attribute=value]") 选中属性值等于具体值的组件
$("selector[attribute^=value]") 选中属性值以某值开头的组件
$("selector[attribute$=value]") 选中属性值以某值结尾的组件
$("selector[attribute*=value]") 选中属性值包含某值的组件
//后面三个是模糊匹配
//知识点：属性选择器只会选择那些明确的写出了属性的选项，对于
未标出的明确属性的标签，则不会被选中
例如： //虽然什么都不写会被系统默认为文本框，但是却不能被
$(input[type="text"])这的表达式所选中。
位置选择器
位置选择器是通过位置获取指定的元素，例如"获取第三个元素"
语法 说明
$("selector:first") 获取第一个元素
$("selector:last") 获取最后一个元素
$("selector:odd") 获取偶位置的元素（从0开始）
$("selector:eq(n)") 获取奇位置的元素（从0开始）
$("selector:even") 获取指定位置的元素（从0开始）
表单选择器
表单选择器是获取表单元素的简化形式，例如：获取所有文本框
语法 说明
$("selector:input") 获取第一个元素
$("selector:text") 获取最后一个元素
$("selector:odd") 获取即奇位置的元素（从0开始）
$("selector:eq(n)") 获取指定位置的元素（从0开始）
$("selector:even") 获取偶位置的元素（从0开始）
:password :submit :reset 表单选择器
操作元素的属性
1、attr(name|properties|key) -获取或设置元素属性
2、removeAttr(name) -移除元素属性
示例：var = href_attr = $("a[href*='163'").attr("href");
//表示获取a标签下href内容包含‘163’的元素然后获取其属性
//如果attr( arg1 )中只有一个参数，那么代表的是获取属性
说明：如果是有多个标签被选择器选中，那么使用attr( )获取属性的时候只返回
第一个元素的属性值。
例如：$("a").attr("href"); //假设有多个标签被选中，那么只返回第一个元素的href
$("a[href*='163']").attr( "href" , "http://www.163.com" )
//如果attr( arg1,arg2 )中有两个参数，那么代表的是设置属性
获取属性值的时候，它会返回第一个符合要求的属性值。
而设置属性值的时候，它是将所有选中的元素的属性值进行赋值。
移除元素属性：使用removeAttr(name);
//作用就是将选中的所有元素的name属性移除
例如：$("a").removeAttr("href"); //这句话的含义是移除所有a标签的href。
将会使得所有的a链接全部失效，变成普通的文本。
操作元素的CSS样式
css() - 获取或设置匹配元素的样式属性
addClass() - 为每个匹配的元素添加指定的类名
removeClass() - 从所有匹配的元素中删除全部或者指定的类。
举例说明：$("a").css("color","red"); //为所有的a标签设置字体颜色为红色
如果要设置对象的多个css样式该怎么办呢？可以在css()函数参数中使用json
格式的数据，如下面的这个例子：
$("a").css({ "color":"blue", "font-size":"25px", "font-style":"italic" });
为元素添加css类，假设在css中设置了两个样式如下。
.myclass { content... } .highlight { content... }
为选择的元素添加类属性：$("a").addClass("myclass"); //添加单个
$("a").addClass("myclass highlight") //添加多个，用空格隔开。
移除类属性：使用removeClass() 方法
例如：$("a").removeClass("myclass");
小结：本节使用了三个相关的css的方法
css() 用于获取或者设置相关的css属性，addClass()用于对指定的元素添加css类
removeClass()代表移除元素的指定的类。
设置元素内容
<> val() -获取或设置输入项的值
<> text() - 获取或设置元素的纯文本
<> html() - 获取或设置元素内部的HTML
val()函数正对表单项元素
val()函数示例：
$("input[name='uname']").val("adminstrator"); //为文本框设置初始值
var str = $("input[name='uname']").val(); //如果什么都不写，则表示获取值。
text()函数用于为元素设置内容。
例如：$("span.myclass").text("这是一段新的内容。");
//函数的意思是为选择的元素设置新的内容，但其中的html标签并
不会被浏览器解析，而会原样的进行输出。
$("span.myclass").text("这是一段新的内容");
//会将内容中的html标签原封不动的传递给浏览器，从而被浏览器解析。
text与html方法最大的区别在于对文本中的html标签是否进行转义。
设置的时候需要对括号内传递需要更新的文本参数，当需要获取元素的内容
时，则不为函数设置任何的参数。
注意：在进行获取内容的时候，若使用.html() 来获取，则会把内容中带有标签
的内容也输出。若是使用 .text()方法，则它会自动的屏蔽掉所有的html标签，仅
输出内容。
jQuery事件处理办法
<> on('click' , function) - 为选择的页面元素绑定单击事件
<> click( function ) -是绑定事件的简写形式。 //它与上面完全等价
<> 处理方法中提供了even参数包含了事件的相关信息。
jQuery常用事件
鼠标事件 键盘事件 表单时间 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
mouseover
如下面这个例子：
$("p.myclass").on("click",function(){
//$(this)是指当前事件产生的对象
$(this).css("background-color","yellow");
});
下面是另一个例子：
$("span.myclass").click( function(){
$(this).css("background-color","lightgreen");
});
event可以获取事件的细节，具体例子如下：
$("input[name='uname']").keypress(function( event ){
if( event.keyCode==32 ){
$(this).css("color","red");
}
}); //event获取键盘按下值的对象