從零開始學_JavaScript_系列（八）——js系列(2)（事件觸發順序、文本讀取、js編寫ajax、輸入驗證、下來菜單）

從零開始學_JavaScript_系列（八）——js系列(2)（事件觸發順序、文本讀取、js編寫ajax、輸入驗證、下來菜單）

（20）事件觸發的順序

假如文檔中有多個指令碼（例如自動執行的指令碼），那麼他們執行是有一定的順序的（在ＨＴＭＬ文檔之中）：

①先執行內的<script>標籤。因此，這裡的js指令碼通常是內嵌程式碼、指向JS檔案，可以在這裡定義其後要使用的函數；

②其次是執行內的script標籤；

③然後是執行觸發的指令碼內容，例如在button按鈕上添加的onclick=””命令，就是在點擊後觸發的。

（21）文件物件模型（DOM）

文件物件模型（Document Ojbect Model），效果是允許指令碼控制Web頁面、視窗、文檔。對於JS來說，他是製作動態網頁面的強有力工具。

DOM不是JavaScript語言的一個部分，而是內建於瀏覽器的一個API（介面），

為了操縱瀏覽器和文檔，JavaScript使用分層的父物件和子物件（樹形結構），這就稱為DOM，表示一個Web文檔的所有內容和組件。

DOM對象，有屬性和方法。

①最頂層的是window對象，表示一整個瀏覽器介面，架構可以由window對象來表示。如alert就是window對象的方法

②document對象代表的是一個web文檔或一個頁面，web文檔在瀏覽器視窗中顯示，所以很明顯document對象是window對象的子物件；

因此window.document和document都是指當前視窗；

如果使用多個視窗（或架構），就要使用多個window對象，每個window對象都有自己的document對象，因此使用其中某一個，要指出視窗名和對象名；

（22）獲得文檔的資訊

①document.http://blog.csdn.net/qq20004604/article/details/URL指明了文檔的http://blog.csdn.net/qq20004604/article/details/URL地址，這是一個簡單的文字欄位，不能改變它的屬性（不懂，是指這個是一個string對象嗎？）；

如果要給使用者一個不同的地址，要使用window.location對象；

②document.title列出了當前頁面的標題，由HTML中的title標籤定義。

如：

ti=document.title;

alert(ti);

效果是輸出標題，注意，沒有括弧；

③document.referrer是使用者所瀏覽的上一個頁面的http://blog.csdn.net/qq20004604/article/details/URL地址；

④document.lastModified是文檔最後修改日期，這個日期從伺服器傳到頁面（註：在360瀏覽器裡，這個時間是變化的，在Firefox裡，這個時間是固定的）但可能伺服器上運行正常，需要驗證；

⑤document.bgColor和document.fgColor是文檔的背景和前景（文字）顏色，對應body下的BGCOLOR屬性和TEXT屬性；

例如：

abc

<script>

ti=document.bgColor;

alert(ti);

</script>

輸出是green，背景色變綠

⑥document.linkColor、document.alinkColor和document.vlinkColor是文檔中連結的顏色。分別對應body標籤中的LINK、ALINK和VLINK屬性（但不知道這3個是什麼意思）。

⑦document.cookie允許讀取和設定一個文檔的cookie。更多略。

（23）history對象

一個可訪問的屬性：

history.length，使用者訪問過的不同地址的數目。

如代碼，表示當前訪問過的地址的數目

<script>

alert(history.length);

</script>

初始是1，假如訪問了一個其他網頁，這裡則彈出是2，如果訪問更多，則相應增加。

方法一：

history.go(參數)

開啟曆史列表的一個網址，參數為正數或者負數。

history(-1)相當於後退一步。

方法二：

history.back()載入曆史列表中的前一個網址，相當於按一下後退。

方法三：

history.forward()載入曆史列表中的後一個網址，相當於按一下前進按鈕。

（24）AJAX

傳統情況下，JavaScript與伺服器之間的通訊方法只有一種——表單。

1、前端/網頁：建立一個XMLHttpRequest對象，然後將其發送給Web伺服器，並且無需一直等待請求，而是可以繼續發送請求。

2、伺服器：通過發送包含內容的檔案（或伺服器端應用程式的輸出）作為相應。

3、前端：當接到伺服器端的響應後，相應的JavaScript函數將被觸發，以處理相關資料。

4、DOM：由於這項技術的目的在於實現更好的互動（否則接受到伺服器資訊就得重新整理頁面），因此指令碼使用DOM來顯示來自伺服器的資料，從而無需再次重新整理頁面。

其他：可以同時處理多個請求（發送多個請求，伺服器的速度不影響前端的）。

AJAX的應用：

主要用於建立Web程式——面向使用者且基於Web的服務。

使用XMLHttpRequest：（表示純看概念很茫然啊）

1、建立請求

建立一個XMLHttpRequest對象：

var ajaxreq = new XMLHttpRequest();

註：IE5/6除外（早版本的需要啟用ActiveX控制項），文法不同；

2、開啟http://blog.csdn.net/qq20004604/article/details/URL

ajaxreq.open("get", "filename");

可以使用GET或者POST命令（這裡是get）；

由於GET需要使用將參數作為地址發送給伺服器，因此如例子：

ajaxreq.open("get", "search.php?query=abc");

訪問search.php網頁，將abc作為查詢參數發送給伺服器。

問題：為什麼是query？

3、發送請求

ajaxreq.send(null);

註：get方法用null，post方法用發送的資料。

4、等待響應：

XMLHttpRequest提供了專門的事件處理常式，用於處理伺服器的返回資訊。

ajaxreq.onreadystatechange = MyFunc;

請求（request）對象擁有一個名為readyState的屬性，代表一個請求的目前狀態。

當readyState屬性發生變化時，該事件被觸發。

ReadyState屬性值的變化範圍如下：

0 新的請求；

4 已結束的請求

所以事件處理常式會檢測該屬性，查看其值是否已變化為4。

由於可能發生錯誤，因此當請求成功時，status將被設定為200。但若發生錯誤，其值將被設定為對應的錯誤碼。

與錯誤相關的解釋資訊（成功時為OK），將被儲存在statusText屬性中。

5、解釋響應資料

當readyState屬性的值為4，而且請求已被響應時，可以通過另外兩個屬性進一步訪問那些來自伺服器的返回資料。

responseTeXt 用於訪問以原始文本存在的響應資訊；

responseXML 用於訪問以XML對象形式存在的響應資訊。

當資料格式不是XML時，只有文字屬性可被訪問。

這裡的XML指的是.xml檔案嗎？

如代碼：

//AJAX庫

var ajaxreq = false, ajaxCallback;

function ajaxRequest(filename)

{

try

{

//Firefox / IE7 /Others

ajaxreq = newXMLHttpRequest();

}

catch(error)

{

try

{

ajaxreq = newActiveXObject("Microsoft.XMLHTTP");

}

catch(error)

{

return false;

}

}

ajaxreq.open("GET",filename);

ajaxreq.onreadystatechange= ajaxResponse;

ajaxreq.send(null); //發送請求

}

//事件處理常式

function ajaxResponse()

{

if(ajaxreq.readyState != 4)return ;

if(ajaxreq.status = 200)

{

//事件正常，請求成功

if(ajaxCallback)ajaxCallback();

}

else

{

alert("Requestfailed" + ajaxreq.statusText);

}

return true; //為什麼return true？只要readyState等於4就一定成功？

}

ajaxRequest()函數：

實現了處理、建立、發送XMLHttpRequest對象所需的全部操作。

該函數首先會建立XMLHttpRequest對象。此時，對於不同的瀏覽器需要使用不同的命令。如果使用了錯誤的命令就一定會出現錯誤。

所以需要使用try和catch語句。

先試著使用標準方式，出錯了使用另一種方式（這裡是針對IE5和IE6的），如果還不行，那麼返回一個false值給ajaxreq，然後通過條件判斷，告訴使用者瀏覽器不支援AJAX功能。

ajaxResponse()函數：

ajaxResponse()函數是onreadystatechange事件的處理常式。

該函數首先檢查readyState屬性，查看其值是否為4。如果不是，什麼都不做（return）

如果是4，那麼檢查屬性值是否為200（是200說明成功），是的話，執行儲存於變數ajaxCallback中的處理函數。

如果不是200，說明出錯了，alert彈框提示出錯資訊。

使用AJAX庫：

①將庫檔案儲存為ajax.js，並使其與HTML和指令碼位於同一目錄中。

②利用<scriptsrc="ajax.js">匯入HTML中。

③為請求結束事件建立一個處理函數，並將變數ajaxCallback的值設定為該函數。

④調用ajaxRequest()函數，其參數為伺服器端應用程式（或檔案）的檔案名稱。（本庫只支援GET，因此不考慮POST，也無需指定使用方式）。

⑤如果請求操作正常結束，那麼將調用剛才在ajaxCallback中指定的函數。同時全域變數ajaxreq將會把伺服器的響應資料分別儲存在responseXML和responseText屬性中。

使用AJAX庫編寫AJAX測驗程式：

在建立了一個可重用的AJAX庫後，就可以用他來建立JS程式。

JS代碼例子如下；

var qn = 0; //qn是問題編號

function getQuestions()

{

qn = 0; //點擊開始按鈕後，重設問題

obj =document.getElementById("question"); //obj是question的（HTML）

//之所以設定下面這行，是因為在非同步載入成功前顯示這裡

obj.firstChild.nodeValue="(pleasewait)"; //obj的所有子節點中的第一個子節點的值是please wait。作用是將其寫到...中

ajaxCallback =nextQuestion; //將函數賦給回呼函數（ajaxCallback），在ajax裡調用

ajaxRequest("questions.xml"); //調用ajax庫載入questions.xml檔案

}

//作用是讀取、並輸出問題

function nextQuestion()

{

questions =ajaxreq.responseXML.getElementsByTagName("q"); //questions被賦值為AJAX返回的XML檔案中標籤為q的（在XML中）

obj =document.getElementById("question"); //obj為標籤是question（在AJAX.html中）

if( qn

{

q =questions[qn].firstChild.nodeValue; //q是讀取的值

obj.firstChild.nodeValue= q; //將其輸入到HTML中顯示

}

else

{

obj.firstChild.nodeValue= "(no more questions)"; //如果沒有更多問題了，那麼提示使用者

}

}

function checkAnswer()

{

answers =ajaxreq.responseXML.getElementsByTagName("a"); //answers是一個數組（因為有多個標籤）

a =answers[qn].firstChild.nodeValue; //firstChild.nodeValue指所有子節點（childNodes）中的第一個子節點的文本值

answerfield =document.getElementById("answer"); //HTML輸入位置的內容（id是answer）的值

if(a == answerfield.value) //如果讀取的值（XML中的），和輸入的值（HTML使用者輸入的）一樣

{

alert("Correct!"); //彈框提示正確

}

else

{

alert("Incorrect.The correct answer is: " + a); //彈框提示錯誤，並告知正確的答案

}

qn += 1; //問題編號+1

answerfield.value=""; //重設答案

nextQuestion(); //調用函數

}

obj = document.getElementById("startq"); //ojb是startq按鈕

obj.onclick = getQuestions; //點擊後調用函數，不用()表示不執行，只有當點擊後才執行

ans = document.getElementById("submit"); //ans是提交按鈕

ans.onclick = checkAnswer; //點擊後調用函數

另有一XML檔案：

a

1

b

2

c

3

d

4

e

5

最後是html檔案：

AJAX測試

<scriptsrc="ajax.js"></script>

AJAX的測試例子

<scriptsrc="quiz.js"></script>

效果是：

①點擊Start the Quiz按鈕後，讀取XML檔案，將讀取到的問題輸出在html上。

②答案框可以用於輸入答案，按submit按鈕提交答案。

③提交後進行驗證，如果和預留答案相符，提示，不符，提示正確答案。

④然後變更到下一個問題。

（25）name

name的作用和id類似。

但還有一些其他用處：

l 用途1:作為可與伺服器互動資料的HTML元素的伺服器端的標示，比如input、select、textarea、和button等。我們可以在伺服器端根據其Name通過Request.Params取得元素提交的值。

l 用途2: HTML元素Input type='radio'分組，我們知道radio button控制項在同一個分組類，check操作是mutex的，同一時間只能選中一個radio，這個分組就是根據相同的Name屬性來實現的。

l 用途3:建立頁面中的錨點，我們知道link是獲得一個頁面超級連結，如果不用href屬性，而改用Name，如：，我們就獲得了一個頁面錨點。

l 用途4:作為對象的Identity，如Applet、Object、Embed等元素。比如在Applet對象執行個體中，我們將使用其Name來引用該對象。

l 用途5:在IMG元素和MAP元素之間關聯的時候，如果要定義IMG的作用區，需要使用其屬性usemap，使usemap="#name"(被關聯的MAP元素的Name)。

l 用途6:某些特定元素的屬性，如attribute，meta和param。例如為Object定義參數或Meta中。

（26）驗證輸入內容是不是空，是不是數字

field為檢查所內容（input）的id

function checkIsNumber(field) //檢查輸入的文字是不是數字，這的field是id的值

{

with(field)

{

if(value==null||value=="")

{

document.getElementById(field).innerText="請輸入內容";

}

else {

if(value>0)

{

returnfalse;

}

else {

document.getElementById(field).innerText="請輸入數字";

}

}

}

return true;

}

（27）下拉式清單

如果帶預設選擇（即預設不是第一個），加上下面紅色部分（即預設選擇這個）

1 2 3 4

（28）div、span、ul的區別

①div是一個塊，佔用的位置是一行，不同div之間內建換行。

例如：fffwwwppp

其顯示是：

fff

www

ppp

②span是行內小塊，是不帶換行的。

例如：fffwwwppp

其顯示是：fffwwwppp

③ul目前已知是內建縮排的。