ajax是什么？
使用xmlhttpRequest对象异步向服务器发送请求
服务器返回部分的数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部数据。
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveObject(“Microsoft.XMLHttp”);
}
return xhr;
}
异步对象的属性和方法：
open
send
getRequestHeader
getAllRequestHeaders
readyState
onreadystatechange
responseText
responseXML
status:
发送ajax请求的步骤：
获取ajax对象：xmlhttprequest
设置回调函数：为ajax对象的readystatechange事件设定响应函数
创建请求：调用xmlhttprequest的open方法
发送请求：调用ajax对象的send方法
编写回调函数：
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status ==200){
var txt = xhr.responseText;
//DOM操作
}
}
创建请求–get请求
xhr.get(“get”,“xx.do”,true);
注意：
true：表示发送异步请求，（当ajax对象发送请求时，用户然让能够对当前页面做其他处理）
false:表示发送同步请求，（当ajax对象发送请求时，浏览器会锁定当前页面，用户不能够做其他的操作）
创建POst请求：
xhr.open(“post”,“xx.do”,true);
xhr.setRequesHeader(‘content-type’,‘applicationn/x-www-form-urlencoded’);
setRequestHeader的作用：因为http协议要求发送post请求，必须有content-type消息头，但是默认的情况下
xhr不会添加消息头，所以，需要调用setRequestHeader,添加这个消息头。
发送请求：
get xhr.send(null)
post xhr.send(name=value & name=value);
get请求：send方法内传递null
若需要提交数据，则在open方法内的url后面追加
xhr.open(“get”,“xx.do?name=value&name=value”,true);
编写服务器段代码：
public void service(HttpServletRequest request,HttpServetReaponse response){
request.setCharacterEncoding();
response.setContentType(“text/html;charset=utf-8”);
out.println(“用户名已经存在”);
}
ajax的应用：
输入的值需要校验，如果检测注册的用户名是否已经被占用
搜索是出现的自动提示列表
级联操作
数据录入和列表显示在同一个界面
不需要刷新界面
post请求时的乱码问题：
所有的额浏览器提供的ajax对象对请求参数使用utf-8进行编码
服务器默认使用iso-8859-1
编码和解码不一致就会产生乱码
request.setCharacterEncoding(“utf-8”);
注意：火狐就不能使用这句代码，因为这个浏览器会在发送的请求数据包中告诉
服务器，他是那种方式进行数据编码
get请求时的乱码：
IE浏览器提供的ajax对象会使用gbk字符集对请求参数进行编码。而其他浏览器会使用utf-8
来编码
服务器默认使用iso-8859-1
编码和解码不一致就会产生乱码
解决get请求时的乱码问题：
文档小，解析速度快
json结构：主要分为两种，
–名称/值 的集合，不同的语言理解为对象，记录，结构等
–值的有序列表，数组
{属性名:属性值，属性名：属性值}
属性值：可以是String number boolean null object
属性名需要使用""起来
属性值如果是String，必须使用双引号括起来
json可以表示数组：
[{},{}]
对象：{"":"","":[]}
json字符串–jacascript对象：eval() paese() parseJSON()
eval("("+str+")");
var obj = JSON.parse(str);
var obj = str.parseJSON();
还有prototype中的一个函数：
var obj= str.evalJSON（）;
将java对象转化成为json对象：
JSON提供的API JSONObject JSONArray
缓存问题：
IE浏览器提供的ajax对象，在发送get请求时，会查看是否访问过这个地址，如果已经
访问过，那么浏览器就不在发送请求。
各种浏览器对同一地址的处理：
IE 不再发送
Firefox 继续发送
Chormme 继续发送
xhr.open(“get”,“getNumber.do?”+Math.random(),“true”);
方式二：发送post请求
发送同步请求：
var obj = str.eval();
var obj2 = str.parseJSON();//需要使用json.js
var obj3 = JSON.parse(str);
var obj4 = str.evalJSON();
将json对象转化成为json字符串：
var str = obj.toJSONStirng();//需要json.js
vat str2 = JSON.stringify(obj);
什么是JQuery对象：
JQuery为了解决浏览器的兼容性问题而提供的一种统一封装后的对象描述
将dom对象转化成为JQuery对象
$(dom对象)
var $obj = $(obj);
$obj.html();
DOM—Jquery:
(
d
o
m
对
象
)
.
g
e
t
(
0
)
/
(dom对象).get(0)/
(dom对象).get(0)/(dom对象).get()[0];
jquery的选择器：
能够实现内容和行为的分离：
$(’#id’)
$(’.s1’)
$(‘div’)
合并选择器：
$(’#di,.s1,p’).css();
$(’*’)
层次选择器：
$(’#d1 div’)
$(’#d1>div’):只查找直接子节点
$(’#d1+div’):表示下一个兄弟节点
$(’#d2~div’):代表下面的所有兄弟
基本过滤选择器：以： 或者[] 开始
:first
:last
:not(selector) 把selector排除在外
:even 挑选偶数行
：odd 计数行
:eq()
:gt（index） 大于下标
:lt(index) 下标小于index
内容过滤选择器：
:contains(text)
:empty
:has(selector)
:parent 含有子元素和文本的元素
可见性过滤选择器：
:hidden 匹配所有不可见元素 或者type为hidden的元素
:visible 匹配所有的可见元素
属性过滤选择器：
[attribute]
[attribute=value]
[attribute!=value]
子元素过滤选择器：
:nth-child(index/even/odd)将为每一个父元素匹配子元素 index从1开始
:eq(index)
表单对象属性过滤选择器：
:enabled
:disabled
:checked
:selected
表单选择器：
:input
:text
:password
Jquery操作DOM --查询
html():读取或者修改html内容
JQuery创建 插入 删除：
创建节点：
$(html)
var $obj = $(‘
hello ’);( ′ b o d y ′ ) . a p p e n d ( ('body').append( (′body′).append(obj);
简写：$(‘body’).append(‘
hello ’);插入dom节点：
append():
prepend():作为第一个子节点添加
after(): 作为下一个兄弟节点添加进来
berfore():
删除节点：
remove（）：
remove(selector):
empty():清空节点
复制节点：
clone():
clone(true):复制的节点也具有行为，将处理代码一起复制
样式操作：
attr(“class”,"") 获取和设置
addClass("")
removeClass("")
removeClass()
toggleClass():切换样式
hasClass(""):是否有某个样式
css("") 读取css的值
css("","") 设置多个样式
遍历节点：
children()/children(selector):只考虑直接子节点
next()/next(selector)
prev()/prev(selector)
siblings()/
find(selector):查找满足条件的后代
parent() 父节点（没有选择器）
JQuery中的事件处理：
使用JQuery事件绑定：
$obj.bind(事件类型，事件处理函数)
$obj.bind(‘click’,function(){});他的简写形式：
$obj.click(funciton(){});
代表触发click函数
获取事件对象：
只需要为事件处理函数传递任意的一个参数
$obj.click(function(e){});
e就是事件对象，但是已经经过JQuery对底层事件对象的封装。
封装后的事件对象可以方便的兼容各种浏览器。
事件对象的常用属性：
var obj = e.target;
获取事件源：返回的是dom对象
获取鼠标点击的坐标：
e.pageX
e.pageY
事件冒泡：
子节点产生的事件会依次向上抛给父节点：
e.stopPropagation();取消事件冒泡
JQuery中的合成事件：
hover(mouseenter,mouseleave):模拟光标悬停事件
toggle():多个事件响应中切换：
模拟操作的语法：
$obj.trigger(事件类型):
$obj.trigger(‘focus’);
$obj.focus();
show() /hide()
通过改变元素的高度和宽度来实现下你是或者隐藏。
$obj.show(时间，会调函数);
执行时间：slow normal fast 或者毫秒数
slideDown()/slidUp()
fadeIn() fadeOut()
自定义函数：
animate(js对象，执行时间，回调函数):
js对象，描述动画执行之后元素的样式，
$(‘div’).click(function(){
$(this).animate({‘left’:‘500px’},4000);
$(this).animate({‘top’:‘300px’},2000).fadeOut(‘slow’);
});
JQuery中的类数组：
JQuery中封装了多个DOM对象，
类：指的是类似，
具备自己特有的操作方法
类数组的操作：
length
each(fn):遍历类数组，fn用来处理DOM对象，在fn中this表示正在遍历的那个DOM对象。
fn函数可以提那家一个参数i用来表示正在比你阿里的DOM对象的下标。
eq(index)
get():返回一个DOM对象组成的数组
index(obj):返回DOM或者JQuery对象在类数组中的下标
JQuery对ajax的支持：
load：作用将服务器返回的数据字节添加到符合要求的节点之上。
$obj.load(请求地址，请求参数);
请求参数：username=tom &age = 22
有参数，发送post请求，否则发送get请求
post():
$.post(’’,function(){},’’);
get():发送get请求
用法:$.get(请求地址，请求参数，回调函数，服务器返回的数据类型)
回调函数添加的参数是服务器返回的数据
服务器返回的数据类型：
html:html文本，
text:文本，
JSON：js对象
xml：XML文档
script：javascript脚本
ajax():
$.ajax({});
{}类可以设置的选项参数：
url:
type:
data:
dataType:
success:服务器处理正常对应的回调函数
error:服务器出错对应的回调函数
async:true当值为false是表示发送同步请求
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
