<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>聰明的生活2 &#187; ajax</title>
	<atom:link href="http://blog.yslifes.com/archives/category/program/javascript/ajax/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.yslifes.com</link>
	<description>自己寫java程式的一些筆記</description>
	<lastBuildDate>Tue, 27 Jul 2010 02:13:45 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
	<atom:link rel='hub' href='http://blog.yslifes.com/?pushpress=hub'/>
	
<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type='text/javascript' src='http://blog.yslifes.com/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery.ajax({type:'GET',url:'http://blog.yslifes.com/wp-content/plugins/wp-postviews-plus/postviews_plus.php',data:'todowppvp=add&type=cat&id=38_1',cache:false,dataType:'script'});
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->
	<item>
		<title>網頁除錯觀察的Browser工具FireBug-開發者工具-開發人員工具</title>
		<link>http://blog.yslifes.com/archives/699</link>
		<comments>http://blog.yslifes.com/archives/699#comments</comments>
		<pubDate>Tue, 27 Jul 2010 02:13:45 +0000</pubDate>
		<dc:creator>yku</dc:creator>
				<category><![CDATA[ajax]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[教學]]></category>
		<category><![CDATA[軟體介紹]]></category>
		<category><![CDATA[chrome]]></category>
		<category><![CDATA[debug]]></category>
		<category><![CDATA[fiefox]]></category>
		<category><![CDATA[firebug]]></category>
		<category><![CDATA[ie]]></category>

		<guid isPermaLink="false">http://blog.yslifes.com/archives/699</guid>
		<description><![CDATA[當程式人員或網頁設計師在開發網頁時都會遇到一個問題，就是debug不易，不過自從Firefox大行其道後，這個問題被FireBug解決了，使用FireBug可以很方便的知道網頁那裡出了問題，可以直接修改CSS及html dom內容，還可以知道整個網頁到底傳輸了什麼內容及資訊等等，可說是十分好用，Microsoft在其後釋出的Internet Explorer及Google的Browser也都支援了類似的功能，不過更新的頻率並不像FireBug那麼高。 首先介紹IE8的開發者工具 可以由上方工具列的工具－＞開發者工具 來啟動（或F12） 使用開發者工具HTML tab裡的滑鼠指標可以直接取得網頁裡HTML的結構內容 而在這個HTML tab也可以直接修改文件內容或CSS，不過個人並不覺得比FireBug好用 CSS tab可以取得CSS內容，指令碼則是javascript的內容 Goolgle Chrome 開發人員工具 可以從右上角的文件按鈕－＞開發人員選項－＞開發人員工具 來啟動 Elements tab裡的內容就是網頁HTML結構內容，一樣可以直接修改網頁內容資料及CSS內容，所見即所得，結果馬上就可以在網頁上顯示了。 右側Styles分頁裡Computed Style裡可以知道這個元件應該有的所有CSS，可以很方便的追查到底那裡影響了網頁內容（像是字型等） Resources是所有載入網頁的圖檔、網頁、css檔、javascript檔、flash檔等的內容、時間等資訊。 Console控制台可以知道網頁產生的錯誤，像javascrip錯誤、css錯誤等資訊。 也可直接在元素上按右鍵選＂檢查元素＂，就可以直接來到此元素的HTML結構位置了 FireFox FireBug 以上二個工具並沒有很細的介紹，其實都大同小異，大概都跟FireBug相似吧，所以沒介紹到的功能可以參考以下介紹，再去IE及Chrome來查看。 FireBug安裝 FireBug並非FireFox原生套件，所以需要自行安裝plugin，安裝方法很簡單 工具－＞附加元件－＞取得元件－＞查詢firebug－＞瀏覽所有….－＞找到FireBug選擇新增至Firefox 然後安裝好後可以在擴充套件裡找到Firebug的版本資訊，要移除或停用也可以在此頁面操作 右下角的小蟲圖就是啟動FireBug的按鈕，啟用後如果沒有得到應有的資訊時，可以重新整理一次網頁內容 FireBug簡介及啟用 啟用FireBug後可以看到如果有錯誤訊息時，右下角原本小蟲的圖示變成了Error提示 如果想要啟用某一項功能，像是網路、DOM等等時，記得按到分頁tab裡，然後選擇Enabled，如此才能啟動及使用，如果沒有想要的資訊，記得重新整理網頁一下。 如何使用HTML 檢查器？可以直接按主控台分頁tab左邊的按鈕，然後選擇元素，就會移到此元素的HTML結構位置，右側可以看到使用的CSS內容。 或者直接在元素上按右鍵選擇觀察元素 FireBug主控台 主控台可以看到Ajax執行的網址及傳送資訊、Script錯誤內容、資訊及錯誤的行數，可以很方便的debug Ajax執行的網址﹑回應狀態、秒數及回應的內容等，在處理Ajax debug時實在好用 FireBug HTML 資訊 除了簡介時介紹的二種取得元素HTML位置，還有另一種是直接在HTML結構上搜尋，網頁內容也會有一個選取方框來提示目前的元素 也可以直接在HTML結構裡修改內容或CSS，可以省去很多網頁更新的時間 FireBug Script 資訊 這個分頁可以看到所有載入的javascript內容，如果在控制台有script的錯誤資訊，可以來這裡查看其行數以便除錯 右側還有一個監看視窗，可以直接在裡面輸入要執行的javascript內容，在每次來到此頁面時都會自動執行，所以不用時記得刪除。像是需要知道某個變數值時，就可以利用來alert變數內容。 FireBug CSS 資訊 [...]]]></description>
		<wfw:commentRss>http://blog.yslifes.com/archives/699/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>prototype Ajax回傳json物件的處理</title>
		<link>http://blog.yslifes.com/archives/620</link>
		<comments>http://blog.yslifes.com/archives/620#comments</comments>
		<pubDate>Sun, 25 Apr 2010 00:02:03 +0000</pubDate>
		<dc:creator>yku</dc:creator>
				<category><![CDATA[ajax]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jsp]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[教學]]></category>
		<category><![CDATA[json]]></category>

		<guid isPermaLink="false">http://blog.yslifes.com/archives/620</guid>
		<description><![CDATA[一般人在設計ajax成功回傳事件時，有幾種方式來處理回傳的資料，一種是純文字或html code，一種是xml格式那另一種就是json格式，json格式不像xml需要成對的tag，所以在回傳資料長度上會顯的短很快，如果整個網站都大量使用ajax方法的話，選擇json是一個很好的方法。 json的相關資訊可以在這裡看到：JSON in JavaScript prototype這個framework本身就有支援To JSON的方法，有二種格式可以轉換成json，一種是javascript的class，另一種就是純文字了，不過純文字的內容要為json格式才能被轉換，如下： &#123;&#34;bindings&#34;: &#91; &#123;&#34;ircEvent&#34;: &#34;PRIVMSG&#34;, &#34;method&#34;: &#34;newURI&#34;, &#34;regex&#34;: &#34;^http://.*&#34;&#125;, &#123;&#34;ircEvent&#34;: &#34;PRIVMSG&#34;, &#34;method&#34;: &#34;deleteURI&#34;, &#34;regex&#34;: &#34;^delete.*&#34;&#125;, &#123;&#34;ircEvent&#34;: &#34;PRIVMSG&#34;, &#34;method&#34;: &#34;randomURI&#34;, &#34;regex&#34;: &#34;^random.*&#34;&#125; &#93; &#125;; 所以在設計ajax response文字時，就特意的輸出成json格式的內容，再利用prototype轉成json物件，那就可以在javascript裡直接使用了。 以下用一個簡單的例子來說明，form request ajax要求一個查詢，查詢經由一個jsp做處理，處理好後輸出json格式回傳給剛才的request，接收到response後，轉換成javascript的json物件，再取出物件內容來顯示在畫面上。 底下是prototype Ajax的寫法，直接用form上的設定當成request，然後再處理responseText就可以了。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 [...]]]></description>
		<wfw:commentRss>http://blog.yslifes.com/archives/620/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[Javascript]AutoComplete自動完成效果</title>
		<link>http://blog.yslifes.com/archives/619</link>
		<comments>http://blog.yslifes.com/archives/619#comments</comments>
		<pubDate>Fri, 23 Apr 2010 23:48:39 +0000</pubDate>
		<dc:creator>yku</dc:creator>
				<category><![CDATA[ajax]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[opensource]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[autocomplete]]></category>

		<guid isPermaLink="false">http://blog.yslifes.com/archives/619</guid>
		<description><![CDATA[之前為了做這AutoComplete效果找了好多資料，不過大都是jQuery的，當然不是不好用，只是在一個頁面載入prototype跟jQeruy就會有些衝突的問題要解決。 效果大概會像下面這樣子 作者的資訊如下： Ajax Autocomplete for Prototype, version 1.0.3 (c) 2008 Tomas Kirda http://www.devbridge.com/projects/autocomplete/ 雖然版本不是很新，不過很完整，只要在自己需要的地方再做些修改就可以了 範例提供如下： 以下提供一個範例，只需開啟AutoComplete.html然後輸入Li ，就會由response.html回傳一個json格式顯示出來。 下載點： 範例畫面 使用方法 載入prototype1.6版本 載入autocomplete.js 載入Autocomplete用的css 建立一個input輸入區 new 一個Autocomplete告知來啟動這個效果 以下是大程式部份 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 &#60;script type=&#34;text/javascript&#34; src=&#34;js/prototype.js&#34; &#62;&#60;/script&#62; &#60;script type=&#34;text/javascript&#34; [...]]]></description>
		<wfw:commentRss>http://blog.yslifes.com/archives/619/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[javascript]特效accordion</title>
		<link>http://blog.yslifes.com/archives/511</link>
		<comments>http://blog.yslifes.com/archives/511#comments</comments>
		<pubDate>Mon, 07 Dec 2009 01:22:25 +0000</pubDate>
		<dc:creator>yku</dc:creator>
				<category><![CDATA[ajax]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[rico]]></category>
		<category><![CDATA[scriptaculous]]></category>
		<category><![CDATA[特效]]></category>

		<guid isPermaLink="false">http://blog.yslifes.com/archives/511</guid>
		<description><![CDATA[這裡介紹幾個Accordion特效 1. jquery版本 網址 裡面有很詳細的說明及修改方法，很順暢，不過css有點小多，比較不好改 2. prototype 版本 網址 3.prototype 版本 scriptaculous 網址 說明網址 4.rico 版本 網址]]></description>
		<wfw:commentRss>http://blog.yslifes.com/archives/511/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>[jsp小技巧]利用Throw Exception來完成Ajax</title>
		<link>http://blog.yslifes.com/archives/403</link>
		<comments>http://blog.yslifes.com/archives/403#comments</comments>
		<pubDate>Mon, 28 Sep 2009 13:38:08 +0000</pubDate>
		<dc:creator>yku</dc:creator>
				<category><![CDATA[ajax]]></category>
		<category><![CDATA[jsp]]></category>
		<category><![CDATA[Java]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[opensource]]></category>

		<guid isPermaLink="false">http://blog.yslifes.com/archives/403</guid>
		<description><![CDATA[一般在寫Ajax時，最直覺的使用方法就是利用Ajax Object來要求Server給與回應， 再依回應的內容解西倒底是完成動作？還是有錯誤產生，如必填欄位未填。 這裡介紹一個小技巧，在編譯式的網頁伺服器語言可能比較合適使用。 大概的原理是利用程式在執行有錯誤時Throw Exception來當做錯誤訊息， 回傳給client，而client只要接收到503的錯誤，則就可以知道動作並未完成， 反之則是完成。 範例使用prototype來使用Ajax，傳送及回應，有需要可以參考： Ajax 使用prototype.js 1 以下是載行結果，當有填值時，則回應填寫的值， 沒填值的時候就回傳錯誤訊息。（Exception） １需要建立一個class extends Exception 裡面需實作String getMessage()，這是要給ErrorPage取得值使用的 package myexception; public class AjaxException extends Exception { &#160; private String message ; &#160; public AjaxException(String message) &#160; { &#160;&#160;&#160; this.message = message; &#160; } &#160; public String getMessage() &#160; { &#160;&#160;&#160; return this.message; &#160; } [...]]]></description>
		<wfw:commentRss>http://blog.yslifes.com/archives/403/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>登入遮罩</title>
		<link>http://blog.yslifes.com/archives/312</link>
		<comments>http://blog.yslifes.com/archives/312#comments</comments>
		<pubDate>Thu, 18 Jun 2009 10:43:00 +0000</pubDate>
		<dc:creator>yku</dc:creator>
				<category><![CDATA[ajax]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jsp]]></category>
		<category><![CDATA[prototype]]></category>

		<guid isPermaLink="false">http://blog.yslifes.com/archives/312</guid>
		<description><![CDATA[登入的遮罩因為Ajax的發達而越來越多，不過每個browser所支援的方式都不太一樣 尤其是IE最搞怪，IE6 IE7 IE8都加減有點不支援或特別點，所以在實作javascript上也變的很麻煩 這裡有些網站做的範例有興趣的可以研究看看 iPeen 在內頁的登入畫面可以看到 funp 右上角就有登入 哇客滿 在最底層的商家，推薦書籤 我也做了一個範例，不過是工程師版的，所以很醜 之後會詳細的說明如何實作及提供原始碼 範例頁 http://www.yslifes.com/MyTest/LoginMaskV2/index.jsp 按登入就會出現啦， 帳號：admin 密碼：12345 按登出就會把登入的記錄取消， 登入成功後都會呼叫callback funcion，我是寫成alert(‘成功’);]]></description>
		<wfw:commentRss>http://blog.yslifes.com/archives/312/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>JQuery UI-thickbox.js 解決prototype.js衝突</title>
		<link>http://blog.yslifes.com/archives/234</link>
		<comments>http://blog.yslifes.com/archives/234#comments</comments>
		<pubDate>Fri, 05 Jun 2009 13:16:00 +0000</pubDate>
		<dc:creator>yku</dc:creator>
				<category><![CDATA[ajax]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://blog.yslifes.com/archives/234</guid>
		<description><![CDATA[JQuery 官網 http://jquery.com/ thickbox 官網 http://jquery.com/demo/thickbox/ prototype 官網 http://www.prototypejs.org/ 很習慣使用prototype.js 不過有又需要用到jQuery UI 特效， 其實官方網站已經有把解決方式說明了，主要的衝突點在$ 這一個function，二個套件都有實作 http://docs.jquery.com/Using_jQuery_with_Other_Libraries &#60;html&#62; &#60;head&#62; &#60;script src="prototype.js"&#62;&#60;/script&#62; &#60;script src="jquery.js"&#62;&#60;/script&#62; &#60;script&#62; jQuery.noConflict(); // Use jQuery via jQuery(...) jQuery(document).ready(function(){ jQuery("div").hide(); }); // Use Prototype with $(...), etc. $('someid').hide(); &#60;/script&#62; &#60;/head&#62; &#60;body&#62;&#60;/body&#62; &#60;/html&#62; thickbox是一個jQuery的UI framework 主要是像lightbox一樣，把背景遮照起來， 而利用一個Div 顯示iframe src 內容，就可以不用另開視窗了 &#60;link href="css/thickbox.css" rel="stylesheet" type="text/css"&#62; &#60;script [...]]]></description>
		<wfw:commentRss>http://blog.yslifes.com/archives/234/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>利用ajax實作progressBar</title>
		<link>http://blog.yslifes.com/archives/167</link>
		<comments>http://blog.yslifes.com/archives/167#comments</comments>
		<pubDate>Sat, 16 May 2009 13:15:00 +0000</pubDate>
		<dc:creator>yku</dc:creator>
				<category><![CDATA[ajax]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[jsp]]></category>
		<category><![CDATA[progress bar]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[source]]></category>

		<guid isPermaLink="false">http://blog.yslifes.com/archives/167</guid>
		<description><![CDATA[這是一個用簡單的例子 在不重新刷頁的狀況下來做ProgressBar ps.程式有並沒有Stop請小心使用^^ 參考資料 http://www.javaworld.com.tw/jute/post/view?bid=49&#38;id=157521&#38;sty=3 畫面如下: 原始檔下載]]></description>
		<wfw:commentRss>http://blog.yslifes.com/archives/167/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Ajax使用 prototype.js 3</title>
		<link>http://blog.yslifes.com/archives/166</link>
		<comments>http://blog.yslifes.com/archives/166#comments</comments>
		<pubDate>Thu, 14 May 2009 13:14:00 +0000</pubDate>
		<dc:creator>yku</dc:creator>
				<category><![CDATA[ajax]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[dom]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[prototype]]></category>

		<guid isPermaLink="false">http://blog.yslifes.com/archives/166</guid>
		<description><![CDATA[這裡是一個簡單的範例 在使用prototype.js可以很方便的利用DOM的特性來做一些事情 下一篇將會利用ajax來實做這個範例 &#60;style type="text/css"&#62; &#60;!-- .ta { border-top : 1px solid #6699cc; /*上框線*/ border-bottom : 1px solid #6699cc; /*下框線*/ border-left : 1px solid #6699cc; /*左框線*/ /*border-right : 1px solid #6699cc;*/ /*右框線*/ width : 100px; float:left; } .tb { border-top : 1px solid #6699cc; /*上框線*/ border-bottom : 1px solid #6699cc; /*下框線*/ /*border-left : 1px solid [...]]]></description>
		<wfw:commentRss>http://blog.yslifes.com/archives/166/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Ajax 使用prototype.js 2 rico的使用-簡介</title>
		<link>http://blog.yslifes.com/archives/165</link>
		<comments>http://blog.yslifes.com/archives/165#comments</comments>
		<pubDate>Thu, 14 May 2009 13:10:00 +0000</pubDate>
		<dc:creator>yku</dc:creator>
				<category><![CDATA[ajax]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[rico]]></category>

		<guid isPermaLink="false">http://blog.yslifes.com/archives/165</guid>
		<description><![CDATA[rico是個open source的javascript ajax framework 整個架構在prototype.js底下實作 所以要使用rico就必需先載入prototype.js rico的官方網址 http://openrico.org/ 範例網址 http://demos.openrico.org/ http://openrico.sourceforge.net/examples/index.html 下載點 http://sourceforge.net/project/showfiles.php?group_id=140375 註.prototype.js下載點http://www.prototypejs.org/ 預告 下一篇我將簡單的利用一個table來做新增及刪除 使用prototype.js 及rico.js]]></description>
		<wfw:commentRss>http://blog.yslifes.com/archives/165/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
