Ajax的小例子
添加如下代碼: <script language=Javascript src="http://home./scripts/php/markit.php">
</script>
讓自己的網(wǎng)頁有了簡(jiǎn)單的批注功能 
由 liu2liu2 發(fā)表于 
02:05 PM | 
評(píng)論 (1)  
初探AjaxTags
AjaxTags項(xiàng)目是在現(xiàn)有的Struts HTML標(biāo)記庫的基礎(chǔ)上,添加對(duì)AJAX支持。 AjaxTags改寫了Struts標(biāo)簽類org.apache.struts.taglib.html.FormTag和org.apache.struts.taglib.html.BaseHandlerTag,并使用Struts的plugin技術(shù),使得Struts提供了對(duì)AJAX的支持。 以下是jsp中簡(jiǎn)單的示例: 
<html:form action="example1" ajaxRef="example1">
  First Name: <html:text property="firstName" size="25" value="Frank" />
  <br>
  Last Name: <html:text property="lastName" size="25" value="Zammetti" />
  <br>
  <html:button property="button" value="Click to do Ajax!" ajaxRef="button" />
</html:form>
Result:<br>
<span id="example1_resultLayer"> </span>
注意
和的ajaxRef屬性。 ajaxRef屬性中內(nèi)容是在ajax-config.xml中定義的,例如本示例的配置部分如下: 
<!DOCTYPE ajaxConfig PUBLIC "ajaxConfig" "ajaxConfig">
<ajaxConfig>
  <!-- Define a custom request handler that generates XML for example 2 -->
	<handler name="CustomXMLGenerator" type="request">
		<function>customGenerateXML</function>
		<location>customXMLGenerator.js</location>
	</handler>
	<!-- Configuration for example 1 -->
	<form ajaxRef="example1">
		<element ajaxRef="button">
			<event type="onclick">
				<requestHandler type="std:QueryString">
					<target>example1.do</target>
					<parameter>firstName=firstName,lastName=lastName</parameter>
				</requestHandler>
				<responseHandler type="std:InnerHTML">
					<parameter>example1_resultLayer</parameter>
				</responseHandler>
			</event>
		</element>
	</form>
</ajaxConfig>
在配置文件中定義了該表單的屬性,以及按鈕觸發(fā)的事件和回寫結(jié)果的處理方法。采用很巧妙的封裝方法實(shí)現(xiàn)了Struts的AJAX調(diào)用。當(dāng)然Ajaxtags離實(shí)用階段還有相對(duì)長(zhǎng)的一段距離,但它提供了一種在現(xiàn)有的軟件架構(gòu)上高效率開發(fā)ajax應(yīng)用程序的可行性方案。 
由 liu2liu2 發(fā)表于 
04:21 PM | 
評(píng)論 (0)  
關(guān)于AJAX構(gòu)架的一點(diǎn)構(gòu)想
以前搞了一個(gè)XPP的編程平臺(tái),應(yīng)該來說,不是一個(gè)成功的東東。XPP本身確實(shí)解決了目前編程的諸多問題,例如頁面狀態(tài)保持、統(tǒng)一的界面風(fēng)格、良好的數(shù)據(jù)效驗(yàn)器,但并沒有考慮到數(shù)據(jù)傳輸?shù)膯栴},雖然采用了壓縮流來傳遞數(shù)據(jù),但同樣也增加了服務(wù)器的壓力。也許對(duì)于中小型的企業(yè)應(yīng)用,XPP可以作為一個(gè)被選的平臺(tái),但作為大型的企業(yè)應(yīng)用,XPP表現(xiàn)恐怕很難實(shí)用。
在有了上次失敗的經(jīng)歷后,考慮是否可以采用AJAX作為一個(gè)輕量級(jí)的框架(XPP的體系太過龐雜,過多在服務(wù)端考慮了前端的UI邏輯,也是這才是失敗的根本),側(cè)重于業(yè)務(wù)邏輯層的調(diào)用,不再考慮UI層的邏輯。
AJAX主要實(shí)現(xiàn)的主要技術(shù):
1、XmlHttpRequest主要考慮是否需要支持瀏覽器的差異性,目前至少提供對(duì)IE和Mozilla的支持,以后是否考慮對(duì)其他瀏覽器進(jìn)行支持?
這是是個(gè)很easy的問題,暫時(shí)不進(jìn)行深入探索。
2、XML數(shù)據(jù)傳輸層的封裝(AJAX的核心)AJAX的核心數(shù)據(jù)傳遞毫無疑問只能是基于XML的,如何有效地對(duì)XML數(shù)據(jù)輸送層進(jìn)行封裝,來保證構(gòu)架良好的可用性和擴(kuò)展性?這里主要是需要考慮兩個(gè)方面:良好的封裝性和執(zhí)行效率。
我初步的想法是服務(wù)端采用類似buffalo的技術(shù)實(shí)現(xiàn)JAVA POJO與XML的序列化,客戶端采用js實(shí)現(xiàn)類封裝實(shí)現(xiàn)JAVA對(duì)象的映射(考慮采用服務(wù)器端自動(dòng)生成js文件,并動(dòng)態(tài)加載js對(duì)象,以提高瀏覽器的處理能力),并在此基礎(chǔ)上實(shí)現(xiàn)XML-PRC。
3、服務(wù)端集成考慮AJAX與其它架構(gòu)集成的方案,并保證系統(tǒng)良好的安全性和執(zhí)行效率。
暫時(shí)處于疑問中的幾個(gè)問題:
1、UI層如何表現(xiàn)?采用AJAX的話,是采用js構(gòu)建頁面還是采用XmlHttp獲取服務(wù)端返回的頁面信息?
2、數(shù)據(jù)效驗(yàn)問題?對(duì)于AJAX作RIA的應(yīng)用,UI層的數(shù)據(jù)效驗(yàn)肯定是必要的,由于采用AJAX,用戶繞過UI效驗(yàn)是很容易的事情,如果在服務(wù)端同樣做數(shù)據(jù)效驗(yàn)的話,是否會(huì)增加代碼的編寫工作量?是否能夠采用統(tǒng)一的數(shù)據(jù)效驗(yàn)?如何可以的話,如何實(shí)現(xiàn)?
目前buffalo主要有如下問題:
a. JAVA Object的序列化邏輯與RPC的業(yè)務(wù)邏輯混在一起,不利于系統(tǒng)的擴(kuò)展
b. buffalo只支持UTF-8編碼的XML,不支持GBK編碼的XML
c. buffalo可以調(diào)用服務(wù)的所有方法,可能會(huì)對(duì)服務(wù)器產(chǎn)生一定的安全隱患
由 liu2liu2 發(fā)表于 
02:17 PM | 
評(píng)論 (1)  
JavaScript OOP
JavaScript 是一種描述性的腳本語言(Script Language),它可以非常自由地被嵌入到HTML 的文件之中。使用JavaScript 可以做什么呢?它的作用很簡(jiǎn)單,就是對(duì)網(wǎng)頁瀏覽者當(dāng)前所觸發(fā)的事件進(jìn)行處理或?qū)W(wǎng)頁進(jìn)行初始化工作。它是事先在網(wǎng)頁中編寫好代碼(或叫做“腳本”),然后此代碼伴隨Html文件一起傳送到客戶端的瀏覽器上,由瀏覽器對(duì)這些代碼進(jìn)行解釋執(zhí)行,而其執(zhí)行期間并沒有勞駕服務(wù)器幫忙,這樣就減輕了服務(wù)器的負(fù)擔(dān)。 
許多編程高手都瞧不起JavaScript編程,認(rèn)為只是小孩子的玩意。的確,JavaScript作為一種腳本語言,比起其他語言來說,顯得非常簡(jiǎn)單,沒有很復(fù)雜的語法,沒有龐雜的體系架構(gòu)。 
一個(gè)世界,可以完全由對(duì)象組成,而將算法所基于的世界只用對(duì)象表現(xiàn)出來,再進(jìn)行后續(xù)代碼的編寫,這種編程方法就被稱作面向?qū)ο蟮木幊趟枷搿?BR>OOP的三大要素:
1. 封裝
2. 繼承
3. 多態(tài)
JavaScript的對(duì)象封裝,主要依靠function來實(shí)現(xiàn)。以下是一個(gè)簡(jiǎn)單的示例: 
//*********************************************
// 定義Pet(寵物)對(duì)象
//*********************************************
function Pet() {
    //名稱
    this.name = null;
    //顏色
    this.color = null;
    //獲取名稱
    this.getName = function() {
        return this.name;
    };
    //設(shè)置名稱
    this.setName = function(newName) {
        this.name = newName;
    };
    //獲取顏色
    this.getColor = function() {
        return this.color;
    };
    //設(shè)置顏色
    this.setColor = function(newColor) {
        this.color = newColor;
    };
    //定義一個(gè)需要實(shí)現(xiàn)的方法
    this.getFood = null;
    //獲取寵物的描述信息
    this.toString = function() {
        return "The pet is " + this.name +",it‘s "+this.color+",and it likes "+this.getFood()+".";
    };
}
JavaScript的繼承的實(shí)現(xiàn)主要依靠prototype(原型)來實(shí)現(xiàn),下面為Pet類編寫一個(gè)子類。 
//*********************************************
// 定義Cat(貓)對(duì)象
//*********************************************
function Cat() {
    //實(shí)現(xiàn)Pet中定義的getFood方法
    this.getFood = function() {
        return "fish";
    };
}
//聲明Cat的原型,即Cat的父類
Cat.prototype = new Pet;
多層次繼承
//*********************************************
// 定義PersianCat(波斯貓)對(duì)象
//*********************************************
function PersianCat() {
}
//聲明PersianCat的原型,即PersianCat的父類
PersianCat.prototype = new Cat;
3.3.    重載(override)與多態(tài)(Polymorphism)
//重載Pet的toString方法
PersianCat.prototype.toString = function() {
    return "It‘s just a persian cat.";
};
注意:Override和Overload的區(qū)別,JavaScript是不支持Overload的,原因是……你自己想想吧。
JavaScript是一種弱類型的語言,所以不要把它與C++、JAVA等語言進(jìn)行比較。 
//*********************************************
// 定義Pet(寵物)對(duì)象
//*********************************************
function Pet() {
    //名稱
    this.name = null;
    //顏色
    this.color = null;
    //獲取名稱
    this.getName = function() {
        return this.name;
    };
    //設(shè)置名稱
    this.setName = function(newName) {
        this.name = newName;
    };
    //獲取顏色
    this.getColor = function() {
        return this.color;
    };
    //設(shè)置顏色
    this.setColor = function(newColor) {
        this.color = newColor;
    };
    //定義一個(gè)需要實(shí)現(xiàn)的方法
    this.getFood = null;
    //獲取寵物的描述信息
    this.toString = function() {
        return "The pet is " + this.name +",it‘s "+this.color+",and it likes "+this.getFood()+".";
    };
}
//*********************************************
// 定義Cat(貓)對(duì)象
//*********************************************
function Cat() {
    //實(shí)現(xiàn)Pet中定義的getFood方法
    this.getFood = function() {
        return "fish";
    };
}
//聲明Cat的原型,即Cat的父類
Cat.prototype = new Pet;
//*********************************************
// 定義PersianCat(波斯貓)對(duì)象
//*********************************************
function PersianCat() {
}
//聲明PersianCat的原型,即PersianCat的父類
PersianCat.prototype = new Cat;
//重載Pet的toString方法
PersianCat.prototype.toString = function() {
    return "It‘s just a persian cat.";
};
//*********************************************
// 定義Dog(狗)對(duì)象
//*********************************************
function Dog() {
    //實(shí)現(xiàn)Pet中定義的getFood方法
    this.getFood = function() {
        return "bone";
    };
}
//聲明Dog的原型,即Dog的父類
Dog.prototype = new Pet;
<script language="javascript" src="Pet.js" >
</ script >
< script language="javascript">
//定義一個(gè)Cat對(duì)象
var cat = new Cat();
cat.setName("MiMi");
cat.setColor("white");
//定義一個(gè)Dog對(duì)象
var dog = new Dog();
dog.setName("WangWang");
dog.setColor("yellow");
//定義一個(gè)PersianCat對(duì)象
var persianCat = new PersianCat();
//定義數(shù)組,保存上面的三個(gè)對(duì)象
var pets = new Array(3);
pets[0] = cat;
pets[1] = dog;
pets[2] = persianCat;
//測(cè)試程序
for(var i=0,size=pets.length;i<size;i++) {
    alert(pets[i].toString());
}
</script>
彈出三個(gè)對(duì)話框,分別如下:
The pet is MiMi,it‘s white,and it likes fish.
The pet is WangWang,it‘s yellow,and it likes bone.
It‘s just a persian cat.
本示例在IE6.0下測(cè)試通過。 
由 liu2liu2 發(fā)表于 
09:43 PM | 
評(píng)論 (2)