2 ajax xmlhttprequest最简单实例... 1
9.1 JavaScript Object-Oriented Program.. 5
Ajax（即异步 JavaScript 和 XML）是一种 Web 应用程序开发的手段，它采用客户端脚本与 Web 服务器交换数据。所以，不必采用会中断交互的完整页面刷新，就可以动态地更新 Web 页面。使用 Ajax，可以创建更加丰富、更加动态的 Web 应用程序用户界面，其即时性与可用性甚至能够接近本机桌面应用程序。
2 重要性
Ajax 不是一项技术，而更像是一个 模式 —— 一种识别和描述有用的设计技术的方式。Ajax 是新颖的，因为许多开发人员才刚刚开始知道它，但是所有实现 Ajax 应用程序的组件都已经存在若干年了。它目前受到重视是因为在 2004 和 2005 年出现了一些基于 Ajax 技术的非常棒的动态 Web UI，最著名的就是 Google 的 GMail 和 Maps 应用程序，以及照片共享站点 Flickr。这些用户界面具有足够的开创性，有些开发人员称之为“Web 2.0”，因此对 Ajax 应用程序的兴趣飞速上升。
随着下一代web的推及，人性化的设计将是重中之重
3.1 html例子
<span id="b"></span>
<script>
function getData(){
var urlstr=document.getElementById("urltxt").value;
var str = retrieveURL(urlstr,"");
var b = document.getElementById("b");
b.innerHTML=str;
}
function retrieveURL(url,Args) {
var req;
var strText;
if (window.XMLHttpRequest) { // Non-IE browsers
req = new XMLHttpRequest();
try {
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(Args);
} catch (e) {
alert(e);
}
} else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(Args);
}
}
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
strText = req.responseText;
} else {
alert("error in saving base info: " + req.statusText);
isError=true;
}
}
else{
}
return strText;
}
</script>
url:<input id="urltxt" value="http://www.163.com">
<input type="button" value="get" οnclick="getData()">
3.2 jsp的一个例子
注：该例子解决中文问题
<%@ page language="java" pageEncoding="GBK"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<script>
var str = retrieveURL("abc.jsp","beanName=中文");
alert(str);
function retrieveURL(url,Args) {
var req;
var strText;
if (window.XMLHttpRequest) { // Non-IE browsers
req = new XMLHttpRequest();
try {
req.open("POST", url, false);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(Args);
} catch (e) {
alert(e);
}
} else if (window.ActiveXObject) { // IE
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.open("POST", url, false);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(Args);
}
}
if (req.readyState == 4) { // Complete
if (req.status == 200) { // OK response
strText = req.responseText;
} else {
alert("error in saving base info: " + req.statusText);
isError=true;
}
}
else{
}
return strText;
}
</script>
<%@ page language="java" pageEncoding="GBK"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String beanName = request.getParameter("beanName");
out.println(beanName);
%>
4 AJAX基础教程
http://woooh.com/post/learn_ajax.html
http://www-128.ibm.com/developerworks/cn/java/j-ajax1/index.html?ca=dwcn-newsletter-java
6 ajax的框架
http://ajaxpatterns.org/Ajax_Frameworks
比较流行的有dwr，一下为dwr的基础教程:
DWR让AJAX如此简单：http://www.matrix.org.cn/resource/article/43/43926_DWR_AJAX.html
ICEfaces Community Edition v1.0 Beta Released
Demo: http://www.icesoft.com/products/demos_icefaces.html
gmail,google map,hotmail新版本等
9 ajax的问题
9.1 性能
频繁的服务器请求
9.2 安全性
由于安全性考虑，各种浏览器都禁止不同域的ajax的使用，如何解决这个问题
详情请参考：
http://www.xml.com/pub/a/2005/11/09/fixing-ajax-xmlhttprequest-considered-harmful.html?page=1
ajax=javascript+xml,所以用好ajax的前提是良好的javascript和xml的知识，一个好的交互操作（如：下图），可能需要编写大量的javascript代码，所以需要JavaScript for object-oriented program。
10.1 JavaScript Object-Oriented Program
写法举例：
//实例化对象
var myObject=new Object();
//属性
myObject.shoeSize="12";//或者myObject['shoeSize']="12";
//方法
myObject.speakYourShoeSize=function(){
alert("shoe size : "+this.shoeSize);
}
//或者
function sayHello(){
alert('hello, my shoeSize is '+this.shoeSize);
}
//...
myObject.sayHello=sayHello;
//复杂的data
var myLibrary=new Object();
myLibrary.books=new Array();
myLibrary.books[0]=new Object();
myLibrary.books[0].title="Turnip Cultivation through the Ages";
myLibrary.books[0].authors=new Array();
var jim=new Object();
jim.name="Jim Brown";
jim.age=9;
myLibrary.books[0].authors[0]=jim;
详细请参考相关资料
由于现在有非常多ajax框架，所以我们使用这些框架的话，可能不需要编写非常复杂的javascript。这种关系就像你直接使用jsp和使用jsf类似。
但如果需要自家编写一个组件的话，那么就要精通javascript了。
对于xml的解析和操作，目前已经有非常多的成熟的第三方类库，我们只要会使用这些api和选择那种类库而已。
经常用的有dom4j, castor, xstream等
2. ajax in action
12 附注：
12.1 什么是web2.0
web2.0是一个被过度炒作的概念，前些时候老有些人来找我要我谈谈对web 2.0的看法和作为web 2.0的公司的运作， 我一概拒绝了， 经常我反问对方：“什么是web 2.0?”，于是我听到了各种各样的观点， 几乎很少能说出个头绪。
其实是本人也不懂，看了很多web2.0的定义，也是云里雾里，所以觉得国内还没有真正搞清楚“什么是web 2.0?”，只是一个被过度炒作的概念。
Wikipedia中关于web2.0的描述是较多被引用的，但需要警惕，wikipedia中关于web 2.0的东西是存在争议的， 这在wikipedia中明确给出了争议性内容的警告（关于警告的说明可以点击link去了解详细的含义）：
因此，如果把wikipedia中的web 2.0的描述当成“定义”或者“经典”是非常片面的。 其实wekipedia并没有能下出一个定义，只是说明了哪些东西属于目前所说的web 2.0的技术：
l CSS + XHTML
l AJAX （最近很红火的新概念老技术，我自己的理解和定义是：通过网页内的javascipt调用来减少web页面刷新的必要性来提高web可用性的一种古老技术）
l 通过RSS/ATOM同步数据
l 通过RSS/ATOM聚合数据
l 友好的URL (例如uuzone的blog url: www.uuzone.com/blog/mao 而不是www.uuzone.com/app/showblog.do?blogid=91829&show=1&session=iuewqiyq32 之类的url)
l 支持按照blog的方式来发表 （说实话我不理解，为什么支持按照blog的方式来发表就算web 2.0 ）
l 采用REST（Representational State Transfer）的API或者XML的web service （其实REST本身就是很古老，而且定义不是非常严谨的。 不过我一直非常欣赏REST方式的web serivce界面）
l 社会性，能把东西分享给朋友等 （ 这就算2.0? ）
其中还说了一些更general的东西：
l 系统的数据交换要很容易
l 一些数据应该由用户创建和拥有
l 完全是web based.
一篇关于“What Is Web 2.0”的文章：
http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
扫一扫
1168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
