JQuery概述

jquery:轻量级的库,类库比较小 封装了遍历HTML文档,操作DOM,处理事件,执行动画和开发AJAX的操作.为这些操作提供了简洁的语法和跨平台的兼容性.有很多jQuery的插件,如jQuery UI等,可以根据自己需求决定是否选用.

prototype:老牌的轻量级的javascript库

dojo,ext,rico,mootools:更倾向于被称为框架,库文件很大,在页面直接使用javascript的控件来构建前端应用.

extjs相对于jquery的缺点:侧重于界面,类库比较大,本身比较臃肿,3.0版以上的并非完全免费,如果用于商业用途,需要付费.

Ajax(Asynchronous JavaScript and XML) 异步的JavaScript和xml

a.使用XHTML和CSS标准化呈现

b.使用DOM实现动态显示和交互

c.使用XML和XSLT进行数据交换和处理

d.使用XMLHttpRequest进行异步数据处理

e.最后用JavaScript绑定和处理所有数据

--------------------------------------------------XMLHttpRequest--------------------------------------------------------------------

1.使用XMLHttpRequest对象发送请求的过程如下:

a.创建一个XMLHttpRequest对象.

b.设置XMLHttpRequest对象的onreadystatechange属性,指定一个回调函数.

c.使用XMLHttpRequest对象的open方法建立连接.

d.调用XMLHttpRequest对象的send()方法向服务端发送请求.

e.在回调函数中根据回调函数的状态及服务端返回的数据,通过DOM对象更新页面元素.

2.XMLHttpRequest使用get方式和post方式和服务端交互的区别:

get方式:

xmlhttp.open("GET","login?username="+username,true);

xmlhttp.send(null);

post方式:

xmlhttp.open("POST","login",true);

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xmlhttp.send("name="+username);

总结:post方式需要自己设置xmlhttp的头信息,以及参数需要通过send方式发送,而get方式可以通过url传送.

3.使用XHR处理接受和处理XML数据

a.设置servlet中response的contentType为"text/xml;charset=utf-8",构造xml片段,使用out.print()输出.

b.使用xmlhttp.responseXML的方式来接受XML数据对象的DOM对象(可以利用DOM对象的方法来读到xml中的数据)

因为xmlhttp.responseXML属性返回的是一个XMLDocument对象,而xmlhttp.responseText返回的是一个文本字符串.

例如:dom中利用getElementsByTagName可以根据标签名来获取元素节点 此方法返回的是一个数组,取得其中第一个元素的文本内容的方式为:

domXml.getElementsByTagName("Message")[0].firstChild.nodeValue;

4.解决XHR缓存的问题

在url后面拼一个参数,其值为当前时间的时间戳,这样就可以永远不去读缓存的.例如:

var timstamp=new Date().valueOf();

if(url.indexOf("?")>=0)

url=url+'&t='timstamp;

else

url=url+'?t='timstamp;

上面这个思路也用来解决一些网站在登录时候的验证码图片的"换一张"这个功能,防止验证码图片缓存.

5.Ajax解决中文乱码的最佳方案

a.在页面端对参数值进行两次encodeURI(). 例如: login?username=encodeURI(encodeURI(username));

b.然后在服务器端用java.net.URLDecoder的decode()方法对参数值进行解码.例如:String value=java.net.URLDecoder.decode(request.getParameger("username"),"utf-8")