jQuery+AJAX+JSON
jQuery
1. 什么是jQuery??
jQuery是一个优秀的JavaScript框架，一个轻量级的JavaScript类库。
jQuery的核心理念是Write less，Do more。
使用jQuery可以兼容各种浏览器，方便的处理HTML、Events、动画效果等，并且方便的为网站提供AJAX交互。
2.jQuery的特点：
利用选择器来查找要操作的节点，然后将这些节点封装成一个jQuery对象，通过调用jQuery对象的方法或者属性来实现对底层被封装的节点的操作。
好处：a、兼容性更好；b、代码更简洁
3.编程步骤：
step1、使用选择器查找节点
step2、调用jQuery的属性和方法
4.jQuery对象与DOM对象之间的转换
1. 什么是jQuery对象？？
jQuery对象是jQuery对底层对象的一个封装，只有创建了这个对象，才能使用类库中提供的方法。
2. DOM对象 ----> jQuery对象
DOM对象向jQuery对象的转变很容易，外面追加$和圆括号即可。
function f( ){
var obj = document.getElementById(‘d1’);
//DOM -> jQuery对象
var $obj = $(obj);
$obj.html(‘hello jQuery’);
}
3. jQuery对象 ----> DOM对象
jQuery对象向DOM对象转化，通过调用get方法加参数值0即可$obj.get(0)。
function f( ){
var $obj = $(‘#d1’);
//jQuery对象 -> DOM
var obj = $(obj).get (0);
obj.innerHTML = ‘hello jQuery’;
}
5. jQuery选择器
1. 什么是jQuery选择器？？
jQuery选择器是一种类似CSS选择器的特殊说明符号，能够帮助jQuery 定位到要操作的元素上，使用了选择器可以帮助HTML实现内容与行为的分离。只需要在元素上加上Id属性。
2. 选择器的种类
a、基本选择器
#id根据指定的ID匹配一个元素
.class根据指定的类匹配一个元素
element根据的指定的元素名匹配所有的元素
select1,select2,......将每一个选择器匹配到的元素合并后一起返回 *匹配所有元素
b、层级选择器
1. select1 空格 select2 查找指定元素的所有的后代
2. select1 > select2 查找子节点
3. select1 + select2 下一个兄弟
4. select1 ~ select2 下面所有的兄弟
c、过滤选择器
1. 基本过滤选择器
:first 获取第一元素
:last 获取最后一个元素
:not 排除选择器要求的元素
:even 匹配所有下标为偶数的元素
:odd 匹配所有下标为奇数的元素
:eq 匹配所有给定索引值的元素
:gt 匹配所有大于给定索引值的元素
:lt 匹配所有小于给定索引值的元素
2. 内容过滤选择器
:contains 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has 匹配含有选择器所匹配的元素的元素
:parent匹配含有子元素或者文本的元素
3. 可见性过滤选择器
根据元素在页面中的可见属性进行过滤，主要是对hidden属性和visible 属性的判断。
:hidden 匹配所有不可见元素，或者type为hidden的元素
:visible 匹配所有的可见元素
4. 属性过滤选择器
属性过滤器会对标记的属性进行判断，符合条件的元素会作为返回的对象。
[attribute] 匹配包含给定属性的元素。
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用。
5. 子元素过滤选择器
子元素过滤选择器会根据子元素的位置的数值来进行筛选。
:nth-child （index、enven、odd）匹配其父元素下的第N个子或奇偶元素。注意':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！
6. 表单对象属性过滤选择器
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select 中的option)
:selected 匹配所有选中的option元素
d、表单选择器
使用的规则和以上各选择器一致。$(“：input”)就会返回所有的input输入框，大多数情况下，表单选择器会和其他选择器进行配合来定位元素。
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的单行文本框
:password 匹配所有密码框
:radio 匹配所有单选按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图片
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有的文件域
:hidden 匹配所有不可见元素，或者type为hidden的元素
6.jQuery操作DOM-查询
1. html（） html()等价于innerHTML
读取或修改节点的HTML内容的属性和value值。与DOM对象的
innerHTML的作用一致。
2. text（） text()等价于innerText
读取或修改节点中的文本内容，会过滤掉标记内容，与innerText的作用基本一致，但innerText在不同浏览器中写法不同，在jQuery中则使用text（）方法即可。
3. val（）
读取或修改节点的value属性值，也就是针对表单元素中有value属性的哪些元素的操作。
4. attr（）
读取或设置修改节点的属性。这个方法会更宽泛一些，可以修改元素的任何属性。
7. jQuery操作DOM-创建、插入、删除
1. 创建DOM节点的语法
使用$符号将HTML标记的字符串文本括起来，即创建了DOM节点，如$（html）。大多数时候创建后的节点需要放入文档中，使用到后续的一些方法可以实现节点的插入简写形式
如 $(‘body’).append(‘
2. 插入DOM节点的方法
append方法会将DOM节点作为最后一个孩子节点添加进来
prepend方法将DOM节点作为第一个孩子节点添加进来
after方法将DOM节点作为下一个兄弟节点添加进来
before方法将DOM节点作为上一个兄弟节点添加进来
3. 删除DOM节点的方法
remove（）可以移除DOM，remove（selector）可以按选择器定位后删除，empty（）清空节点。
4.将js和html内容分离
$(fn);
注意：window.onload=function(){}等价于$(fucntion(){});但是内在的机制不相同。fn是一个函数，表示当整个页面记载完成之后就会执行fn。
8. jQuery操作DOM-复制节点
1.复制DOM节点的方法
clone（）方法和clone（true）都会实现复制，添加参数true的时候会将节点的行为也复制到新的对象之上。
9. jQuery操作DOM-属性操作
1. 属性操作的方法
读取属性使用attr（）方法，设置属性使用attr（‘’，‘’）方法。删除属性使用removeAttribute（‘’）方法。
10. jQuery操作DOM-样式操作
attr("class","")获取和设置
addClass("")追加样式
removeClass("")删除所样式
toggleClass("")切换样式
hasClass("")是否有某个样式
css("")读取css值
css("","")设置多个样式
11.jQuery操作DOM-遍历节点
childern()/childern(selector)只考虑直子节点
next()/next(selector)下一个兄弟的节点
perv()/perv(selector)上一个兄弟的节点
sibling()/sibling(selector)其他的兄弟
find(selector)查找满足选择器的所有的后代
parent()父节点，没有选择器
jQuery事件处理
1. 使用jQuery实现事件绑定
1. 使用jQuery实现事件绑定
$obj. bind(事件类型，事件处理函数)；
注意：为一个jQuery对象绑定单击事件的代码实现为 $obj.bind(‘click’,fn);也可以简写为 $obj.click(fn);
2. 获得事件对象event
$(fucntion(e){
e就是事件处理对象（jQuery对底层事件对象做了一个封装，简化代码）});
3. 事件对象的常用属性
a、找到事件源：
var obj = e.target
获取事件源使用 事件对象的target属性。
b、获取发生事件时的鼠标点击的坐标：
alert(e.pageX + ' ' + e.pageY);
获取发生事件时的鼠标坐标使用pageX和pageY属性。
c、禁止事件冒泡
e.stopPropagation();
2. 事件冒泡
子节点产生的事件会依次向上抛给相应的父节点
当事件发生时，会首先发送给最内层的元素，在这个元素获得响应机会之后，事件会向上冒泡给更外层的元素，及从内层向外层依次传递。
3. 合成事件
.hover（over，out）模拟鼠标悬停事件
它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
toggle（f1，f2，... ...）模拟连续单机事件
注意的是，通过jQuery这种方式触发事件时，不会发生事件传播；只会执行直接添加到元素的处理程序。
如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。
4.模拟操作
trigger（type，[data]）在每一个匹配的元素上触发某类事件。也就是提交第一个表单，但不用submit()的效果。
$('#username').trigger('focus');
简写$obj.focus();
jQuery动画
1. 显示隐藏的动画效果
.hide() 和 .show() 方法是对display的属性的操作。如果添加一个速度参数，就会产生动画效果。
2. 上下滑动式动画效果
$('div').slideDown(800);
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
$('div').slideUp('fast');
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
$('div').slideToggle(speed, [callback])
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
3. 淡入淡出式动画效果
如果针对一个元素，只是逐渐增大其不透明度，那么使用fadeIn （‘slow’）;fadeOut是逐渐减少不透明度，可以使用 /.fadeOut()
4. 自定义动画效果
用法：animate（{js对象}，执行时间，回调函数）；
js对象：{ }描述动画执行之后元素的样式
执行时间：毫秒数
callback回调函数：动画执行结束后要执行的函数
jQuery类数组
1. 什么是类数组
jQuery对象封装的DOM对象。
2. 类数组的操作
length属性：获得jQuery对象封装的dom对象的个数
each（fn）遍历类数组，fn用来处理DOM对象。在fn中this表示正在被遍历的那个DOM对象。fn函数可以添加一个参数i用于表示正在被遍历的DOM 对象的下标（从0开始）
eq(index)：将下标等于index的DOM对象取出来
get(index):获得下标为index的dom对象
get（）：返回一个DOM对象组成的数组
index（obj）：返回DOM或jQuery对象在类数组中的下标
jQuery对AJAX的支持
1. load（）方法
作用：将服务器返回的数据字节添加到符合要求的节点之上
用法：
$obj.load ( 请求地址，请求参数）；
请求参数可以有两种格式：
“username=tom & age=22”
{‘username’：‘tom’，‘age’：22 }
有请求参数时，load方法发送POST请求，否则发送GET请求
2.$.get和$.post
a,作用:向服务器发送异步请求，可将服务器返回的数据进行处理。
b,用法:
$.get(url,data,callback,type)
url: 请求地址
data:请求参数，可以有两种格式
格式一;"username=tom"
格式二:{"username":"tom"}
callback: 回调函数，用来处理服务器返回的数据。格式如下：
function(data,status),其中，data是服务器返回的数据，status是一个字符串，描述服务器处理请求的状态，比如"success"。
type:服务器返回的数据类型，可以是
html: html内容
text:文本内容
json:json字符串
xml:xml文档
script: javascript脚本
.3$.ajax
a, 作用：可以完全控制ajax对象发送请求(包括同步或者异步请求)的过程。
b,用法
$.ajax({});{}是一个对象，描述各个选项参数：
url:请求地址
type:请求方式
data:请求参数
dataType:服务器返回的数据类型
success: 回调函数(当服务器处理正确),格式如下:
function(data,status),含义同上。
error: 回调函数(当服务器处理失败),格式如下:
function(xhr,err1,err2)
async: 同步(false)还是异步(true)
通过 HTTP 请求加载远程数据。
如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。
beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。
注意，所有的选项都可以通过$.ajaxSetup()函数来全局设置。
AJAX
1. 什么是AJAX??
Asynchronous JavaScript and Xml （异步的JavaScript和Xml） AJAX是一种用来改善用户体验的技术
2.原理：
本质是使用XMLHttpRequest对象异步地向服务器发请求，并且发送请求的同时浏览器并不销毁页面，可以继续进行页面的操作，在服务器收到请求之后会返回部分数据，而不是一个完整的页面。
3. 如何获得AJAX对象??
需要区分不同的浏览器来或得这个对象。
function getXhr(){
var xhr = null;
if(window . XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft. XMLHTTP');
}
return xhr;
}
4. 异步对象的属性和方法
1、onreadystatechange
onreadystatechange需要绑定一个事件处理函数，该函数用来处理readystatechange事件。
当从0变成了1，就会产生readystatechange事件。在当前不同的处理状态下，可以进行状态的捕获，做些相应处理
2、readyState
readyState代表请求的状态，使用不同的数字代表一个状态。
获得ajax通讯的状态。
该属性值有5个：
0代表尚未初始化
1代表正在发送请求
2代表请求完成
3代表请求成功，正在接受数据
4代表数据接收成功（表示ajax对象已经获得了服务器返回的数据）
3、responseText
4、responseXML
5、status
AJAX编程实现，步骤：
1. 获取AJAX对象：获取 XMLHttpRequest对象。
2. 创建请求：调用XMLHttpRequest对象的open方法。
3. 设置回调函数：为AJAX对象的 onreadystatechange事件设定响应函数。
4. 发送请求：调用Ajax对象的send方法
step1：获得对象
step2：利用ajax对象发送请求
get请求
xhr.open('get',URI,true);
open（）方法可以理解为准备工作，填写发送请求前的信息的准备。
第一个参数位置，使用“get”即发送GET请求。
第二个参数位置，填写发送请求的地址，如果在发送GET请求时需要在地址中携带参数值，可以通过“？”的方式来追加“name=value”对象 第三个参数位置，为boolean类型的值。当该boolean值为true时，服务器请求是异步进行的，也就是脚本执行send（）方法后不等待服务器的执行结果，而是继续执行脚本代码；当该boolean值为false时，服务器请求是同步进行的，也就是脚本执行send（）方法后等待服务器的执行结果的返回，若在等待过程中超时，则不再等待，继续执行后面的脚本代码！
注意：该方法还没有真正的发送请求。
step3：编写服务器端的处理程序，一般不需要返回完整的页面，只需要返回部分的页面
step4：编写处理函数
get请求：
xhr.open（'get‘,‘xx.do?uname=Bear',true）;
xhr.onreadystatechange = fn;
xhr.send(null);
post请求：
xhr.open('post',‘ xx.do‘ , true);
xhr.setRequestHeader('content-type',‘applicaton/x-www-form-urlenco ded');
xhr.onreadystatechange = fn;
xhr.send('uname = Bear');
注意：Http要求在发送post请求的时候需要添加一个“content—type消头”，因为ajax在默认的情况下不会添加消息头，所以需要调用.setRequestHeader()方法来设置消息头。
GET请求时的乱码问题
1. 为什么会有乱码？？
乱码的根本原因在于浏览器的的编码和服务器的解码的方式不同而产生的。
比如IE浏览器提供的AJAX对象会使用GBK字符集对请求参数进行编码，而其它浏览器会使用UTF-8来编码。也就是不同的浏览器在发送请求时数据编码就已经不一致了。而对于服务器来讲，默认情况下会使用ISO-8859-1进行解码，这种解码格式是Tomcat的配置文件中声明的。
解决乱码问题，就需要在客户端和服务器端统一编码和解码的方式即可。
step1：设置服务器端使用“utf-8”来解码，即修改Tomcat的XML文件（conf/service.xml
step2：使用encodeURI函数统一编码。
POST请求时的乱码问题
1. 乱码产生的原因？？
POST请求时乱码问题产生的原因依然是编码与解码的不同造成的。因为所有浏览器在进行POST方式提交时都是使用UTF-8方式进行编码的，到了服务器端则默认使用ISO-8859-1方式来解码。所以只需要修改服务器端的解码格式，保证是UTF-8的方式来接吗就可以避免乱码。
注 ： 火狐就不用这句代码，是因为这个浏览器会在发送的请求数据包中告诉服务器，它是哪种方式进行的数据编码。
服务器端：
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
JSON
1. 什么是JSON？？
JSON即Javascript对象表示法，是一种现在主流的数据交换格式。
轻量级的数据交换技术标准。
a、数据交换：
将数据转换成和平台无关的数据发送给接收放来处理
b、轻量级
相对于xml做数据交换格式，json文档更小，解析的速度更快。
特点：
a、简单，只有六种类型的符号 [ ] { } ； ，就可以表示任何种类的复杂对象或数组。
b、易读，机器解析还是人的阅读都能够从这种格式中快速找到所需要的信
息。
2. JSON语法：
2.1. 使用JSON表示一个对象
{"属性名":属性值,"属性名":属性值, ... ... }
例：var obj = {‘id’:1,’name’:’王小贱’,’age’:24};
var name = obj . name ;
var obj = {‘id’:1 , ’name’:’王小贱’ , ’dep’:{‘depId’:1,’depName’:’财务部’}};
var depName = obj.dep.depName ;
注意：
a、属性名要使用引号引起来
b、属性值的类型可以多样化，包括string、number、true、false、null、object、array
c、如果属性值的类型为字符串，则必须使用引号括起来
2.2. 使用JSON表示一个数组
[ {Object1} , {Object2} , {Object3} … ]
注意：
a、Object的类型可以是string、number、false、true、null、object、array。
3.使用JSON实现数据交换
1. JSON数据交换原理
JSON作为数据的交换格式，在客户端和服务器端都要有对应的转换过程。
如果是客户端请求数据，那么服务器端就将Java对象先转换成JSON字符串，经响应把字符串传到客户端之后，客户端就会接收到这个转换结果，但JavaScript要求把这个字符串变成对象格式才更方便访问，所以在客户端的JavaScript代码中又需要将这个JSON字符串变成JavaScript能够识别的对象，这样就完成了从服务器端的对象到客户端对象的整个转变过程。
同理，如果在客户端填写了数据后想提交给服务器，首先是将客户端数据构造成一个JSON对象字符串，经网络传递到服务器端，服务器端再依据转换规则将JSON字符串变成Java识别的对象。
2. Java对象转换成JSON---->服务器端
在服务器端对象的转换过程可以使用官方提供的API，JSONObject和JSONArray分别为对象和数组的转换类型。
3. JSON字符串转换成JS对象------>浏览器端
当JSON经传输到达客户端时，需要完成JSON到JavaScript对象的转换，如果使用JS原生的方法进行转换的话，可以使用eval（）方法，但需要在JSON 的前后连接上左右圆括号。
注意：为什么要 eval这里要添加('('+json+')') 呢？
原因在于eval本身的问题。由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行但是需要注意的是方式eval()方法是动态执行其中字符串（可能是js脚本）的，这样很容易会造成系统的安全问题。所以可以采用一些规避了eval()的第三