迴響
真是好學不倦的鼻~
Ajax入門 - 第一課
這是我的Ajax筆記本，整理書中的重要資訊，擷取可能有用的訊息。
一直很想要學的Ajax，終於有書可以學了~
之前將Ajax in Action整本電子書印出來，厚厚的英文版，看了第一章後，發現這樣學一個新語言好像太慢了，就停下來了。
現在則是托公司的福，買了Head Rush Ajax中文版(蔡學鏞譯)回來啃，真開心~
== Ajax 第一課 ==
Ajax三個最重要的基本中心思想是：
1. 非同步應用，是使用JavaScript物件做出請求，而不是提交表單
2. 請求與回應，是由網頁瀏覽器處理，而不是直接由JavaScript程式所處理。
3. 一旦網頁瀏覽器得到非同步請求的回應，他會以伺服器的回應「回頭呼叫」JavaScript程式
Ajax碎碎念
*結合了非同步請求與更新，而不用重載頁面，就是使用了Ajax應用。
*如果只想更新部份頁面，Ajax相當適合。
*有時候，JavaScript會使用XML與伺服器來回溝通。但是並非所有的請求都需要使用XML。
*很多人都說Ajax是Asynchronous JavaScript and XML 的縮寫，可是創造出這個詞的Jesse James Garrett卻說並不是那四個字母的縮寫。那...到底是什麼意思呢?
Ajax中最常用的html標籤是div和span
*div是一個可以持有相關元素的容器元素，並容許你以一個CSS規則，讓所有的元素有統一的樣式。
*span讓你將行內文字(inline text)和周圍之間有一點區隔。你可以利用CSS位你的span元素設定樣式，且輕易的裝飾文字。
接下來是JavaScript的範例，分別是建立請求物件、取得請求資料、更新資料。
相對應的網頁修改和所需的知識：
*將網頁中form的type從submit改成button，並且加上我們所需要用來執行的函式
**例如:<input value="Show Me the Money" type="button" onClick="getBoardsSold();" />
*所以本來在form裡面的 action="XXX.php" 可以直接移除，因為在這邊，表單並不會被提交出去。
*任何時候，你可以利用JavaScript請求物件的responseText屬性，取得伺服器的回應。
*瀏覽器一直都知道請求正處於何種備妥狀態(readyState)，你的JavaScript程式碼可以取得這樣的資訊。
重要的概念：
*非同步的JavaScript不會等待伺服器的回應，即使使用者正在處理該請求的同時，使用者還是可以繼續使用頁面。
*在Ajax的應用中，伺服器通常只會送出你所需要的資料，不會送出其他的html或和外觀呈現方式相關的資訊。
<%TrackBack(list)%>
一直很想要學的Ajax，終於有書可以學了~
之前將Ajax in Action整本電子書印出來，厚厚的英文版，看了第一章後，發現這樣學一個新語言好像太慢了，就停下來了。
現在則是托公司的福，買了Head Rush Ajax中文版(蔡學鏞譯)回來啃，真開心~
== Ajax 第一課 ==
Ajax三個最重要的基本中心思想是：
1. 非同步應用，是使用JavaScript物件做出請求，而不是提交表單
2. 請求與回應，是由網頁瀏覽器處理，而不是直接由JavaScript程式所處理。
3. 一旦網頁瀏覽器得到非同步請求的回應，他會以伺服器的回應「回頭呼叫」JavaScript程式
Ajax碎碎念
*結合了非同步請求與更新，而不用重載頁面，就是使用了Ajax應用。
*如果只想更新部份頁面，Ajax相當適合。
*有時候，JavaScript會使用XML與伺服器來回溝通。但是並非所有的請求都需要使用XML。
*很多人都說Ajax是Asynchronous JavaScript and XML 的縮寫，可是創造出這個詞的Jesse James Garrett卻說並不是那四個字母的縮寫。那...到底是什麼意思呢?
Ajax中最常用的html標籤是div和span
*div是一個可以持有相關元素的容器元素，並容許你以一個CSS規則，讓所有的元素有統一的樣式。
*span讓你將行內文字(inline text)和周圍之間有一點區隔。你可以利用CSS位你的span元素設定樣式，且輕易的裝飾文字。
接下來是JavaScript的範例，分別是建立請求物件、取得請求資料、更新資料。
//建立一個請求物件
var request = null;
function createRequest(){
try{
request = nwe XMLHttpRequest();
//如果是IE系列的瀏覽器，不能用XMLHttpRequest的方法，要用其他種代替。
} catch (trymicrosoft){
try{
request = new ActiveXObject("MsXML2.XMLHTTP");
} catch (othermicrosoft){
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch(failed){
request = null;
}
}
}
if(request = null)
alert("Error creating request object");
}
function getBoardsSold(){
createRequest();
var url = "getUpdateBoardSales-Ajax.php";
//true is 非同步, false is 非同步
request.open("GET", url, true);
//必須在發出請求之前(before send function)，就要告訴瀏覽器，要怎麼處理伺服器對此請求的回應。
//如果你將一個函式的名字放在這裡，當瀏覽器從伺服器得到回應時，瀏覽起將執行此函式。
//JavaScript要求這裡只能有函式的名字，後面不能放上括號。
request.onreadystatechange = updatePage;
//這表示沒有資料隨著這個請求一起送出，所以每次被執行時，他就只是傳回我們要的結果。
request.send(null);
}
function updatePage(){
//readySate(備妥狀態)是請求物件的屬性，用來儲存目前的備妥狀態。
//當readyState為4時，代表伺服器已經完成該請求。
if(request.readyState == 4){
var newTotal = request.responseText;
//利用id值，取得在網頁上的這些元素
var boardsSoldEl = document.getElementById("boards-sold");
var cashEl = document.getElementById("cast");
//取代前者的文字，使其成為後者。這是要自己另外寫的一個JavaScript函式。
repalceText(boardsSoldEl, newTotal);
}
}
網頁中的部分內容
<body>
<div id="boards">
<table>
<tr><th>SnowBoards Sold</th>
<td><span id="boards-sold">1012</span></td></tr>
....
</table>
</div>
</body>
相對應的網頁修改和所需的知識：
*將網頁中form的type從submit改成button，並且加上我們所需要用來執行的函式
**例如:<input value="Show Me the Money" type="button" onClick="getBoardsSold();" />
*所以本來在form裡面的 action="XXX.php" 可以直接移除，因為在這邊，表單並不會被提交出去。
*任何時候，你可以利用JavaScript請求物件的responseText屬性，取得伺服器的回應。
*瀏覽器一直都知道請求正處於何種備妥狀態(readyState)，你的JavaScript程式碼可以取得這樣的資訊。
重要的概念：
*非同步的JavaScript不會等待伺服器的回應，即使使用者正在處理該請求的同時，使用者還是可以繼續使用頁面。
*在Ajax的應用中，伺服器通常只會送出你所需要的資料，不會送出其他的html或和外觀呈現方式相關的資訊。
真是好學不倦的鼻~
增加迴響
這篇文章已經關閉，不能增加迴響和投票