Ajax与JQuery

Ajax

1、ajax是什么?

asynchronous javascript and xml:异步的javascript和xml。

是一种用来改善用户体验的技术，其本质是利用浏览器内置的一种特殊的对象(XMLHttpRequest)异步(即发送请求时，浏览器不会销毁当前页面，用户可以继续在当前页面做其它的操作)的向服务器发送请求,并且利用服务器返回的数据(不再是一个完整的页面，只是部分的数据，一般使用文本或者xml返回)来部分更新当前页面。

使用ajax技术之后，页面无刷新，并且不打断用户的操作。

2、ajax对象

(1)如何获得ajax对象?

XMLHttpRequest并没有标准化，要区分浏览器:

function getXhr(){

var xhr;

if(window.XMLHttpRequest){

//非ie浏览器

xhr = new XMLHttpRequest();

}else{

//ie

xhr = new ActiveXObject('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对象var xhr = 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, 编写监听器

function f1(){

if(xhr.readyState == 4){

//获得服务器返回的数据

var txt = xhr.responseText;

//dom操作

}

}

Ajax第二天

 

1、ajax编程中的编码问题

(1)发送get请求:

ie浏览器内置的ajax对象，对中文参数使用gbk编码，而其它浏览器(firefox,chrome)使用utf8编码。服务器端默认使用iso-8859-1去解码。

解决方案:

step1,让服务器对get请求中的参数使用指定的编码格式进行解码。

比如，对于tomcat，可以修改 conf/server.xml   URIEncoding="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 (javascript object notation)

(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对象或者数组。

 

 

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

select1 select2

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('s1 s2')

或者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 () {

var obj = document.getElementById("d1");

obj.onclick = function () {

obj.innerHTML = "hello java";

};

};

在使用jQuery时，可以使用如下的代码来实现

js与html的分离:

$(function(){

//js代码: 这些js代码会在整个页面加载完毕之后执行。

});

        

jQuery第二天

 

1、事件处理机制   event

1)、事件绑订  event/e1.html

bind(type,fn)

2)、绑订方式的简写形式

click(function(){ });

3)、合成事件  event/e2.html   e3.html

hover(enter,leave) : 模拟光标悬停事件

toggle(fn1,fn2...)：模拟鼠标连续单击事件

4)、事件冒泡

(1)获得事件对象  event/e4.html e5.html e6.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

总结

10.12 : 先讲$(function(){});

一、jquery基础

1、一个简单的jquery程序

2、jquery对象与dom对象

3、如何与其它js库共存

二、jquery选择器

1、理解选择器及优势：

类似于css选择器（定位元素，施加样式），jquery选择器（定位元素，施加行为）。

这样做，可以内容与行为分离

2、基本选择器

#id

.class

element

selector1,select2..selectn

*

3、层次选择器

select1 select2

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)属性过滤选择器

[attribute]

[attribute=value]

[attribute!=value]

(5)子元素过滤选择器

:nth-child(index/even/odd)

 

(6)表单对象属性过滤选择器

:enabled

:disabled

:checked

:selected

5、表单选择器

:input

:text

:pasword

:radio

:checkbox

:submit

:image

:reset

:button

:file

:hidden

 

三、dom操作

1、查询

利用选择器查找到节点，使用text()/attr()输出节点文本和属性值。

此外：下拉列表,可以使用val()获得值单选、多选框要使用循环来获得选项值

见jquery_lab dom node.html

2、创建

$(html);

jquery_1011

3、插入节点

append():向每个匹配的元素内部追加内容

prepend():向每个匹配的元素内部前置内容

after():在每个匹配的元素之后插入内容

before():在每个匹配的元素之前插入内容

4、删除节点

remove()

remove(selector)

empty():清空节点

 

5、复制节点

clone()

clone(true):使复制的节点也具有行为(将事件

处理代码一块复制)

 

6、属性操作

读取：attr('');

设置：     attr('','') 或者一次

设置多个 attr({"":"","":""});

删除：removeAttr('')

 

7、样式操作

获取和设置: attr("class","")

追加:addClass('')

移除:removeClass('')

或者removeClass('s1 s2')

或者removeClass()//会删除所有样式

切换样式：toggleClass,有该样式，就删除，没有，

就添加。

是否有某个样式 hasClass('')

读取css('')

设置css('','')或者

css({'':'','':''})//设置多个样式

 

9、遍历节点

children():只考虑子元素，不考虑其它后代元素。

next():

prev():

siblings():

find(expr):

 

四、事件

1、事件绑订

bind(type,fn)

2、绑订方式的简写形式

click(function(){});

3、合成事件

hover(enter,leave) : 模拟光标悬停事件

toggle(fn1,fn2...)：模拟鼠标连续单击事件

jquery1011 event.html

4、事件冒泡

（1）获得事件对象

click(function(event){});

（2）停止冒泡

event.stopPropagation()

（3）停止默认行为

event.preventDefault()

5、事件对象的属性

event.type

event.target:返回事件源（是dom对象!!!）

event.pageX/pageY

 

6、模拟操作

trigger('click')

trigger()触发事件后，会执行浏览器的默认行为，比如trigger('focus'),不想执行

默认操作，可用triggerHandler()

 

例子　jquery1011 exec tip2.html

 

五、动画

1、 show() hide()

2、show("slow"/"normal"/"fast"/100)  hide()

3、fadeIn() fadeOut():改变不透明度

4、slideUp() slideDown() :改变元素的高度

5、自定义动画 animate(params,speed,callback)

 

六、操作类数组的方法：

说明：jquery操作数组的方法，$()操作返回的如果是一个数组，可以使用如下方法来操作

each(fn(i)):循环遍历每一个元素,this代表被迭代的dom对象，$(this)代表被迭代的jquery对象。

eq(index)：返回index+1位置处的jquery对象

index(obj)：返回下标，其中obj可以是dom对象或者jquery对象。

length：个数

get()：返回dom对象组成的数组

get(index)：返回index+1个dom对象。

 

 

例子　jquery1011 example tab.html

jquery1011 example move.html

 

七、jquery对ajax的支持

1、序列化元素：

serialize():将jquery对象包含的表单或者表单控件转换成查询字符串

serializeArray()：转换为一个数组，每个数组元素形如{name:fieldName,value:fieldVal}的对象。

序列化元素的作用，主要是用于ajax请求中，给data赋值。

2、三个方法

（1）load(url),将服务器响应插入当前jQuery对象匹配的dom元素之内。

一般用于从服务器获取静态的数据(比如.html文件,在jquery1.3之后，可以用选择器筛选符合要求的节点了),

不支持返回javascript

例子参见ajax1011 order.jsp

（2）$.get(url,[data],[callback],[type]):其中，callback格式 function(data,statusText)

$.post()格式同上。

例子参见ajax1011 order.jsp

 

（3）$.ajax(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)

 

全局事件

 

 

ajax开发中的常见问题

1、get请求时的缓存问题(ie浏览器，对于get请求，会缓存数据，可参见工具-->internet选项-->常规-->设置)

如果采用$.get发送请求，就会有缓存问题。解决方式,url地址后添加一个随机数。

2、编码问题

3、跨域问题　最新的W3C标准里是这么实现HTTP跨域请求的，

简单来说，就是跨域的目标服务器要返回一系列的Headers，通过这些Headers来控制是否同意跨域。

 

下面是我实际项目中总结的一些比较重要和经常用到的方法：

 

Ajax:${object}:里面的对象只能是Attribute绑定的对象,不能是直接new的对象引用

理论：
jQuery:相当于直接封装了js的dom对象，$("#id")等价于ocument.getElementById('id'),并且jQuery对象提供了自己的方法和属性，不再使用dom对象的属性和方法。
dom对象：HTML操作对象.

colspan:不规则表格属性
<div class="c1 c2 c3"></div>:多个class属性同时定义.
addClass():添加class元素选择
hasClass(class):检查当前的元素是否含有某个特定的类，如果有，则返回true

$(this):jQuery当前对象是谁.

toggleClass(class)：切换class元素选择，有则删除class，无则添加class.

click():会调用执行绑定到click事件里面定义的所有函数。
触发页面内所有段落的点击事件

chick(fn):在每一个匹配元素的click事件中绑定一个处理函数,点击事件会在你的指针设备的按钮在元素上单击时触发

find():搜索所有与指定表达式匹配的元素。

attr(key,value):为属性名称ket元素设置(修改)一个对应的value属性值。
attr(name):取得第一个匹配元素(name)的属性值,如果元素没有相应属性，则返回 undefined 。得到指定元素的值内容.
attr({properties}):在所有匹配元素中批量设置很多属性的最佳方式.一次设置多个属性.


html():取得这个匹配元素的HTML内容(所有内容).
html(val):设置匹配元素的HTML内容.
text():取得所有匹配元素的内容(文本内容)

val():获得第一个匹配元素的当前值(内容)
val(val):设置所有相同匹配元素的值

index()：搜索匹配的元素，并返回相应元素的索引位置，从0开始计数

eq(N):获取第N个元素，从0算起.

hover(over,out)：模仿鼠标悬停事件,移动触发相应的函数.
dom创建和添加以及删除:
内部插入：
append(value):向每个匹配的元素内部追加内容value.
prepend(value):向每个匹配的元素内部添加前置内容.
外部插入：
before():前面添加，同prepend()
after():后部添加,同append()

remove():从DOM中删除所有匹配的元素(包括元素本身,但保留对象)
remove(expr):删除指定的
empty():删除匹配的元素集合中所有的子节点(文本及元素内容)
click():触发每一个匹配元素的click事件,这个函数会调用执行绑定到click事件的所有函数.点击事件函数.
click(fn):在每一个匹配元素的click事件中绑定一个处理函数
点击事件会在你的指针设备的按钮在元素上单击时触发。单击的定义是在屏幕的同一点触发了mousedown和mouseup.几个事件触发的顺序是：mousedownmouseupclick
clone():克隆匹配的DOM元素并且选中这些克隆的副本(不包括功能行为)
clone(true):复制并且复制功能行为.

css(name):访问第一个匹配元素的样式属性。
css(name,value):，更改一个name样式属性的value值。
css({properties}):在所有匹配的元素上设置大量样式属性的最佳方式,一次设置多个样式.
jQuery转换dom对象：
get():取得所有匹配的 DOM 元素集合。
get(index):取得其中一个匹配的元素(作为dom对象操作).

通用选择器：*代表所有.匹配所有元素

children(expr):取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合,只考虑子元素而不考虑所有后代元素,expr用以过滤(可选).
find(expr):找到指定的(expr)所有后代元素.搜索所有与指定表达式匹配的后代元素
next():获得后面紧跟同辈元素的集合.只返回后面那个紧邻的同辈元素(一个而不是所有)
nextAll():后面的所有同辈元素(后面的所有).
siblings():找到相同的所有同辈元素(不分前后，所有的)
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。


事件切换：
hover(over函数,out函数):当鼠标移到元素上以及移出元素时触发不同的处理函数。

toggle():点击了匹配的元素，则触发指定的第一个函数，再次点击触发第二个fn,直到最后一个fn。随后的点击对这些函数的重复顺序调用。(随后的每次点击都重复对这几个函数的轮番调用)。

$(fn(){}):加载页面之后最后处理.表示当页面加载完毕时执行这个函数

show(speed,fn):显示隐藏的匹配元素,并可以触发执行一个回调函数.如果选择的元素是可见的，则没有任何效果.speed代表运行的速度(slow,normal,fast)
hide(speed,fn):隐藏显示的元素,理论思想同上.
display:none;设置不可见.
fadeIn():通过不透明度的变化来实现所有匹配元素的淡入效果.可以触发回调函数.
fadeOut():通过不透明度的变化来实现所有匹配元素的淡出效果.可以触发回调函数.

animate(params,duration,fn):指定动画形式及结果样式属性对象
params:元素的最终样式结果形态.
duration:动画时长的毫秒数值
fn:回调函数.

mouseover(fn):在匹配元素中绑定一个处理函数。当鼠标移入对象时触发该函数。
mouseout(fn)：鼠标离开后触发函数(原理同上)
mousedown(fn):鼠标在元素上点击会触发.
mousemove(fn):鼠标在元素上移动时会触发函数.
mouseup(fn):鼠标点击对象释放时触发函数.