ajax学习指南

原创 2006年06月01日 19:44:00

1 介绍... 1

2 ajax xmlhttprequest最简单实例... 1

2.1 html例子... 1

2.2 jsp的一个例子... 2

2.2.1 a.jsp. 2

2.2.2 abc.jsp. 3

3 AJAX基础教程... 3

4 进阶练习... 4

5 ajax的框架... 4

6 ajax+jsf 4

7 现有产品... 4

8 ajax的安全性... 4

9 javascript+xml 4

9.1 JavaScript Object-Oriented Program.. 5

9.2 Xml 6

10 参考资料... 6

 

1 介绍

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 ajax xmlhttprequest最简单实例

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" onclick="getData()">

3.2 jsp的一个例子

注:该例子解决中文问题

3.2.1 a.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>

 

3.2.2 abc.jsp

 

<%@ 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

 

5 进阶练习

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的基础教程:

DWRAJAX如此简单:http://www.matrix.org.cn/resource/article/43/43926_DWR_AJAX.html

7 ajax+jsf

ICEfaces Community Edition v1.0 Beta Released

Demo: http://www.icesoft.com/products/demos_icefaces.html

8 现有产品

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

10 javascript+xml

ajax=javascript+xml,所以用好ajax的前提是良好的javascriptxml的知识,一个好的交互操作(如:下图),可能需要编写大量的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了。

10.2 Xml

对于xml的解析和操作,目前已经有非常多的成熟的第三方类库,我们只要会使用这些api和选择那种类库而已。

经常用的有dom4j, castor, xstream

11 参考资料

1.         http://spaces.msn.com/javabigworld/PersonalSpace.aspx?_c11_blogpart_blogpart=blogview&_c=blogpart&partqs=cat%3dajax

 

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 (例如uuzoneblog 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         采用RESTRepresentational State Transfer)的API或者XMLweb 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

 

 

Ajax学习指南

  • 2012年05月19日 08:10
  • 35.61MB
  • 下载

Flash动画学习指南十三:使用JSFL

转自:http://bbs.9ria.com/thread-72749-1-1.html 要求 知识储备                  软件需求          ...

Mysql 入门学习指南

在很多地方都有人提到mysql这个数据,之前没有接触过的mysql数据库的童鞋们可以跟我一起走进mysql的世界。   安装我就不多说了,都是傻瓜的安装。   安装好了之后就可以看到服务里多了...

WebView学习指南2

2、MainWebView3.java的内容,请注意注释内容: 001 package android.basic.lesson29; ...
  • li11222
  • li11222
  • 2012年06月14日 19:52
  • 339

AutoCAD .NET API二次开发学习指南

作者:杜长宇 – Autodesk开发技术顾问 2012年4月20日 AutoCAD作为Autodesk公司的旗舰产品,已经在各个行业得到了广泛的应用,DWG格式更是成为事实上的工业标准。与其说...

RedHat Linux 多媒体学习指南 (共 36 部原创视频)

1.为sco unix 添加第二块网卡 [url]http://you.video.sina.com.cn/b/11695632-1443650204.html[/url]   2.为sco unix...
  • lcgweb
  • lcgweb
  • 2014年05月19日 19:09
  • 657

《C/C++学习指南(语法篇)》 - 关于本书

创作目的:想以自己的能力和经验为国内(及国外)的读者奉献一本好书,一本让人一看就懂、“不可能读不懂”的经典教程。它的理念是让编程变得简单,让人一看就懂。它的目标是成为大中专院校、培训班、从业人员和爱好...

浅谈总线通信机制----USB学习指南与总结

众所周知,USB别看就只有四条线,但只是对于眼睛看到的来讲,确实它的构造就很简单。    但是USB协议本身就是很复杂的一样东西,但其实把关系搞明白了也不复杂,毕竟工作不可能全部都用的得到,所以,只要...

CCNA学习指南 网络互联

1.网络互联基础有时候必须将大网络划分成一系列小网络,因为随着网络的增大,用户响应将非常缓慢,而 LAN 数据流将发生严重拥塞。对于这种问题,解决之道是将大型网络划分成众多小网络,这称为网络分段( n...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ajax学习指南
举报原因:
原因补充:

(最多只允许输入30个字)