AJAX+JQuery
AJAX
1 AJAX基础
1.1 基本概念
>AJAX：Asynchronous Javascript And Xml(异步的Javascript和Xml)
>为了解决传统的web应用当中"等待-响应-等待"的弊端而创建的一种技术
ajax是一种用来改善用户体验的技术，其实质是利用浏览器内置的一个特殊的对象(
XMLHttpRequest对象)向服务器发送请求，在发送请求的同时，浏览器并不会销毁当前页
面，用户仍然可以对当前页面做其它操作，服务器发送回来的一般也不是一个完整的新的
页面，而是部分的数据(文本或xml文档)，在浏览器端，可以利用这些数据部分更新当前
页面。整个过程，页面无任何的刷新，不打断用户的操作
微软中叫ActiveXOject
1.2 获取XMLHttpRequest对象
因为XMLHttpRequest并没有标准化，所以，要区分浏览器
function getXhr(){
var xhr=null;
if(window.XMLHttpRequest){
//非IE浏览器
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
1.3 AJAX对象：XMLHttpRequest对象的属性
>onreadystatechange:注册一个监听器，即绑订一个事件处理函数，
该函数用来处理readystatechange事件
当readyState属性值发生改变就会产生该事件
>responseText：获得服务器返回的文本
>responseXML：获得服务器返回的XML dom对象
>status：获得状态码
>readyState：返回该对象与服务器通讯的状态，返回值是一个Number类型的值
0 (未初始化) 对象已建立，但是尚未初始化(尚未调用open方法)
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用
3 (数据传送中) 已接收部分数据
4 (响应结束) 接收了所有的数据
1.4 AJAX编程步骤
>获得XmlHttpRequest对象。该对象由浏览器提供，但是该类型并没有标准化
比如 var xhr=getXhr();
>使用XmlHttpRequest向服务器发请求
>xhr.open(请求方式，请求地址，同步还是异步);
注意：
>请求方式：'get'或者'post'
>请求地址：如果是get请求，需要将请求参数添加到请求地址的后面
如果是post请求，请求地址中不需要添加参数
>同步还是异步：true为异步，false为同步
同步是指浏览器会锁定当前页面，用户不能做其他操作，需要等待服务器
的响应发送回来
>xhr.onreadystatechange=f1;
>xhr.send(null); //get请求时参数在open中设置，所以这里设置Null
//post请求时参数在此设置
>此外，按照http协议要求，发送post请求时，要添加一个content-type消息头，
而默认情况下，ajax对象并不会自动添加这个消息头，所以，需要调用下面的
方法为其添加一个消息头
xhr.setRequestHeader('content-type',
'application/x-www-form-urlencoded')
>在服务器端，处理请求
跟以前相比，有一点区别就是一般不需要返回完整的页面，只需要返回部分数据
细节：out.println()
输出的内容中会包含两个字符"\n"，所以容易出一些敏感错误
用out.print()
>在监听器当中，处理服务器返回的响应
function f1(){
if(xhr.readyState==4){
var txt=xhr.responseText;
更新操作...
}
}
prototype.js 集成了一些常用的函数
jquery.js
js在客户端执行，jsp在服务端执行
1.5 编码问题
>如果采用post方式向服务器发送请求，浏览器内置的ajax对象都会使用"utf-8"对请
求中的数据进行编码；在服务器端，需要使用
request.setCharacterEncoding("utf-8");去解码即可。
火狐会在消息头中自动添加charset=utf-8 因此用火狐不添加也不会乱码
>如果采用get方式向服务器发送请求，IE会使用"gbk"/"gb2312"对请求中的数据进行
编码，而firefox会使用"utf-8"来编码。
服务器默认使用iso-8859-1去解码，所以会产生乱码问题
解决方式：
>找到tomcat的server.xml文件(tomcat_home/conf/server.xml)。
在配置端口的标签
对于get请求中的数据使用"utf-8"解码。(只对get请求有效)
>对请求地址使用encodeURI()函数进行处理，该函数的作用是：对请求地址中
的中文进行"utf-8"编码
1.6 缓存问题
>在使用IE浏览器时，如果使用get方式发送请求，浏览器会将数据缓存起来。这样，
当再次发送请求时，如果请求地址不变，IE不会真正的向服务器发请求，而是将之
前缓存的数据显示给用户
解决方式
>使用post方式
>使用get方式的话可以在请求地址后面添加一个随机数
1.7 优点
>页面无刷新，不打断用户的操作，用户体验度高
>按需获取数据
>标准化技术，不需要用户下载任何第三方插件
小知识
URI URL的区别
URI Uniform Resource Identifier:统一资源标识符，用来唯一的标识一个资源
URL Uniform Resource Locator:统一资源定位器，它是一种具体的URI。即URL可以用来
标识一个资源，而且还指明了如何locate这个资源
URL是一种具体的URI，它不仅唯一标识资源，而且还提供了定位该资源的信息。
URI是一种语义上的抽象概念，可以是绝对的，也可以是相对的，而URL则必须提供足够的
信息来定位，所以是绝对的，而通常说的relative URL,则是针对另一个absolute URL
本质上还是绝对的
2 JSON
2.1 基本概念
JSON：JavaScript Object Notation 是一种轻量级的数据交换技术标准，一般用于
浏览器与服务器之间的数据转换。
json技术借鉴了javascript创建对象的一种语法(javascript object notation)，
所以将该技术命
名为json
数据交换：
将要交换的数据转换成与平台无关的标准的数据格式发送给另外一方
轻量级：
相对于XML，使用JSON有两个优势，一是数据量更小，另外，解析速度更快
https://www.wendangku.net/doc/756743635.html,
2.2 基本语法
>使用json表示一个对象
{属性名称：属性值，属性名称：属性值...}
注意：
>属性名称必须用引号(单引号 双引号都行)
>属性值的数据类型可以是 string number boolean null object
>属性值如果是string 必须用引号
比如 {'name':'zs','age':22}
>使用json表示一个对象组成的数组
[{},{},{}...]
比如 [{'name':'zs','age':22},{'name':'ls','age':24}]
2.3 使用json进行数据交换
>java对象转换成json字符串
可以使用json官方提供的api https://www.wendangku.net/doc/756743635.html,
使用json的jar包内的API
JSONObject jsonObj=JSONObject.fromObject(Object obj);
String jsonStr=jsonObj.toString(); //实现将java对象转换成json字符串
JSONArray obj=JSONArray.fromObject(List list);
String jsonArr=obj.toString(); //实现将java集合转换成json字符串数组
>json字符串转换成javascript对象
可以使用prototype提供的evalJSON()函数
prototype是一个js文件，提供了很多有用的函数
> $(id):相当于document.getElementById(id);
> $F(id):相当于document.getElementById(id).value;
> $(id1,id2,id3...):
使用id1 id2 id3分别去查找对应的节点，返回由这些节点组成的数组
> strip():除掉字符串两端的空格
> evalJSON():将json字符串转换成javascript对象
2.4 使用JSON时日期处理
>写一个转换器
写一个java类DateProcessor，实现JsonValueProcessor接口
>实现两个process方法，按照自己的要求，定义转换规则
>创建JsonConfig对象，使用该对象注册转换器
DateProcessor processor=new DateProcessor();
processor.setPattern("yyyy-MM-dd");
JsonConfig config=new JsonConfig();
config.registerJsonValueProcessor(Date.class, processor);
> JSONArray.fromObject(srcObj,JsonConfig);
2.5 发送同步请求
>xhr.open('get/post','请求地址',false);
>同步请求的特点
如果发送的是同步请求，浏览器不会向下执行以下的代码(send方法之后的代码)，
会等待服务器的响应，表现为当前页面被锁定，用户不能做其他操作
3 JQuery
3.1 基本概念
>JavaScript的框架(.js文件)
它使用选择器(模仿css中的选择器)查找要操作的节点，并且将查找到的节点封
装成一个JQuery对象，然后调用JQuery对象的属性或者方法来实现对底层节点的操
作，这样做的目的是：解决浏览器的兼容问题；另外，代码会得到简化
JQuery设计思想是将原始的dom对象封装成一个JQuery对象，通过调用JQuery
对象的方法来实现对原始的dom对象的操作。这样设计的目的是：是为了更好的兼容
不同的浏览器，简化代码。
3.2 编程步骤
>使用JQuery提供的选择器找到节点，一般情况下，JQuery会将找到的节点封装成
JQuery对象
>调用JQuery对象提供的方法
3.3 JQuery对象与DOM对象的转换
>dom对象转换成JQuery对象
使用 var $obj=$(dom对象)
dom对象以#id来表示
注：变量以$开头只是一个习惯，标注此变量为jquery对象
>JQuery对象转换成dom对象
使用var obj=$obj.get(0)或者 var obj=$obj.get()[0]
3.4 同时使用jqury和prototype
两者有共同的函数$()，共用时会有覆盖问题
使用JQuery.noConflict()函数，为JQuery的$函数提供一个别名
4 JQuery选择器
4.1 基本概念
JQuery选择器模仿css选择器的语法，其作用是，查找符合选择器要求的节点
可以解决大部分浏览器的兼容问题
如IE浏览器中的table中只能为
4.2 种类
>基本选择器
>#id 根据给定的id匹配元素
若选择器中包含特殊字符，可以用 \\ 转义
如id=foo:bar 可以写为$('#foo\\:bar')
>.class 根据给定的类匹配元素，可以一次修改多个元素的属性
>element 根据给定的元素名匹配所有元素 div p...
>selector1,selector2..selectn
将每一个选择器匹配到的元素合并后一起返回。
可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
>* 匹配所有元素 多用于结合上下文来搜索。
>层次选择器
>select1 select2 在给定的祖先元素下匹配所有的后代元素
如 $('#d1 div') 表示找到d1元素下匹配的所有div元素
>select1>select2 在给定的父元素下匹配所有的子元素(只查找子节点)
>select1+select2 匹配所有紧接在 select1 元素后的 select2 元素 同辈后辈
>select1~select2 匹配 select1 元素之后的所有 select2 元素(同辈)
>过滤选择器
>基本过滤选择器
> :first 匹配找到的第一个元素
> :last 匹配找到的最后一个元素
> :not(selector) 排除指定的元素 如not(#d1) 排除id为d1的元素
> :even 奇数行
> :odd 偶数行
> :eq(index) 等于 注意：下标从0开始
> :gt(index) 大于
> :lt(index) 小于
> :header 匹配所有如h1 h3...h6的标题元素
> :animated 匹配所有正在执行动画效果的元素
如：只有对不再执行动画效果的元素执行一个动画特效
$("#run").click(function(){
$("div:not(:animated)").
animate({ left: "+=20" }, 1000);
});
>内容过滤选择器
> :contains(text) 匹配包含给定文本的元素
> :empty 匹配所有不包含子元素或者文本的空元素
> :has(selector) 匹配含有选择器所匹配的元素的元素
> :parent 匹配含有子元素或者文本的元素
>可见性过滤选择器
> :hidden 匹配所有不
可见元素，或者type为hidden的元素
$('div:hidden').css('display','block'); 显示隐藏的内容 或者
$('div:hidden').show('slow');
> :visible 匹配所有的可见元素
$('div:visible').css('display','none'); 隐藏显示的内容 或者
$('div:visible').hide('slow');
>属性过滤选择器
> [attribute] 匹配包含给定属性的元素
> [attribute=value] 匹配给定的属性是某个特定值的元素
> [attribute!=value]
匹配所有含有指定的属性，但属性不等于特定值的元素
>子元素过滤选择器 下标从1开始
> :nth-child(index/even/odd)
匹配其父元素下的第N个子或奇偶元素
':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。
:nth-child从1开始的，而:eq()是从0算起的！
可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)
:last-child 匹配最后一个子元素(每一个父元素)
:first-child 匹配第一个子元素(每一个父元素)
:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配
>表单对象属性过滤选择器
> :enabled 可用的
> :disabled 不可用的
> :checked 被选中的(单选 复选)
> :selected 被选中的(下拉)
val()函数相当于获取元素的value属性
>表单选择器
> :input 匹配所有 input, textarea, select 和 button 元素
> :text 匹配所有的单行文本框
> :pasword 匹配所有密码框
> :radio 匹配所有单选按钮
> :checkbox 匹配所有复选框 js中checked属性的值为true/false
> :submit 匹配所有提交按钮
> :image 匹配所有图像域
> :reset 匹配所有重置按钮
> :button 匹配所有按钮
> :file 匹配所有文件域
> :hidden 匹配所有不可见元素，或者type为hidden的元素
5 JQuery的DOM操作
5.1 查询
利用选择器查找到节点，通过选择器，找到某个节点之后，可以查询节点的html内容、
文本内容、值以及属性
>text()
输出或者设置节点之间的文本，text方法相当于dom节点的innerText属性
结果是由所有匹配元素包含的文本内容组合起来的文本。
这个方法对HTML和XML文档都有效。(只取文本)
>html()
输出或者设置节点之间的html内容，html方法相当于dom节点的innerHTML属性
这个函数不能用于XML文档。但可以用于XHTML文档。(内部节点也会取出)
>val()
相当于dom节点的value属性,val()是提取节点的值，val(value)为为节点设置值
此外，可以用此方法获取下拉列表的值
>attr()
输出或者设置节点的属性值
如 $('#d1').attr('id') 获取id的值
$('#d1').attr('class','s1') 为id为d1的节点添加class属性为s1
除此之外，这四个方法还可以设置对
应的值
5.2 创建
>创建节点 $(html)
如 var $div=$('
5.3 添加节点
> append() 向每个匹配的元素内部追加内容(作为最后一个子节点)
注：函数内部本身封装有remove()函数，所以在添加其他元素内部的对象时会删除
> prepend() 向每个匹配的元素内容前置内容(作为第一个子节点添加)
> after() 在每个匹配的元素之后插入内容(作为下一个兄弟添加)
> before() 在每个匹配的元素之前插入内容(作为上一个兄弟添加)
此两步可简写为一步 如 $('body').append('
5.4 删除节点
> remove() 直接删除节点(删除匹配的所有节点)
remove(selector)
> empty() 清空节点 相当于将匹配节点的innerHTML属性清空 节点还在
5.5 将js代码与html分开
将函数定义到.js文件
window.onload=function(){}; 等价于
$(function(){});
整个页面加载完毕后会产生load事件，即调用此处定义的函数
$(dom对象)：把dom对象封装成了JQuery对象
this表示绑定了事件的那个dom对象
5.6 复制节点
clone() 不复制行为
clone(true):使复制的节点也具有行为(将事件处理代码一块复制)
5.7 属性操作
>读取:attr('');
>设置:attr('','');
>设置多个:attr({"":"","":""});
比如 $obj.attr({"id":"d1","class":"s1"})
>删除:removeAttr('')
5.8 样式操作
>attr('class','') 或者 attr('style','') 获取和设置样式
>addClass('') 追加样式
>removeClass('') 移除
>toggleClass() 切换样式 有样式就删除，没样式就添加
>hasClass('') 是否有某个样式
>css('') 读取
css('','') 设置一个样式
css({'':'','':''}) 设置多个样式
5.9 遍历节点
>children() 只考虑子元素，不考虑其他后代元素
还可以加上选择器使用 children('div') 找到子元素中的所有div元素
>next() 下一个兄弟
加上选择器时，不满足选择器则没有任何影响
>prev() 上一个兄弟
>siblings() 其他兄弟(除自己之外的)
也可以加上选择器
>find(selector) 从当前节点开始查找所有的后代(满足selector)
>parent() 父节点
6 JQuery事件
6.1 事件绑定
bind(type,fn) type:事件类型 fn:事件处理函数
可以通过判断浏览器类型，设置事件类型，解决浏览器兼容问题
6.2 绑订方式的简写形式
click(function(){});
6.3 合成事件
hover(enter,leave) 模拟光标悬停事件 两个参数为鼠标进入和离开时的函数处理过程
toggle(fn1,fn2...) 模拟鼠标连续单击事件 单击多次一次执行，到末尾循环
toggle() 切换元素的可见状态
如果元素是可见的则切换为隐藏，隐藏的切换为可见
minuui插件 jquery的二次开发
6.4 事件冒泡
指子节点产生的事件会依次向上抛给父节点
>获得事件对象
只需要给事件处理函数添加一个任意
变量即可，比如e
e不是真正的事件对象，而是对底层封装的事件对象的一个封装
click(function(event){});
事件对象的作用：
>通过事件对象找到事件源(即产生那个事件的节点)
一般浏览器:event.target IE浏览器:event.srcElement
>取消冒泡 event.cancelBubble=true;
>获取点击的坐标 e.clientX e.clientY
>停止冒泡
event.stopPropagation()
>停止默认行为
event.preventDefault()
>事件对象的属性
event.type:获得事件类型
event.target:获得事件源，返回的是原始的dom节点(dom对象)
event.pageX/pageY 点击坐标
>模拟操作
trigger(event)
比如 $('#username').trigger('focus') 使元素获得焦点
也可简写为 $('#username').focus()
7 JQuery动画
7.1
show() 显示
用法：show(速度[,回调函数])
速度可以使用"normal" "fast" "slow"，也可以用毫秒数。
回调函数会在整个动画执行完毕之后执行，可以不要
hide() 隐藏
fadeIn()
作用：通过改变元素的不透明度来实现显示和隐藏(IE不支持)
fadeOut() 改变不透明度
slideUp() 拉起(即隐藏)
作用：通过改变元素的高度来实现显示和隐藏 用法同show
slideDown() 放下(即显示) 改变元素的高度
animate(params,speed,[callback]) 自定义动画
params:是一个javascript对象，描述的是动画执行结束时的样式
speed:速度，单位是毫秒
callback:回调函数，会在动画执行完毕之后执行
执行这个函数之前常用stop(true)表示先清空之前积累的动画然后执行当前动画
8 类数组的操作
类数组：指的是JQuery选择器会将查找到的所有的dom对象封装成一个JQuery对象，将这些
dom对象称为类数组
$(选择器)操作返回的如果是一个数组，可以使用如下方法来操作
>length属性：获得JQuery对象包含的dom对象的个数
>each(fn(i))
循环遍历每一个元素，this代表被迭代的dom对象
$(this)代表被迭代的jquery对象
>eq(index) 返回index+1位置处的jquery对象
>index(obj) 返回下标 其中obj可以是dom对象也可以是jquery对象
>get() 返回dom对象组成的数组
>get(index) 返回第index+1个dom对象
9 JQuery对AJAX的支持
>load方法
作用：将服务器返回的数据直接添加到符合要求的dom对象上，
相当于obj.innerHTML=服务器返回的数据
用法：$obj.load(url[,请求参数]);
url是请求地址
请求参数：第一种形式 请求字符串 比如 'username=zs&age=32'
第二种形式 对象 比如{'username':'zs','age':32}
请求参数比较多时以对象的方式发送
注意：
>load方法如果没有参数，会使用get方法发请求；
如果有参数，会使用post方式发请求
>如果有中文参数值，load方法已经帮我们做了编码处理(utf-8)
>$.get()方
法
作用：向服务器发送get请求
用法:$.get(url[,data][,callback][,type])
>url:请求路径 data:请求参数，同load参数方法
>callback:回调函数，可以通过该函数来处理服务器返回的数据
格式：function(data,statusText)
其中，data可以获得服务器返回的数据
statusText是一个简单的字符串，描述服务器处理的状态
>type:服务器返回的数据类型，类型可以是:
html:返回的html内容
text:返回的是text
json:返回的是json字符串
xml:返回的是dom兼容的xml对象
script:返回的javascript
get请求时的缓存问题
ie浏览器，对于get请求，会缓存数据，
可参见工具--\>internet选项--\>常规--\>设置
如果采用$.get发送请求，就会有缓存问题。
解决方式,url地址后添加一个随机数或者采用post请求方式。
$.post() 格式同上
>$.ajax(options):options
> options是一个形如{key1:value1,key2:value2...}的js对象，
用于指定发送请求的选项
> 选项参数如下：
> url(string):请求地址
> type(string):GET/POST
> data(object/string):发送到服务器的数据
(这儿可以使用serialize()或者serializeArray()方法)
> dataType(string) :预期服务器返回的数据类型，一般有：
xml:返回XmlDocument对象（如果要处理，最好先将其包装成jQuery对象，
然后使用其相应的属性或者方法来处理，参见ajax_lab）。
html:
script:
json:
text:
> success(function):请求成功后调用的回调函数，有两个参数：
function(data,textStatus),其中，
data是服务器返回的数据，可以是html,text,jsonObj,xmlDoc
textStatus 描述状态的字符串。
> error(function):请求失败时调用的函数，有三个参数
function(XmlHttpRequest,textStatus,errorThrown)
其中xhr是底层的ajax对象(XMLHttpRequest)
textStatus,errorThrown这两个参数其中的一个可以获得底层的异常描述
> async: true(缺省)/false:当值为false时，发送同步请求
> 序列化元素：
作用：用于ajax请求中，给data赋值
> serialize()
将jquery对象包含的表单或者表单控件转换成查询字符串
根据控制的name属性作为参数名，value属性作为参数值发送给服务器
如
'data':'carName='+$('#s1').val() 等价于
'data':$('#s1').serialize()
> serializeArray()
转换为一个数组，每个数组元素形如{name:fieldName,value:fieldVal}的对象
如
'data':{'carName':$('#s1').val()} 等价于
'data':$('#s1').serializeArray()
注意：这两个方法只能用在表单或者表单控件中