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")
