Ajax教學文件

壹、PHP與javascript比較

項目 PHP javascript 備註
一、基本表示法
包裹 <SCRIPT language='php'>…</SCRIPT>或
<?…?>或<?php…?> 		<SCRIPT language='javascript'>…</SCRIPT>或
<SCRIPT type='text/javascript'>…</SCRIPT>
二、敘述
概述 以敘述為基本操作單位，敘述由「資料」「算符」「;」共同構成。
  • 「資料」可為實字、常數或變數。資料來自通道、檔案或程式本身。
  • 「算符」為對資料的操作。
  • 「;」代表執行，用以結束敘述。
基本說明 「;」代表 敘述結束
換行不等於「;」 敘述未加「;」換行等於「;」
多個敘述可以寫在同一行
/*…*/。不可以巢狀。 多行註解
//或# // 單行註解
@ 錯誤抑制
全形空白解譯為半形空白 晚期瀏覽器版本
三、資料型態
純量 數值 實字 某某 (十進位)
0某某(八進位)
0x某某(十六進位)
某某e某某(科學記號)
javascript
型別
型態 分整數(integer)、浮點數(float) 只有number一種型別 number
字串 實字 引號包住字串 string PHP還多了自訂引號
跳脫字元 「"」中除「\'」外「\」是跳脫字元，「'」中除「\'」外「\」是字 「"」「'」中「\」都是跳脫字元
\n、\r、\t、\\、\"、\'、\一到三位數字(以8進位指定字元)、\x一到二位數字(以16進位指定字元)
\$、\s(空白) \b(倒退)、\f(欄位)、\u一到四位(以16進位unicode指定字元)
註標索引 代表第幾個字元
布林 實字 真：true、非0；假：false、0、null boolean
複合 陣列 實字 array() []，但字串索引無法用實字表達 object
索引 可用字串索引及註標索引，可多維
元素數 count(陣列名) 陣列名.length
物件 實字 無實字 {屬性名:屬性值,屬性名:屬性值,…物件:{物件值}…}
特殊 NULL 實字 null
資源 有 無
函式 實字 非資料，無實字 function(…){…} function
自動生成物件 不會 將實字派入常數或變數，該常數或變數不需要new，自動獲得相關原生類別的諸屬性與諸方法
四、常數、變數
常數 宣告 define("常數名",常數值);只可用純量 const 常數名=常數值; 所有資料型態皆可
錯誤 對常數派值(=…)或重宣告都會發生錯誤 重派值(=…)，值不變但也不發生錯誤，但重宣告一個既有常數會發生錯誤
變數 變數名 大小寫不同。 建議用camelCasing
命名規則
可用中文，中文視為字母、數字之組合 不可用中文
以「$」開頭，「$」之後可以用字母、_ 第一個字必須是英文字母
開頭之後可以用數字、字母、_。
範圍 用var宣告，物件是變數的一種，函式內宣告或派初值者為區域變數，函式外宣告或派初值者為全域變數
函式內外皆未宣告，卻在函式內派初值者，IE視為區域變數，Firefox視為全域變數
宣告 一次宣告多個變數：var 變數=值,變數=值…
限制 函式不能當變數 函式可以當變數
刪除變數 unset(變數們); delete 變數;
保留字 待查 if、else、for、while、var
五、運算
算符 指派(=),加(+),減(-),乘(*),除(/),餘數(%),二元算符(+=,-=,*=,/=,%=,&=,^=,|=,<<=,>>=),遞增遞減(++,--),比較(<,>,==,===,<=,>=,!=,<>),邏輯(true,非0,false,0,||,&&,!),位元(&,|,^,~,<<,>>),三元算符(?:),宣告變數(var),造物件(new)
屬性及方法(->),字串連接(.),自訂引號(<<<),參考算符(&),抑制錯誤算符(@),執行作業系統命令(`…`) 屬性及方法(.),字串連接(+),位元無號右移(>>>)
六、敘述區塊
概述 以{}包住一群敘述，分號加在大括號中每一敘述
控制敘述 exit; 程式段落標籤:
break(跳到迴圈的下一道敘述)，continue(跳過迴圈中以後的部分，跳到迴圈頭) 可跳至段落標籤
迴圈 while(條件){合條件時做的事}
do{…}while(條件)
for(設初值;條件;設下一值){…}
foreach($陣列 as 用變數1代表元素的鍵=>用變數2代表元素的值){使用前面的變數製作敘述;}
while($xxx=each($陣列)){$xxx[0]或$xxx['key']代表每個元素的鍵，$xxx[1]或$xxx['value']代表每個元素的值} 		for(變數 in 物件){物件的每個屬性或方法做一次，變數名代表屬性或方法，
物件名[變數名]代表其值，方法的值是「function 方法名(){[native code]}」		javascript中陣列是物件
條件 if(條件一){做一}else{做其他}
switch(變數){case 值一:做一;break;case 值二:做二;break;case 值三:做三;break;…default:做其他;break;}
elseif else if
例外 try{敘述或用throw強制產錯誤碼}catch{依錯誤碼做動作}finall{無論有無錯誤都執行}
七、函式
函式表示法 function 函式名(諸引數){…return 傳回值;…}
函式參數
的預設值 		function 函式名(引數=預設值){……} function 函式名(諸引數){在裡面設預設值}
function 函式名(a){if(typeof a=='undefined'){a=預設值;…}} 或
function 函式名(a){a=a || 預設值;…}
資料表示法
(敘述集合) 		$變數乙=create_function(諸引數字串,諸敘述列字串);
變數乙的型別是字串，echo 變數乙;得「lambda_1」
$變數乙(諸引數)得回其諸敘述列的傳回值。 		var 函式變數乙=function(引數){…};此為敘述所以最後還要加「;」
一、執行並回傳：var 甲=乙(實體參數);先執行乙函式，傳回值代入甲。
二、匿名函式(參照)：
  1. 乙函式不需代入實質參數即可執行：「var 甲=乙;」執行「甲()」如同執行「乙()」
  2. 乙函式需代入實質參數才可執行：「var 甲=function(){乙(實體參數);};」執行「甲()」如同執行「乙(實體參數)」。
八、類別與物件
類別 class 類別名{諸屬性;諸方法;} function 類別名(引數){this.屬性=運算式;}
物件 屬性不加()，方法加()
new 類別名;new 類別名();
with(物件名){敘述省略物件名}
原生類別 String、Number、Boolean、Array、Math、Date、Function 由語言提供屬性方法
自訂類別 由使用者定義類別，由類別生方法 由程式提供屬性方法
寄主物件 window(瀏覽器)、document(文件)方法 由環境提供屬性方法
DOM物件：所有角括號所括的標籤都是
document是html的父節點
document.getElementById(id) 取回單一標籤
document.getElementsByTagName(某種標籤) 取回同類標籤所成陣列，每一元素為一標籤
document.getElementsByName(name屬性值) 取回name屬性相同的標籤成陣列，每一元素為一標籤
標籤物件.getAttribute(屬性名) 取屬性值
標籤物件.setAttribute(屬性名,屬性值) 設屬性值
標籤物件.parentNode 取回父節點標籤所包的區域
標籤物件.childNodes 取回諸子節點的集合陣列
標籤物件.attributes 取回諸屬性節點的集合陣列
firstChild即childNodes[0]，lastChild即childNodes最後一個元素
節點物件.nodeValue 節點值
例：alert(document.getElementsByTagName('h1')[0].firstChild.nodeValue);
document.createElement(某種標籤) 造標籤
document.createTextNode("文字串") 將文字串製備為文字節點
標籤元素.appendChild("製備好的文字節點") 在標籤中塞入文字
標籤元素.removeChild("節點變數") 刪除節點
九、事件
概述 事件處理器本質是變數(屬性)，而其值放入函式，值的資料型別必須為「function」
事件處理器均以on開頭
表示法 標籤中：<標籤 事件處理器='指令'>
程式中：物件名.事件處理器=處理函式
使用者觸發 事件 事件處理器
onmouseover onmouseover
submit onsubmit
瀏覽器觸發 載入完畢 onload
伺服器觸發 請求進度改變 onreadystatechange

貳、window子類別 XMLHttpRequest()

一、始用版本

瀏覽器 類別
IE 5,6 ActiveX
IE 7 XMLHttpRequest
Mozilla 1.0
NN6
Apple Safari 1.2
Opera 8
Opera Mini

二、方法與屬性

方法/屬性 說明
abort() 中止請求
getAllResponseHeaders() 傳回全部回應表頭
getResponseHeaders('某表頭名稱') 傳回指定回應表頭名稱之值
open(請求類別,url[,是否非同步,帳號,密碼]) 初始化請求
send(後送資料) 執行請求
setRequestHeader(名稱,值) 設定請求檔頭名稱及值
onreadystatechange 請求進度改變事件處理器
readyState 請求進度
responseText 伺服器回應文字
responseXML 伺服器回應XML格式文字
status 回應狀態代碼，如200
statusText 回應狀態訊息，如OK
補充說明
  1. open(請求類別,url,是否非同步,帳號,密碼)：
    • 請求類別：GET只從伺服器取資料，可靠url傳一點點資料到伺服器。POST:送資料到伺服器。PUT、DELETE、HEAD略。
    • url：欲請求檔案之相對路徑、絕對路徑或完整url。限同網域內。
    • 是否非同步：true代表非同步，不等伺服器回應程式就往下走。false:程式停住等請求完成後再繼續跑。
    • 帳號、密碼寫進程式裡是壞習慣，最好來自表單。
  2. send(後送資料)：如果是GET資料，可以後送null。用&連接「名稱=值」字串組，所有的空白變「+」，非英數字元編成hex值，如@編成%40。
  3. setRequestHeader(名稱,值)：後送資料時，透過 http head ，通知伺服器Content-Type為「application/x-www-form-urlencoded」，後送資料是URL編碼過的。
  4. onreadystatechange：事件處理器，請求進度改變時觸發，其值放入觸發後要執行的函式。
  5. readyState：0代表open方法尚未被呼叫；1代表open方法已呼叫，send方法還沒；2代表send方法已被呼叫請求已經開始；3代表伺服器正在傳送回應；4代表伺服器傳送回應完成。當readyState值改變時，onreadystatechange事件處理器就會被觸發。
  6. status：伺服器送回 http head中 的 status code 。200代表OK，404代表沒找到，403代表禁止，500代表伺服器內部錯誤。304代表文件從上次被請求之後未變動，瀏覽器可放心使用快取版本。
  7. responseText：伺服器傳回字串。
  8. responseXML：伺服器傳回的XML。

三、後送資料

  1. 放在超連結href之後及用GET請求類別的非同步http請求，俗稱GET通道，都是靠 http header 帶URI的資料，總長度超過8K(8192byte)就帶不動了。其中最多可以帶urlencode後的utf8中文字900字。utf8中文字佔3個字元，每個字元又會被編成%xx等三個字元。超過上限會出現414　請求之URI太長的錯誤。
  2. Firefox本身對GET通道沒有設限，所以GET通道可傳的上限就是http header的上限，就是URI的上限。
  3. IE6的GET通道則更小只有2K(2048byte)，最多可以帶urlencode後的utf8中文字220字。超連結href之後的url，超過上述長度的部分會被截掉，使URL不完整。
  4. 所以etable後送走get通道是不夠用的，最好走post通道。走post通道長度就沒上限。但是超連結的傳統後送不能支援POST通道，所以導致：
    1. 不用超連結，所有超連結改成按鈕。
    2. 不用傳統後送，所有後送都用ajax後送。
  5. 假定在長度不會超過的情形下，url中?之後的GET後送(包含傳統和ajax)，由於Firefox和IE6「中文」編碼情形不同，請將文件調為utf8，再將後送參數字串用PHP寫成「urlencode(變數名).'='.urlencode(變數值).'&'.…」這樣在Firefox和IE6後送結果才會相同。
  6. POST通道用於表單或超連結的ajax後送，不需要使用urlencode，Firefox和IE6的中文處理也沒有不同。但是ajax和傳統後送有不同：
    1. 傳統後送只用於表單，什麼都不用做。
    2. ajax後送不論是表單還是超連結，「&」和「+」是無法使用的，因為伺服端收到後送資料，會先用「&」切成一組一組變數，再用「=」切成變數名和變數值，變數名中發現「+」或「空白」或「%20」代換成「_」，變數值中發現「+」代換成「空白」。上述情形之外，不論變數名或變數值，「%xx」一概轉換成相應的非英數符號。
      所以變數值應在後送前先將其中的「&」改編為「%26」，「+」改編為「%2B」。再者整個後送字串是放在引號中所以先將「'」改編為「%27」，「"」改編為「%22」；而SQL指令中的<和>和破壞HTML顯示也要換掉，請換成「%3C」和「%3E」。
      由於<a href=javascript:後送函式…比<a onclick="後送函式;return false;"…在客戶端(後送前)就多做一次urldecode，所以會把辛苦轉成%xx再轉回來，所以不要使用。
    3. etable.php相關的位置：
      • 277行，對傳入的$sql['where']進行編碼。
      • 283行，對傳入的$sql['order']進行編碼。
      • 453行，對各表的rid進行編碼。
      • 669行，在編輯表單隱藏欄中對各表的rid進行編碼。
      • 831行，編碼函式。
      • 834行，解碼函式。應屬多餘，整個工作程式、etable.php沒有到，中使用也屬多餘。
  7. SQL中「'」是欄值的外括號，欄值中欲使用「'」是用「''」代表。此作用對象是「欄值」不是rid。etable.php中欄值處理的相關位置如下：
    1. 212行，將$_POST，傳進來更['f']["表代名"]中要更新的各欄欄值，做成set `欄名`='欄值'，欄值中的「'」換成「''」。
    2. 361行，組rid「 and `欄名`='欄值'」子句時，，欄值中的「'」換成「''」。
    3. 工作程式，中造$sql[where]子句時。
  8. formtext.php中XoopsFormText類別產生input text物件，其值是用「'」包起來，所以其欄值中「'」會弄壞HTML顯示，所以要先將欄值中的「'」換成「'」

四、回傳資料

(一)XML

  1. 配合DOM可以對文件進行精準的操控。
  2. 伺服器送來的 http head ，其Content-Type須為「application/xml」，否則responseXML為空值，伺服器端很容易漏掉這一步。
  3. 可以用XSLT(eXtensible Stylesheet Language Transformations)(可延伸樣式表語言轉換)，將XML轉成HTML。

(二)JSON：物件實字(object literal)

  1. 任何XML都可以寫成物件實字，卻不必像XML那麼肥大。
  2. 根本不必解析傳回值，因為傳回的就是 javasript 物件，直接取屬性值來用就好。
  3. 不一定要用非同步物件取值而被限制在網域中，可以用<SCRIPT type='text/javascript' src=遠端的js檔?></SCRIPT>去請求Web API。如Yahoo所有的Web API都可以傳回物件實字。
  4. 不需要伺服器傳回特定的 http head 告知Content-Type準為「application/xml」。
  5. 靠eval函式將字串解為javascript，其中如果夾帶惡意的方法就麻煩了。

(三)HTML

  1. 「document.getElementById(某ID).innerHTML = XMLHttpRequestObject.responseText;」將回應文字塞入指定的標記中。先前標記中的文字被消除掉。
  2. 不是標準，也沒有W3C的認可，但所有瀏覽器都支援。
  3. 沒有辦法同時更動文件的好幾個地方。
  4. 不需要伺服器傳回特定的 http head 告知Content-Type準為「application/xml」。
  5. 靠eval函式將字串解為javascript，其中如果夾帶惡意的方法就麻煩了。

五、範例講解

六、傳統請求與非同步請求並存

七、文件內容與流程

(一)文件內容圖示

PHP檔┬─HTML部─┬javascript程式┬事件驅動敘述區塊→非同步請求→執行另一個PHP並將輸出送回客戶端提出請求的瀏覽頁
     └PHP程式部 └HTML標記      └<script>…javascript敘述<script>

(二)全流程

  1. 由url向伺服器端送出請求。
  2. 伺服器端開始php行程，執行其中的「PHP程式部」
    1. 執行其中的「php載入指令」，載入伺服器端的其他php檔。其根目錄是伺服器的根目錄。
    2. 執行。
    3. 輸出HTML片斷。
  3. 組合php中「HTML部」和「PHP程式部」輸出的HTML片斷。
  4. 對客戶端送出 http header和組合後的HTML。
  5. 伺服器端結束php行程。
  6. 客戶端解析 http header、HTML(含javascript)，送至瀏覽頁。
  7. 解析HTML文件，並執行其中的「HTML載入指令」，載入其他伺服器端的CSS、JS檔，其根目錄是url根目錄(主機名.域名後的/)，不是伺服器的根目錄。
  8. 開始javascript行程，並接收DOM物件。
  9. javascript送出非同步請求，接收伺服器回應，此其間：
    • 只將回應文字貼至DOM之指定位置。其屬性為文字。
    • 不再解析<script>…</script>間的javascript指令。
    • 但其間的HTML碼仍有效。
    • 其中的on事件，驅動javascript仍有效，因其仍為HTML的一部分，而且是被用戶以事件驅動的，不是主動解析執行的。
    • 其中a的href，驅動javascript仍有效，因其仍為HTML的一部分，而且是被用戶以連結事件驅動的，不是主動解析執行的。
  10. javascript送出非同步請求，eval(伺服器回應)，此其間：
    • 將伺服器回應當成javascript程式碼加以解析並執行。
    • 回應中不能有javascript程式碼以外的文字，如html，如<script>標記。
  11. 送出新的url請求，並將回應取代原來的瀏覽頁。原瀏覽頁關閉，結束javascript行程。
  12. 主動關閉瀏覽頁，結束javascript行程。
  13. 瀏覽頁未關閉，javascript行程就未結束，瀏覽頁始終在javascript的控制中，可不斷送出非同步請求。

八、瀏覽器之間的差異

  1. IE對來自ajax中get通道的中文，將utf8轉成big5。因為get通道極可能傳路徑、檔名，而微軟的路徑、檔名是使用big5。
  2. IE預設ajax傳回資料的顯示編碼是utf8。

參、迅速上手

NO 重點
1-2 開發環境列表
1-3 觸發程式組與回應程式組關係圖
2-1 用DOM將回應字串(.php內放js code)塞回觸發程式的<SCRIPT>…</SCRIPT> 兩程式 表單 jj1.php簡化載入js
2-2 回應是<? echo 字串 ?>，塞回觸發程式的指定div 兩程式 連結 jj1.php改用表單按鈕
2-3 回應是.txt文字檔，塞回觸發程式的指定div 兩程式 連結 demo.html是最基本的XMLHttpRequest範例解說。
2-4 回應是input的值，塞回觸發程式的指定div 一程式 表單
2-5 連結→觸發js→改變CSS→換文件底色 一程式 連結
2-6 js程式範例，漸漸變色 一程式 連結
2-7 PHPecho連結內放js code，使js code內含PHP變數 一程式 連結 常用於顯隱子選單
2-8 同上，但echo 不同連結，指定塞到不同的div 一程式 連結 塞的東西不能含角括號
2-9 用PHP的urlencode函式處理角括號 一程式 連結
3-1 用GET非同步請求，將回應塞到指定的div 二程式 連結
3-2 用GET非同步請求，將回應塞到指定的div 二程式 表單
3-3 用POST非同步請求，將回應塞到指定的div 二程式 表單
3-3 用POST非同步請求，將回應塞到指定的div 二程式 表單
3-4 GET、POST非同步請求函式示範 二程式 連結
3-5 產生link的類別與方法 二程式 連結
3-6 回應文字是js code，如何令其執行 二程式 連結
3-7 用連結觸發查MySQL，將回應塞到指定的div 二程式 連結 jj1.php:套函式hippo_ajax.js的XMLHttpRequest範例解說。
3-8 用連結觸發查MSSQL，將回應塞到指定的div 二程式 連結
3-9 多重非同步呼叫 程式 連結
3-10用onkeyup觸發將input的值後送去檢查有無此帳號 二程式 表單
3-11用onkeyup觸發將input的值後送去檢查有無此帳號 二程式 表單
3-12用js的SetTimeout('敘述',微秒)每隔幾微秒反覆執行敘述。動態效果百分之八九十靠此法二程式 連結
3-13由目前到指定日期的秒差，換算成年月日時分秒 二程式 連結
3-14送不同的變數給回應程式，回應不同字串塞到指定的div 二程式 連結
3-15同上，將回應分為每頁5筆，並產成各頁的連結。SimplePager類別顯示一頁 二程式 連結
3-15同上，用MSSQL，其沒有limit指令 二程式 連結
4-1 用Loading、Loaded、Interactive代表readyState的1,2,3階段 二程式 連結
4-2 用loading.gif代表readyState的前三階段，第4階段判斷是否OK，有錯丟訊息 二程式 連結
4-3 用microtime()產生微秒，計算sleep(秒數)前後的秒數差 二程式 連結
4-4 簡易上傳，以add_upload_box()方法，觸發後台copy()函式及訊息 二程式 表單 demo1.php是最簡示範，demo2.php加上傳提示，demoTest.php觀察非同步請求各階段之伺服器回應，demo3.php以非同步請求處理上傳提示，demoR.php共用的回應程式
4-5 續上，指定上傳資料夾，並產生上傳檔的下載連結，只是輸出時多做一個 tag a。 二程式 表單
4-6 讀寫檔，hippo_ajax_form.php放表單物件，javascript用sendFormData後送表單；回應時以hippo_writefile類別寫入檔案，並產生連結二程式 表單
4-7 文字行事曆，回應：在文字檔中加一行工作，列出文字檔各行，產生各行的刪除連結 二程式 表單
4-8 解析上傳檔(各欄起迄位置固定)(在classes夾中)，並格式化輸出 二程式 表單
4-9 判斷上傳檔副檔名，管控上傳檔種類 二程式 表單
4-10連FTP(ftp_connet)，回應之php以@ftp_login，視回應的真假分別echo訊息 二程式 表單
4-11上傳檔壓成rar，附Rar.exe、UnRAR.exe兩支程式，回應程式檢查上傳檔10秒，找到用exec(rar 參數 上傳檔)執行壓縮，並造rar檔下載連結二程式 表單
4-12上傳檔即時縮圖，其檔名同上傳圖檔，classes夾中放Thumbnail類別，其buildThumb方法使用php繪圖函式imagepng,imagejpeg繪製縮圖。new Thumbnail→loadData方法→buildThumb方法二程式 表單
4-13續上，上傳圖檔後，列出上傳資料夾中所有檔案的清單。用dir(路徑及目錄名)產生一物件，兩屬性，三方法。用read()方法一一取出檔案條目，用close()方法繳還資源代碼。二程式 表單
4-14續上，可清空資料夾。先用dir(上傳目錄)，再用@unlink(檔名)一一刪除。 二程式 表單
4-15續上，上傳諸縮圖合成一swf檔。在hippo_pic2flash利用PHP的swfMovie類別，再用hippo_show_flash_sp2類別秀出來。但PHP中swfMovie是實驗性的，隨時可能被取消。二程式 表單
4-16連FTP建遠端資料夾。用ftp_mkdir(代碼,目錄名)。 二程式 表單
4-17用hippo_fetch_moblog類別中的res屬性，每10分鐘自動擷取 blog 二程式 表單
4-18用hippo_writefile類別中的write及close方法，為上傳檔案內容加上行號。 二程式 表單
4-19用hippo_ftp類別中的init_link方法連線，再用mk_dir造資料夾，再用upload方法上傳檔案。二程式 表單
5-1 用 onclick 後送表單資料，回應放 div 。 二程式 表單
5-2 用 onkeyup 捕捉輸入值，回應放 div 。 二程式 表單
5-3 續上，兩個 input 各用 onkeyup 捕捉輸入值，回應送不同的 div 。 二程式 表單
5-4 用 onkeyup 捕捉輸入值，送伺服器用php的eregi(正規表示式,輸入值)檢查mail，建議改用非即時檢查以減輕伺服器負擔。二程式 表單
5-5 同上，驗證身份證字號，用 hippo_ajax_sn_valid_func.php 中的 isValidID 函式。 二程式 表單
5-6 同上，用 eregi(正規表示式,輸入值) 驗證手機號碼。 二程式 表單
5-7 同上，用 split('[-]', 電話)，拆兩段，再用 eregi 檢查前後兩段 二程式 表單
5-8 同上，用 isURLValid 函式驗證 url 。 二程式 表單
5-9 示範 <input type=button onclick=sendFormData(…) > 和
<a href=javascript:getData(…) >		二程式 兩者
6-1 伺服器用 $_POST[] 取表單值，供 sql 指令用。 二程式 表單
6-2 *同上，hippo_sql_query類別支援MySQL,PosgresSQL,MSSQL。其hippo_sql_query方法會叫用DBvar.php，其中會依 $connection_method 的種類調整變數，以分別適應不同資料庫。二程式 表單
6-3 先用 onkeyup 捕捉輸入值送後台檢查，通過後前台後送(button)才可用。 二程式 表單
6-4 6-3的詳解。用div包<input type=button disabled=disabled onclick=sendFormData(…) > 先用 onkeyup 捕捉輸入值送後台檢查，通過後，前台的後送再解開disabled。二程式 表單
6-5 select用$ar陣列放諸選項(值同提示)，hippo_ajax_form類別中的add_select_list方法再依$ar陣列造option，遇onchange就去檢查選項。二程式 表單
6-6 checkbox用$ar陣列放諸選項，用[名稱][0],[名稱][1],[名稱][2]…去命諸核取方塊的名稱，達到複選的功能。二程式 表單
6-7 radio用$ar陣列放諸選項，用[名稱][0],[名稱][1],[名稱][2]…去命諸按鈕的名稱。 二程式 表單
6-8 改自6-6，只是複選變成我同意的核取方塊，$ar陣列只有一元素。 二程式 表單
6-9 textarea，填入資料後，才允許後送。 二程式 表單
6-3至6-9均由hippo_ajax_form.js中的checkFormInput()執行onkeyup的檢查。
  1. 3-07/hippo_ajax.php套函式hippo_ajax.js並提供hippo_ajax類別，其中有加get連結與加post連結之方法。
  2. 3-07/hippo_sql_query.php:提供hippo_sql_query類別，其中有連結三種資料庫的諸方法。
  3. 3-07/hippo_ajax_func.php:提供字串、抓瀏覽器版本、檢查日期及路徑等處理函式。
  4. 3-07/hippo_ajax_exec.php:用hippo_ajax_func.php，DBVar.php，hippo_sql_query.php配合由url?…傳入查詢字串，在資料表中用f_name查詢f_email。
  5. 3-07/index.php:用hippo_ajax.php及hippo_ajax_exec.php做事。

肆、HTTP協定

伍、DOM實做

一、節點：(node)

種類 種類 作用 子輩 nodeName nodeValue nodeType
文件節點 Document HTML之上的根節點有子輩 #document null 9
元素節點 Element 網頁的骨架 有子輩 標籤名 null 1
屬性節點 Attribute 描述元素 無子輩 屬性名 屬性值 2
文字節點 Text 網頁的內容 無子輩 #text 元素與元素之間的字 3
註解節點 Comment <!--… -->無子輩 #comment 註解內容… 8

二、操作：

  1. 操作必由元素節點開始切入：document.getElementById('某id')，上移parentNode必為另一「元素」節點。
  2. 元素節點之下含：
    1. childNodes(子節點)，又分：
      1. 子元素節點。
      2. 子文字節點，兩元素間即夾一文字節點，可為空值。
    2. attributes(屬性節點)。
  3. 在諸子節點中移動：firstChild首節點(必為文字節點)；lastChild末節點；previousSibling前移；nextSibling後移。
  4. document.getElementsByTagName('*')得文件中全體元素節點。
  5. document.getElementById('某id').parentNode.getElementsByTagName('*').length：和某id同輩的元素節點共有幾個。
  6. document.getElementsByTagName('標籤')[0].firstChild.nodeValue取到該標籤後所跟的字
  7. 造子元素節點(一步驟)：元素節點.createElement('標籤')。
  8. 造子文字節點(二步驟)：先用「文字節點=元素節點.createTextNode('字串')」；再用「元素節點.appendChild(文字節點)」。兩步驟可合寫成「元素節點.appendChild(document.createTextNode('字串'))」。
  9. 造屬性節點(一步驟)：元素節點.setAttribute('屬性名','屬性值')。
  10. 取屬性值：document.getElementById('某id').getAttribute('屬性名')。
  11. 先獨立造一元素節點，再塞入文件中某id同輩中最後一個節點的實例： 元素節點=document.createElement('標籤')；
    元素節點.appendChild(document.createTextNode('字串'));
    元素節點.setAttribute('屬性名','屬性值');
    document.getElementById('某id').parentNode.appendChild(元素節點);
  12. 刪除某元素的文字節點：元素.removeChild(元素.firstChild);

陸、javascript補充

參考 JavaScript 本質。

一、Shell

可無用戶端（瀏覽器）的環境執行，如 mozilla 的Rhino Shell。

二、資料型態

  1. 沒有整數與浮點數的區別，數值都是 IEEE 754標準64位元浮點數，可表示的數字最小精度可達正負Number.MIN_VALUE（5e-324），而最大範圍可達正負Number.MAX_VALUE（1.7976931348623157e+308）。如果單純表示整數，則以32位元處理，也就是整數可表示的範圍為負231到正231-1。
  2. Infinity表示無限大，Number.POSITIVE_INFINITY表示正無限大，Number.NEGATIVE_INFINITY表示負無限大。另外還有NaN或Number.NaN表非數值（Not a Number），例如你嘗試作 1 / 'two'時，就會出現NaN的結果。注意，NaN不等於任何值，NaN也不等於NaN，如果你要測試某值結果是否為NaN，則要用isNaN()函式來測試。
  3. 以下的x值有參考至一個值，那就是null，而不是undefined：
    var x = null;
    以下的x才是undefined：
    var x;

三、變數

  1. 變數本身不帶型態資訊，同一個變數可以指定不同型態的值，實際操作時，是在執行時期才透過變數來參考至物件或值。
  2. 可以不用var宣告，直接指定某個名稱的值，該名稱會自動成為全域範圍，其實也就是在全域（global）物件上建立屬性。
  3. 全域變數若在瀏覽器中，就是window物件的屬性，在 Rhino Shell 中，是可在全域物件this的屬性。
  4. 使用var所宣告的變數，作用範圍是在當時所在環境(如函式內部)，不使用var直接指定值而建立的變數，則是全域物件上的一個屬性，俗稱全域範圍。
  5. 如果全域與區域中有同名的變數，則區域會暫時覆蓋全域。
  6. 可以使用delete來刪除物件上的特性。由於未使用var宣告的變數，會是全域物件上的特性，就某些意義來說，對未使用var宣告的變數使用delete，就相當於所謂刪除變數。使用var宣告的變數就無法用delete刪除。
  7. 可以重複var宣告同一個變數，但不會因此覆蓋該變數原有的值。

四、型態轉換

五、運算子

六、物件

  1. 可以隨時為物件新增特性（Properties），也可以隨時用delete運算子來刪除特性。
  2. 若刪除成功，delete會傳回true，並非所有特性都可被delete刪除，有些內建特性可能無法被刪除（例如在瀏覽器中的一些特性）。附帶一提的是，delete作用在非物件特性或變數時，會傳回true。例如delete 1;就會傳回true。
  3. 想要知道物件上有哪些自定義特性，可以使用for in語法，逐一取出物件的特性名稱。例如：
        for(var prop in obj) {
        print(prop);
        print(typeof prop);
    }
  4. 點運算子（.）只是存取物件特性的一種方式。你也可以使用[]運算子來存取特性。例如：：
        var obj = {};
    obj['x'] = 10;
    回應10
    obj.x;
    回應10
    obj['x'];
    回應10
  5. 使用[]運算子的場合之一，就是當你的特性會包括空白、. 字元等時。

七、陣列

  1. 陣列是記憶體中線性的連續資料，在JavaScript中，並沒有實際的陣列，而是以物件來模擬出相似的操作外觀。
  2. 陣列的length特性是可讀可寫的。但縮減length，會催毀length之後的元素。
  3. 用實字造出的陣列，索引看似是 0,1,2,3 其實是 '0','1','2','3'
  4. 索引其實就是陣列物件上的特性，你也可以用delete刪除陣列中的元素。
  5. 可以輕易地使用普通物件，來模擬出陣列的操作外觀：
        var obj = {
        '0' : 100,
        '1' : 200,
        '2' : 300,
        length : 3
    };
    for(var i = 0; i < obj.length; i++) {
        print(obj[i]);
    }
    回應
    100
    200
    300
  6. 使用陣列實字建構陣列的好處是什麼？當然是為了擁有Array已定義的行為，例如自動依元素內容來調整length。
  7. 指定索引元素時也不一定要連續指定，例如：直接指定了索引10為900，其它未指定的0到9索引處，全都是undefined（就像沒有0到9的特性名稱罷了），而陣列的length自動調整為11。在JavaScript中，也沒有所謂陣列超出索引的問題，例如在前例中若指定array[10000]，充其量就是傳回undefined。
  8. 使用陣列，還可以獲得Array上已定義的方法。例如：
        var array = [100, 200, 300];
    array.forEach(function(element) {
        print(element);
    });
    回應
    100
    200
    300
    forEach是Array所提供的方法，可以指定函式，陣列中每個元素會作為引數傳入函式。
  9. 陣列中可以不同型態的資料，像是數值、字串、布林值、物件，如：
    var arr = [10, 'JavaScript', true, {x: 10, y: 10}];

八、函式

  1. 函式，參數不需要宣告型態，如果有傳回值，不需要宣告傳回值型態，直接使用return即可，如果不傳回值則不撰寫return，函式執行完畢後自動傳回"undefined"
  2. 呼叫函式時可以指定任意數目的引數，若引數少於參數個數，少的部份之參數值會被設定為"undefined"。
  3. 函式參數預設值的寫法：
    function foo(lalala){
    if('undefined' == typeof(lalala)){
        lalala ="default";
    }
}
  4. 在HTML文件中呼叫已建立的函式，大致有三種方式，一種是在JavaScript的區段中呼叫，另一種方法是透過事件的觸來呼叫的，第三種是透過HyperLink來呼叫，如：＜a href="javascript:show()"＞。
  5. 呼叫的函式一定要事先定義過，否則在找不到函式的情況下會有error的發生！正因為如此，雖然JavaScript並沒有硬性地規定要將程式放置於何處，但是一般人都習慣放在head區段中，因為網頁在解譯時會先將head的部分讀入，如此一來，在body區段的任何地方呼叫已定義好的函式，都不會有問題。