AJAX 越来越火,连我这个技术如此落后的人都忍不住想试一把,的确,它有着许多诱人的能力,异步,不刷新页面,这正是我们想要的,多年来看着IE 下的蓝条缓慢的前进已经成了我们生活的一部分,终于有机会可以告别慢长的等待,AJAX让我跃跃欲试。
Ajax(Asynchronous JavaScript+XML,也就是异步的JavaScript+XML)由Adaptive Path的咨询顾问 Jesse James Garrett首先提出。
先到IBM开发者社区,看到了众的的AJAX文章,了解了AJAX的四大基础:
HTML、JavaScript 、DHTML 和 DOM
也有人说CSS 也在其中,我确认为有没有CSS没多大关系。
除了HTML 其它几种东西都没接触过,一个一个看吧。
先来看看JavaScript 脚本语言:
找了份资料,JavaScript语言参考手册.chm 很不错啊,觉得不太难,
到写个例子试一下的时候发现,太乱了,这种语言,也许这东西根本称不上语言,写起来没头没尾的,连个标准的入口都没有,数据类型也没有,晕,上网找了一段别人写好的代码:
/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
@end @*/
翻了半天的手册也没找到@代表什么东东,郁闷。同时也没找到Msxml2.XMLHTTP 是个什么东东,只好概念性的理解这是判断IE 版本的,于是勉强往下:
<DIV align=center>
<DIV id=sb style="BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BACKGROUND: #DCDCDC; WIDTH: 400px; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 14px; TEXT-ALIGN: left">
<DIV id=sbChild1 style="FILTER: Alpha(Opacity=0, FinishOpacity=80, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); OVERFLOW: hidden; WIDTH: 100%; POSITION: absolute; HEIGHT: 12px">
<DIV style="BACKGROUND: #000000; WIDTH: 100%" hidden overflow: height:12px;></DIV></DIV>
<DIV style="FONT-SIZE: 10px; WIDTH: 400px; COLOR: white; FONT-FAMILY: arial; POSITION: absolute; HEIGHT: 14px; TEXT-ALIGN: center"></DIV></DIV>
<P></P>
<DIV id=infor style="FONT-SIZE: 11px; WIDTH: 100%; COLOR: #999999; FONT-FAMILY: arial; POSITION: relative; HEIGHT: 14px; TEXT-ALIGN: center"></DIV></DIV>
立即晕倒,爬起来后花了一上午的时间才明白这是DHTML 的东东,基本弄清了意思是设置几个区域外观。 继续前行。
准备做一个起动和关闭服务页面,不刷新才是最好的。
先放了四个按钮:
<input type="button" value="初始化猫" name="init" οnclick="initModem(1)" />
<input type="button" value="终止猫 " name="init" οnclick="initModem(2)" />
<input type="button" value="起动服务" name="init" οnclick="initModem(3)" />
<input type="button" value="结束服务" name="init" οnclick="initModem(4)" />
再写它的处理事件
function initModem(st){
var url = "StartServlet?start="+st;
u=0;
i=25;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = initChange;
xmlHttp.send(null);
}
发送到名为StartServlet的servlet
写回调函数:
function initChange(){
if(xmlHttp.readyState == 4){
if (xmlHttp.status == 200){
str=xmlHttp.responseText;
}
}
}
发现好难调试啊,没法设断点,只好用 window.alert("---");
来调,郁闷++;
不过我发现了一个好用的JavaScript 编辑器叫1st JavaScript Editor ,可以自动提示,郁闷--;
不记得从哪儿下的了,百度一下有很多地方可以下。
明天继续!
href="//www.ibm.com/common/v14/main.css" type="text/css" rel="stylesheet" /> media="all" href="//www.ibm.com/common/v14/cn/zh/screen.css" type="text/css" rel="stylesheet" /> media="print" href="//www.ibm.com/common/v14/cn/zh/print.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="//www.ibm.com/common/v14/cn/zh/detection.js" language="JavaScript"></script> media="screen" href="//www.ibm.com/common/v14/cn/zh/ie2_screen.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="/developerworks/js/dropdown.js" language="JavaScript"></script> <script type="text/javascript" src="/developerworks/email/grabtitle.js" language="JavaScript"></script> <script type="text/javascript" src="/developerworks/email/emailfriend2.js" language="JavaScript"></script> <script type="text/javascript" src="/developerworks/js/ajax1.js" language="javascript"></script> <script type="text/javascript" src="/developerworks/js/searchcount.js" language="javascript"></script> <script type="text/javascript" language="JavaScript">var emailAbstract = "Ajax 由 HTML、JavaScript、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本系列的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。"; </script> href="//www.ibm.com/common/v14/main.css" type="text/css" rel="stylesheet" /> media="all" href="//www.ibm.com/common/v14/cn/zh/screen.css" type="text/css" rel="stylesheet" /> media="print" href="//www.ibm.com/common/v14/cn/zh/print.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="//www.ibm.com/common/v14/cn/zh/detection.js" language="JavaScript"></script> media="screen" href="//www.ibm.com/common/v14/cn/zh/ie2_screen.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="/developerworks/js/dropdown.js" language="JavaScript"></script> <script type="text/javascript" src="/developerworks/email/grabtitle.js" language="JavaScript"></script> <script type="text/javascript" src="/developerworks/email/emailfriend2.js" language="JavaScript"></script> <script type="text/javascript" src="/developerworks/js/ajax1.js" language="javascript"></script> <script type="text/javascript" src="/developerworks/js/searchcount.js" language="javascript"></script> <script type="text/javascript" language="JavaScript">var emailAbstract = "Ajax 由 HTML、JavaScript、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本系列的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。"; </script>
Ajax(Asynchronous JavaScript+XML,也就是异步的JavaScript+XML)由Adaptive Path的咨询顾问 Jesse James Garrett首先提出。
先到IBM开发者社区,看到了众的的AJAX文章,了解了AJAX的四大基础:
HTML、JavaScript 、DHTML 和 DOM
也有人说CSS 也在其中,我确认为有没有CSS没多大关系。
除了HTML 其它几种东西都没接触过,一个一个看吧。
先来看看JavaScript 脚本语言:
找了份资料,JavaScript语言参考手册.chm 很不错啊,觉得不太难,
到写个例子试一下的时候发现,太乱了,这种语言,也许这东西根本称不上语言,写起来没头没尾的,连个标准的入口都没有,数据类型也没有,晕,上网找了一段别人写好的代码:
/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
@end @*/
翻了半天的手册也没找到@代表什么东东,郁闷。同时也没找到Msxml2.XMLHTTP 是个什么东东,只好概念性的理解这是判断IE 版本的,于是勉强往下:
<DIV align=center>
<DIV id=sb style="BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BACKGROUND: #DCDCDC; WIDTH: 400px; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 14px; TEXT-ALIGN: left">
<DIV id=sbChild1 style="FILTER: Alpha(Opacity=0, FinishOpacity=80, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); OVERFLOW: hidden; WIDTH: 100%; POSITION: absolute; HEIGHT: 12px">
<DIV style="BACKGROUND: #000000; WIDTH: 100%" hidden overflow: height:12px;></DIV></DIV>
<DIV style="FONT-SIZE: 10px; WIDTH: 400px; COLOR: white; FONT-FAMILY: arial; POSITION: absolute; HEIGHT: 14px; TEXT-ALIGN: center"></DIV></DIV>
<P></P>
<DIV id=infor style="FONT-SIZE: 11px; WIDTH: 100%; COLOR: #999999; FONT-FAMILY: arial; POSITION: relative; HEIGHT: 14px; TEXT-ALIGN: center"></DIV></DIV>
立即晕倒,爬起来后花了一上午的时间才明白这是DHTML 的东东,基本弄清了意思是设置几个区域外观。 继续前行。
准备做一个起动和关闭服务页面,不刷新才是最好的。
先放了四个按钮:
<input type="button" value="初始化猫" name="init" οnclick="initModem(1)" />
<input type="button" value="终止猫 " name="init" οnclick="initModem(2)" />
<input type="button" value="起动服务" name="init" οnclick="initModem(3)" />
<input type="button" value="结束服务" name="init" οnclick="initModem(4)" />
再写它的处理事件
function initModem(st){
var url = "StartServlet?start="+st;
u=0;
i=25;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = initChange;
xmlHttp.send(null);
}
发送到名为StartServlet的servlet
写回调函数:
function initChange(){
if(xmlHttp.readyState == 4){
if (xmlHttp.status == 200){
str=xmlHttp.responseText;
}
}
}
发现好难调试啊,没法设断点,只好用 window.alert("---");
来调,郁闷++;
不过我发现了一个好用的JavaScript 编辑器叫1st JavaScript Editor ,可以自动提示,郁闷--;
不记得从哪儿下的了,百度一下有很多地方可以下。
明天继续!
href="//www.ibm.com/common/v14/main.css" type="text/css" rel="stylesheet" /> media="all" href="//www.ibm.com/common/v14/cn/zh/screen.css" type="text/css" rel="stylesheet" /> media="print" href="//www.ibm.com/common/v14/cn/zh/print.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="//www.ibm.com/common/v14/cn/zh/detection.js" language="JavaScript"></script> media="screen" href="//www.ibm.com/common/v14/cn/zh/ie2_screen.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="/developerworks/js/dropdown.js" language="JavaScript"></script> <script type="text/javascript" src="/developerworks/email/grabtitle.js" language="JavaScript"></script> <script type="text/javascript" src="/developerworks/email/emailfriend2.js" language="JavaScript"></script> <script type="text/javascript" src="/developerworks/js/ajax1.js" language="javascript"></script> <script type="text/javascript" src="/developerworks/js/searchcount.js" language="javascript"></script> <script type="text/javascript" language="JavaScript">var emailAbstract = "Ajax 由 HTML、JavaScript、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本系列的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。"; </script> href="//www.ibm.com/common/v14/main.css" type="text/css" rel="stylesheet" /> media="all" href="//www.ibm.com/common/v14/cn/zh/screen.css" type="text/css" rel="stylesheet" /> media="print" href="//www.ibm.com/common/v14/cn/zh/print.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="//www.ibm.com/common/v14/cn/zh/detection.js" language="JavaScript"></script> media="screen" href="//www.ibm.com/common/v14/cn/zh/ie2_screen.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="/developerworks/js/dropdown.js" language="JavaScript"></script> <script type="text/javascript" src="/developerworks/email/grabtitle.js" language="JavaScript"></script> <script type="text/javascript" src="/developerworks/email/emailfriend2.js" language="JavaScript"></script> <script type="text/javascript" src="/developerworks/js/ajax1.js" language="javascript"></script> <script type="text/javascript" src="/developerworks/js/searchcount.js" language="javascript"></script> <script type="text/javascript" language="JavaScript">var emailAbstract = "Ajax 由 HTML、JavaScript、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本系列的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。"; </script>