jQuery和Ajax笔记大全.docx
- 文档编号:6869720
- 上传时间:2023-01-11
- 格式:DOCX
- 页数:21
- 大小:25.69KB
jQuery和Ajax笔记大全.docx
《jQuery和Ajax笔记大全.docx》由会员分享,可在线阅读,更多相关《jQuery和Ajax笔记大全.docx(21页珍藏版)》请在冰豆网上搜索。
jQuery和Ajax笔记大全
Ajax
1、ajax是什么?
asynchronousjavascriptandxml:
异步的javascript和xml。
是一种用来改善用户体验的技术,其本质是利用浏览器内置的一种特殊的对象(XMLHttpRequest)异步(即发送请求时,浏览器不会销毁当前页面,用户可以继续在当前页面做其它的操作)的向服务器发送请求,并且利用服务器返回的数据(不再是一个完整的页面,只是部分的数据,一般使用文本或者xml返回)来部分更新当前页面。
使用ajax技术之后,页面无刷新,并且不打断用户的操作。
2、ajax对象
(1)如何获得ajax对象?
XMLHttpRequest并没有标准化,要区分浏览器:
functiongetXhr(){
varxhr;
if(window.XMLHttpRequest){
//非ie浏览器
xhr=newXMLHttpRequest();
}else{
//ie
xhr=newActiveXObject('Microsoft.XMLHttp');
}
}
(2)ajax对象的属性
a,onreadystatechange:
绑订一个事件处理函数(注册监听器),当ajax对象的readyState
值发生了改变(比如,从0-->1),就会产生readystatechange事件。
b,responseText:
获得服务器返回的文本
c,responseXML:
获得服务器返回的xml数据
d,status:
获得状态码
e,readyState:
ajax对象在与服务器进行通讯时,通过readyState属性值可以获取该对象的通讯的状态,其属性有5个(0,1,2,3,4),当属性值为4时,表示ajax对象已经获得了服务器返回的所有的数据。
(3)ajax编程的基本步骤
step1,先获得ajax对象varxhr=getXhr();
step2,发送请求xhr.open(请求方式,请求地址,异步还是同步);
请求方式:
get/post
请求地址:
如果是get请求,请求参数要添加到请求地址的后面。
true表示异步请求:
ajax对象发请求的同时,用户可以对当前页面做其它的操作。
false表示同步请求:
ajax对象发请求的同时,浏览器会锁订当前页面,用户需要等待处理完成之后才能做下一步操作。
方式一:
get请求
xhr.open('get','check_username.do?
username=zs',true);
xhr.onreadystatechange=f1;
xhr.send(null);
方式二:
post请求xhr.open('post');
step3,编写服务器端的代码,服务器端一般不需要返回完整的页面,只需要返回部分的数据,比如一个简单的字符串。
step4,编写监听器
functionf1(){
if(xhr.readyState==4){
//获得服务器返回的数据
vartxt=xhr.responseText;
//dom操作
}
}
练习:
使用ajax技术对验证码进行验证。
Ajax第二天
1、ajax编程中的编码问题
(1)发送get请求:
ie浏览器内置的ajax对象,对中文参数使用gbk编码,而其它浏览器(firefox,chrome)使用utf8编码。
服务器端默认使用iso-8859-1去解码。
解决方案:
step1,让服务器对get请求中的参数使用指定的编码格式进行解码。
比如,对于tomcat,可以修改conf/server.xmlURIEncoding="utf-8"
step2,对请求地址,使用encodeURI函数进行统一的编码(utf-8)
(2)发送post
所有浏览器内置的ajax对象都会使用utf-8进行编码。
解决方案:
request.setCharacterEncoding("utf-8");
2、发送post请求
xhr.open('post','check_username.do',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.onreadystatechange=f1;
xhr.send('username='+$F('username'));
注意:
因为按照http协议的要求,如果发送的post请求,请求数据包里面,应该有一个消息头content-type。
但是,ajax对象默认没有,所以,需要调用setRequestHeader方法。
3、json(javascriptobjectnotation)
(1)json是什么?
(java对象和javascript对象的转换)
是一种轻量级的数据交换标准。
a,什么是数据交换?
简单地讲,就是将要交换的数据先转换成一个与平台无关的数据格式(比如xml或者json字符串)发送给接受方,接受方再进行相应的转换。
b,轻量级
相对于xml,json解析的速度更快,数据量更小。
(2)json语法格式
1)如何表示一个对象:
{属性名:
属性值,属性名:
属性值...}要注意:
a,属性值的类型可以是
string,number,null,boolean,object。
b,属性名必须使用引号括起来
c,属性值如果是string,也必须使用引号括起来
2)如何表示一个对象组成的数组:
[{},{},{}...]
(3)如何使用json做数据交换
1)java对象(java对象组成的数组或者集合)转换成对应的json字符串
可以从www.json.org去下载对应语言的工具。
使用的json-lib中提供的两个类:
JSONObject,JSONArray
2)json字符串转换成javascript对象,可以使用prototype提供的evalJSON函数。
prototype.js提供了很多有用的函数:
a,$(id):
相当于document.getElementById(id);
b,$F(id):
相当于document.getElementById(id).value;
c,$(id1,id2,...):
分别查找id为id1,id2...的节点,然后返回一个数组。
d,strip():
除掉字符串两端的空格。
e,evalJSON():
将json字符串转换成对应的javascript对象或者数组。
练习:
热卖商品动态显示
step1,建表
createtablet_sale(
idintprimarykeyauto_increment,
namevarchar(50),
pricedouble,
qtyint
);
insertintot_sale(name,price,qty)values('bmwx6',20,30);
insertintot_sale(name,price,qty)values('bmwx5',20,20);
insertintot_sale(name,price,qty)values('bmwx3',20,60);
insertintot_sale(name,price,qty)values('bmwx1',20,40);
查询销量前三的sql:
select*fromt_saleorderbyqtydesclimit3;
step2,实体类Sale
step3,SaleDAOList
step4,ActionServlet输出一个json字符串
step5,测试ActionServlet
step6,sale.jsp
4、ajax应用中的缓存问题:
当使用ie浏览器时,如果使用get方式发请求,浏览器会先缓存之前访问的数据,如果访问的地址不变,不会向服务器发请求。
解决方式1:
使用post方式发请求。
解决方式2:
在请求地址后面添加一个随机数。
5、发送同步请求
xhr.open('post','check_username.do',false);
jQuery
1、jQuery介绍
jQuery是一个js框架(其实就是一个.js文件),它的特点是使用选择器查找要操作的节点,并且将这些节点封装成一个jQuery对象。
封装的目的是为了更好地兼容不同的浏览器之间的差异,同时也会简化代码。
注:
选择器是jQuery借鉴css选择器的语法而创建的一种查找要操作的节点的语法格式。
比如$('#id');
2、jQuery基础
(1)jQuery编程的基本步骤:
step1,引入jQuery.js文件
step2,使用选择器查找要操作的节点
step3,调用jQuery对象的属性或者方法来操作相应的节点。
(2)jQuery对象与dom对象之间的转换
1)dom对象--->jQuery对象:
$(dom对象);
2)jQuery对象---->dom对象
第一种方式:
$obj.get(0);
第二种方式:
$obj.get()[0];
(3)jQuery与prototype如何同时使用?
因为jQuery与prototype都使用$函数,需要使用var$a=jQuery.noConflict()将$函数改名为"$a"。
3、jQuery选择器selector
1)、基本选择器selector/a1.html
#id
.class
element
selector1,selector2..selectorn
*
2)、层次选择器selector/a2.html
select1select2
select1>select2
select1+select2
select1~select2
3)、过滤选择器
(1)基本过滤选择器selector/a3.html
:
first
:
last
:
not(selector)
:
even
:
odd
:
eq(index)
:
gt(index)
:
lt(index)
(2)内容过滤选择器selector/a4.html
:
contains(text)
:
empty没有子节点,或者内容为空的节点。
:
has(selector)
:
parent跟empty相反,即有子节点,或者内容不为空的节点。
(3)可见性过滤选择器selector/a5.html
:
hidden隐藏
:
visible可视
(4)属性过滤选择器selector/a6.html
[attribute]
[attribute=value]
[attribute!
=value]
(5)子元素过滤选择器selector/a7.html
:
nth-child(index/even/odd)
(6)表单对象属性过滤选择器selector/a8.html
:
enabled
:
disabled
:
checked
:
selected
4)、表单选择器
:
input
:
text
:
pasword
:
radio
:
checkbox
:
submit
:
image
:
reset
:
button
:
file
:
hidden
4、dom操作
1)、查询dom/d1.html
利用选择器找到要操作的节点之后,访问节点的
html内容、text内容、节点的值以及节点的属性值。
除此之外,还可以修改这些值。
a,html():
相当于innerHTML
b,text():
相当于innerText
c,val():
d,attr():
2)、创建dom/d2.html
$(html);
3)、插入节点
append():
向每个匹配的元素内部追加内容
prepend():
向每个匹配的元素内部前置内容
after():
在每个匹配的元素之后插入内容
before():
在每个匹配的元素之前插入内容
4)、删除节点dom/d3.html
remove()
remove(selector)
empty():
清空节点
5)、复制节点dom/d6.html
clone():
clone(true):
使复制的节点也具有行为
6)、属性操作dom/d7.html
读取:
attr('');
设置:
attr('','')
或者一次设置多个attr({"":
"","":
""});
删除:
removeAttr('')
7)、样式操作dom/d8.html
获取和设置:
attr("class",""),attr("style","");
追加:
addClass('')
移除:
removeClass('')
或者removeClass('s1s2')
或者removeClass()//会删除所有样式
切换样式:
toggleClass
是否有某个样式hasClass('')
读取css('')
设置css('','')或者css({'':
'','':
''})//设置多个样式
8)、遍历节点dom/d9.html
children()/children(selector):
只考虑子元素,不考虑其它后代元素。
next(selector):
上一个兄弟
prev(selector):
siblings(selector):
其它兄弟
parent():
父节点
find(selector):
从当前节点开始,查找所有后代。
5、如何将js代码与html分开(将数据与行为分离)dom/d4,d5.html
//window.onload:
当整个页面加载完毕,会产生load事件,就会执行绑订的函数。
window.onload=function(){
varobj=document.getElementById("d1");
obj.onclick=function(){
obj.innerHTML="hellojava";
};
};
在使用jQuery时,可以使用如下的代码来实现
js与html的分离:
$(function(){
//js代码:
这些js代码会在整个页面加载完毕之后执行。
});
jQuery第二天
1、事件处理机制event
1)、事件绑订event/e1.html
bind(type,fn)
2)、绑订方式的简写形式
click(function(){});
3)、合成事件event/e2.htmle3.html
hover(enter,leave):
模拟光标悬停事件
toggle(fn1,fn2...):
模拟鼠标连续单击事件
4)、事件冒泡
(1)获得事件对象event/e4.htmle5.htmle6.html
click(function(e){});
(2)停止冒泡event/e7.html
event.stopPropagation()
(3)停止默认行为event/e8.html
event.preventDefault()
5)、事件对象的属性event/e6.html
event.type
event.target:
返回事件源(是dom对象)
event.pageX/pageY
6)、模拟操作event/e9.html
trigger('click')
2、动画animate
1)、show(),hide()a1.html
作用:
通过同时改变元素的宽度与高度来实现显示和隐藏的效果。
语法:
show(速度,callback);
速度:
'slow','normal','fast'/800(毫秒)
callback:
在动画执行完毕之后,会执行这个函数
2)、fadeIn()fadeOut():
animate/a2.html
作用,通过改变元素的不透明度来实现
语法:
slideUp(速度,callback);
显示和隐藏的效果。
3)、slideUp()slideDown():
amimate/a1.html
作用:
通过改变元素的高度来实现
显示和隐藏的效果。
语法:
slideUp(速度,callback);
4)、自定义动画animate(params,speed,callback)a3.html
语法:
params:
是一个js对象,描述了动画执行结束时元素的样式,比如:
{'top':
'600px','left':
'200px'}
speed:
毫秒
callback:
在动画执行完毕之后,会执行这个函数
3、类数组的操作array/a1.html
jQuery选择器返回的是一个jQuery对象(该对象可能包括了多个dom节点),如果要对这些
dom节点分别做不同的处理,就需要去遍历,需要调用jQuery对象提供的一些方法或者属性,称之为类数组的操作。
1)each(fn(i)):
循环遍历每一个元素,this代表被迭代的dom对象,$(this)代表被迭代的jQuery对象。
2)eq(index):
返回index+1位置处的jQuery对象
3)index(obj):
返回下标,其中obj可以是dom对象或者jQuery对象。
4)length属性:
dom对象的个数
5)get():
返回dom对象组成的数组
6)get(index):
返回index+1个dom对象。
jQuery第三天
1、jQuery对ajax编程的支持
(1)load方法:
作用:
是将服务器返回的数据直接添加到符合要求的节点之上,相当于obj.innerHTML=返回的数据。
语法:
$obj.load(请求地址,[请求参数]);
其中,请求参数可以有两种形式:
第一种:
请求字符串,比如"username=zs",或者“username=zs&age=22"。
第二种:
javascript对象,比如{'username':
'zs'},或者{'username':
'zs','age':
22}
load方法如果没有请求参数,会发送get请求,如果有请求参数,会发送post请求。
(2)$.get方法
作用:
向服务器发送get请求
语法:
$.get(url,[data],[callback],[type]):
url:
请求地址
data:
请求参数,可以是请求字符串或者是js对象。
callback:
是一个回调函数,用于处理服务器返回的数据,其格式function(data,statusText),
data是服务器返回的数据,statusText是服务器处理的状态。
type:
服务器返回的数据类型:
text:
文本字符串
html:
html内容
xml:
返回dom兼容的xml对象
json:
json字符串
script:
javascript脚本
$.post()格式同上。
(3)$.ajax方法
作用:
可以设置不同的参数,控制ajax对象向服务器发请求。
语法:
$.ajax(options):
其中,options是一个形如{key1:
value1,key2,value2...}的js对象,用于指定发送请求的选项。
选项参数如下:
url(string):
请求地址
type(string):
GET/POST
data(object/string):
请求参数,可以是请求字符串或者js对象
dataType(string):
服务器返回的数据类型
success(function):
请求成功后调用的回调函数,有两个参数:
function(data,textStatus),其中,
data是服务器返回的数据,
textStatus描述状态的字符串。
error(function):
请求失败时调用的函数,有三个参数
function(xhr,textStatus,errorThrown),
xhr:
ajax对象,即XMLHttpRequest对象。
textStatus和errorThrown,jQuery保证其中的一个参数可以获得异常的描述。
async:
true(缺省)/false
练习1:
商品热卖
练习2:
自动完成
step1,服务器端代码
服务器会返回一个类似于以下的字符串:
小米,小米2,小说,小米官网
step2,
分解服务器返回的字符串,并且将其添加到文本输入框的下面。
每一个选项要绑订click事件(将用户选中的选项复制到文本输入框)和mouseenter
事件(加亮对应的选项)处理代码。
keyup事件:
step1,服务器端代码
服务器依据关键字,返回一个类似于以下的字符串:
小米,小米2,小说,小米官网
step2,客户端代码
1)对文本输入框绑订keyup事件处理代码:
比如$('#key').keyup(fn);
2)在fn函数中:
a1,分解服务器返回的字符串,获得一个个选项,
将这些选项添加到文本输入框的下面。
a2,每一个选项绑订click事件(将用户
点击选中的选项复制到文本输入框)
a3,每一个选项绑订mouseenter事件(加亮对应的选项)处理代码。
注意:
keyup事件在某些浏览器中,在切换中文输入法时,会有
bug,需要我们自己解决,如果发现有这个问题,需要使用如下
代码:
vareventname='input';
if(navigator.userAgent.indexOf('MSIE')!
=-1){
eventname='propertychange';
}
$('#key').bind(eventname,fn);
总结
10.12:
先讲$(function(){});
一、jquery基础
1、一个简单的jquery程序
2、jquery对象与dom对象
3、如何与其它js库共存
二、jquery选择器
1、理解选择器及优势:
类似于css选择器(定位元素,施加样式),jquery选择器(定位元素,施加行为)。
这样做,可以内容与行为分离
2、基本选择器
#id
.class
element
selector1,select2..selectn
*
3、层次选择器
select1select2
select1>select2
select1+select2
select1~select2
4、过滤选择器
(1)基本过滤选择器
:
first
:
last
:
not(selector)
:
even
:
odd
:
eq(index)
:
gt(index)
:
lt(index)
(2)内容过滤选择器
:
contains(text)匹配包含给定文本的元素
:
empty匹配所有不包含子元素或者文本的空元素
:
has(selector)匹配含有选择器所匹配的元素的元素
:
parent匹配含有子元素或者文本的元素
(3)可见性过滤选择器
:
hidden匹配所有不可见元素,或者type为hidden的元素
:
visible匹配所有的可见元素
(4)属性过
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jQuery Ajax 笔记 大全