6. AJAX

何謂 AJAX?

AJAX 是 Asynchronous JavaScript And XML 的簡寫,它的裡面非常類似 Dynamic HTML(或者 DHTML),主要的目的在於提高網頁的互動性(interactivity),速度(speed),以及可用性(usability)。其實,這個概念並不是很新,只是這樣的技巧被大量的應用於 Google 的網頁之後,如 Gmail、Google Maps、和 Google Suggest 等,才被重視,而第一個提出 AJAX 這個名詞的就是Jesse James Gamett。利用類似技巧的公司還有 Writely、Kiko 等。這樣的概念,開始的人們對於網頁是否會取代 desktop applications 進行討論。

AJAX 也不是一項單獨的技術,它是由一堆現有的技術所組成,它的組成技術有:

  1. XHTML(或者 HTML)加上 CSS 來作為資料的呈現。
  2. 利用 DOM 以及 Javascript 來進行存取資料(大多為 XML)的處理。
  3. 利用 XMLHttpRequest 物件與遠端的 web server 進行非同步的資料交換。
  4. JavaScript將所有的東西綁定在一起。

  5.  .SOAP以XML的格式來傳送方法名和方法參數。

優點和前提:

1.使用Ajax的最大優點就是能在不更新整個頁面的前提下維護數據。這使得Web應用程序更為迅捷地響應用戶交互,並避免了在網路上發送那些沒有改變的信息。 

2.Ajax不需要任何瀏覽器插件,但需要用戶允許JavaScript在瀏覽器上執行。就像DHTML應用程序那樣,Ajax應用程序必須在眾多不同的瀏覽器和平臺上經過嚴格的測試。隨著Ajax的成熟,一些簡化Ajax使用方法的程序庫也相繼問世。同樣,也出現了另一種輔助程序設計的技術,為那些不支持JavaScript的用戶提供替代功能。 

 

 

 

1. 傳統Web應用與AJAX應用之比較
傳統的Web需要使用者送出的訊息伺服器有回應後才能再送出第二個訊息,因此當時WWW又被稱為World Wide Wait

在舊的技術(同步技術)中Request、Response方式是在<Form>標籤中做POST的方式,再傳到伺服器再回傳結果頁面的方式

叫做:Do PostBack(重新更換下載頁面),舊式的瀏覽器與伺服器溝通是以PostBack的方式,舊式網頁並非就是所謂的同步技術

只能說舊式網頁的PostBack方式是"要求、等待處理、接收"過程

 

現在加入Ajax(非同步技術)以後的Web會再客戶端先建立一個Request Object來處理訊息,因此當使用者送出第一個訊息時,可以緊接著送出下一個訊息,不需要跟伺服器同步(asynchronous)

不同的瀏覽器會有不同的方法建立XMLHttpRequest object。IE使用ActiveXObject, 其他瀏覽器使用內建的java script 物件,叫做XMLHttpRequest.如果有使用到XMLHttpRequest,要瀏覽網頁,必須透過HTTP才能正常瀏覽

Ajax的技術就是利用XMLHttpRequest及Javascript function實作傳遞事件

 這部分必須在網頁實作處理引擎(callback-function),一方面做到資料傳遞與取得狀態的控制及時間等待的非同步處理

而伺服器也要做一個對應的引擎利用CallBack function做到資料交換,這有點像在伺服器與瀏覽器中間做一個透明的Pipeline機置

Ajax的CallBack方式可做到事件處理的互動性,如 TCP/IP協定的Three way hand shaking的分割封包、確認接收模式;

或是另一個較為實際的例子是你可以在下載電影的同時,將已下載的片段觀看,而不用等待全部的電影下載完後再看

Ajax的非同步技術就是是利用了切割處理回傳訊息技術,伺服器端有點像是作業系統中將處理的Process切割成小單元的multithread方式(分段批次處理)

 

2. RIA (Rich Internet Application) : AJAX (Asynchronous JavaScript and XML), Flex, Silverlight
本來傳統在填寫向註冊資料的表單的時候只有送出以後才會檢查是否有錯誤並要全部重新寫一次,
但是有了AJAX的應用之後,就能夠在使用者輸入資料的時候動態偵測是否符合規定,讓使用者更為方便。

3. Raw Ajax with XMLHttpRequest (XHR) Object
基本method:使用open來設定他的request,用send來啟動他的request
其他:
onreadystatechange儲存callback function
readyState 當值為4的時候表示傳送完成
responseText 伺服器傳給客戶端的文字
responseXML 伺服器傳回XML文件的時候使用
status 當值為200表示成功 404找不到網頁 500伺服器錯誤
statusText 額外的資訊,包括錯誤訊息之類的
setRequestHeader通常用來設定content-type的值
getRequestHeader決定response的type,用來校正用
getAllRequestHeaders純回所有Headers要求所形成的陣列
abort取消目前的要求
基於安全問題XMLHttpRequest使用SOP來不永許第三方的存取(XSS)。

程式碼範例:

a. onreadystatechange:

 

xmlHttp.onreadystatechange=function(){// 在這裡寫程式碼
}
 b. readyState:  
xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4){// 得到從server回應傳回的資料}}

c.

xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4){document.myForm.time.value=xmlHttp.responseText;}}
補充: readyStage 的四個狀態
stage description
0 The request is not initialized
1 The request has been set up
2 The request has been sent
3 The request is in process
4 The request is complete

 

 

 

 

 

 

4. Ajax with XML and DOM
因為容易建立和存取,AJAX常配合XML使用
再加上讓所有元素都結構化,所以融入DOM

而DOM 有自己的局限性和缺點,但同時也擁有眾多優點:它內置於很多應用程式中; 

無論使用 Java 技術、Python 或 JavaScript,它都以相同方式工作; 

越來越多的應用程式開始支援 DOM,這包括基於 Mozilla 的應用程式、OpenOffice 和 Blast Radius 的 XMetaL。 

越來越多的規範需要 DOM,並對它加以擴展(例如,SVG),因此 DOM 時時刻刻就在您的身邊。使用這種被廣泛部署的工具, 

絕對是您的明智之舉。 

 

XML語言的目的並不是要取代HTML成為網頁語言的新標準, 而是輔助HTML, 提供HTML更有延伸性的資料定義方式.

使用 HTML 編排時,只能使用已定義好的標籤,而不能有任何的變形。 

但在使用 XHTML 1.0 時,可以將 HTML 4.0 的標籤及其他 XML 語言的標籤, 混合使用 

 

因為DOM和XLM容易建立和存取,AJAX常配合XML使用 

再加上讓所有元素都結構化,所以融入DOM

 

例如講義範例(F-09.Ajax-第33頁):

1 <?xml version = "1.0" encoding = "utf-8"?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

.

.

.

28 asyncRequest.send( null ); // send the request

29 } // end try

30 catch ( exception )

31 {

32 alert( 'Request Failed' );

33 } // end catch

34 } // end function getImages

35

36 // parses the XML response; dynamically creates a table using DOM and

37 // populates it with the response data; displays the table on the page

38 function processResponse()

39 {

************************************************************************

*40 // if request completed successfully and responseXML is non-null                *

*41 if ( asyncRequest.readyState == 4 && asyncRequest.status == 200 &&             *

*42 asyncRequest.responseXML )                                             *

*43 {                                                                    *

*44 clearTable(); // prepare to display a new set of images                         * 

*45                                                大量使用MOD XML *       

*46 // get the covers from the responseXML                                    *

*47 var covers = asyncRequest.responseXML.getElementsByTagName(               *

*48 "cover" )                                                             *

*49                                                                     *

*50 // get base URL for the images                                            *

*51 var baseUrl = asyncRequest.responseXML.getElementsByTagName(              *

*52 "baseurl" ).item( 0 ).firstChild.nodeValue;                                   *

************************************************************************

53

54 // get the placeholder div element named covers

55 var output = document.getElementById( "covers" );

.

.

101 // deletes the data in the table.

102 function clearTable()

103 {

104 document.getElementById( "covers" ).innerHTML = '';

105 }// end function clearTable

 

5. Ajax with JSON
使用JSON可以表示物件字串數字或任何型態的值,還可以用eval轉成JavaScript的物件但是這個因為也可以轉程式碼,
所以有安全性的問題比較好的作法是利用JSON parser,此外,JSON比起XML與javascript有更好的對應性

6. Dojo Toolkit
Dojo是一套從基本網站建設像是事件處理到豐富的GUI介面都有的工具,
它不僅免費,開放原始碼,還能減少處理單一function的非同步要求以增進效率。

6.1 Script.aculo.us
Script.aculo.us 是建立在Prototype JavaScript Framework上的JavaScript函式庫
有動態的視覺化效果以及用DOM做成的使用者介面元素

它主要包含了Seaside 和 Ruby on Rails 以及很多web application frameworks和腳本語言

它是由Thomas Fuchs所開發的,在2005年的時候才公諸於世

7.AJAX這名詞是由Jesse James Garnett所創的,他曾說過:AJAX這個名詞是Asynchronous Javascript +XML的簡稱,也就是 Asynchronous Javascript And XML。同時他也為AJAX提出了基本定義,定義如下:
a. 以XHTML及CSS為基本呈現手法。
b. 以文件物件模式(DOM—Document Object Mode)做為動態顯示及互動手法。
c. 用XML及XSLT作為資料操作及交換。
d. 使用XMLHttpRequest擷取非同步(Asynchronous)資料。
e. 最後用Javascript把這些都串在一起。

8.AJAX並不是新的技術,而是被組合出來的。所以AJAX的應用技巧面遠遠超過技術面。而使用Javascript擷取XML資料,並動態處理成HTML與CSS組合,這也成為AJAX技巧的名稱。

9.AJAX 技術概念

AJAX 是建立在一個核心概念:「使用非同步呼叫,並結合XML 方式傳輸資料與大量使用Client Script。」在AJAX 技術中,程式開發人員能夠以Client 端Scripts 方式透過XMLHTTP 來進行非同步的Web 服務呼叫,而XMLHTTP 通訊協定常用於將資訊封裝成XML 資料型式在網路間傳送,大多數的瀏覽都有實作XMLHTTP 類別,而此類別用於建立一個進行遠端呼叫與資料收發的proxy物件,透過非同步方式進行呼叫,網頁中的資料與使用者介面不需要進行Client 端與Server 端之間的往返,結果是具有較少的資料傳送與較佳的應用程式效能,非同步呼叫能夠使得網頁應用程式能夠有更佳良好的反應性,因為使用者能夠在呼叫工作仍在Server 端執行的同時,而在Client 端瀏覽器繼續進行工作。
另一方面AJAX 大量使用Client 端Script,特別是JavaScript,JavaScript 是用於進行遠端呼叫、執行Client 端應用程式的處理與建立增強的使用者介面功能。

AJAX 的解決方案使用JavaScript 並搭配其他數種Client 端類型技術,包括了:

1.瀏覽器的Document Object Model(DOM):DOM 將這些元素呈現在HTML 網頁中成為標準的物件組(如document、windows 等等),並且能夠透過程式化方式來操作它們。

2. 動態HTML(DHTML):當使用者在頁面中輸入時,DHTML 透過Client端的Script 方式延伸了HTML 互動的反應能力,並且使其變得更容易,並且不需要往返的行為。

3. 行為(Behaviors):這是一種程式化包裝在使用者介面中的動作(如拖曳drag and drop 行為),並且能夠與網頁元素產生連結。

4.元件(Component):是一種能夠提供擴充Client 端使用者介面功能特點的客製化JavaScript 物件。

JavaScript 結合這些Client 端技術後,使得程式開發人員足以建立能夠媲美桌上型應用程式的使用者介面功能特點,在這有兩個例子可提供給大家參考:

1. 微軟Virtual Earth 網站:一個提供電子地圖的網站。

2. 微軟Outlook Web Access:一種透過WEB 瀏覽器收發e-mail 的Client端使介面。

以上兩個例子皆展示出以AJAX 技術所建立豐富的使用者介面與高效能之應用程式典範。

然而使用這些技術來建構AJAX 應用程式是複雜的,直到現在程式開發人員仍必須手動建立事件處理、訊息傳遞、和建立豐富性使用者介面所需要的細節。而且再者因為JavaScript 不是物件導向語言(OOP),故它沒有強型別、命名空間、例外事件處理與其OOP 之特點,為這些功能特點,程式開發人員還經常必須以其他的語言來撰寫內建於其中的專屬基礎架構程式碼。

--------------------------------------------------------

AJAX 是 Asynchronous JavaScript And XML 的簡寫,非常類似DHTML,主要在於提高網頁的互動性,速度以及可用性~

而AJAX用在寫asp,jsp,php程式~
我們按下一個按下送出鈕時會把整個網頁送回server~
會產生網頁會閃一下的情況~
利用ajax的技術~
透過javascript與server端資料交換~
再把結果顯示到畫面上~
畫面不會閃動~

------------------------------------------------------------

 

Asynchronous JavaScript + XML是用來作彼此的通訊之用,以Ajax的通訊方式,相互間的通訊可以使用XML文件而不一定要是整張的HTML網頁。當有需要與伺服器互動時,客戶提出需求伺服器只回應必要資料,客戶端會有個Ajax引擎(JavaScript程式)處理回覆的資料,只修改部份網頁內容。通訊中使用者介面不需中斷等待新的網頁,客戶端變成一個類似獨立執行的程式,即使是在等XML的時候還是可以繼續操作,因為大部分的互動其實是使用JavaScript程式。

 

-------------------------------------------------

 

AJAX其實還蠻好用的 
其中AJAX 是一堆技術所誕生出來的技術,其中主要的是由Javascript 與 XML, 

 這就是 AJAX 的全名:Asynchronous JavaScript and XML,AJAX當我們要送出一個要求(做事)的時候你可以繼續你所需要的操作,不會因為一個要求(做事)而中斷了你其它事情。  AJAX主要包括了下列幾個部份:

使用 JavaScript 操作 DOM及互相回應則可以利用XML的技術或其他儲存格式進行數據交換 XMLHttpRequest 與伺服器進行非同步數據交換使用 JavaScript 將所有的東西綁定在一起所以由上我們可以知到他們並不是同步的Javascript和XML 。所以他們可以好好的利用因為並不會你操作某個動作時,他就會因而中斷了。  

 

使用 AJAX 的時機 Google Maps 的使用中,browser 與 web server 之間需要傳遞非常大量的圖形資料,如果利用傳統的同步方式,在全部的圖形下載完成之前,我們沒辦法對網頁進行操作,而使用者點選往左、往右的按鈕後,使用者又得等待另一次的圖形傳遞。反之,如果我們在使用者操作的時候,非同步的下載其它圖形,這樣速度會變快,也不必一再的重複 reload 網頁。

 1.AJAX engine 接收使用者全部或者部份的 form data

 2.AJAX engine 與 web server 連絡並由 web server 處理完成

 3.將完成的資料回傳給 AJAX engine 

4.由 AJAX engine 將成果動態的呈現在網頁上 以上過程,使用者完全不會感受到,而且由於是非同步的,網頁不會停止接收使用者的操作。

 

 

Ajax優點是能在不更新整個頁面的前提下維護數據,使得Web應用程序更為迅速地讓用戶交互,並且防止了在網路上傳送那些沒有被改變的訊息。

Ajax不需要任何瀏覽器插件,但需要用戶允許JavaScript在瀏覽器上執行。Ajax應用程序必須在眾多不同的瀏覽器和平臺上經過測試。隨著Ajax的發展,一些簡化Ajax使用方法的程序庫也開始出現。同樣,也出現了另一種輔助程序設計的技術,為那些不支持JavaScript的用戶提供替代功能。

Ajax最主要的批評就是可能破壞瀏覽器後退按鈕的正常行為。在動態更新頁面的情況下,用戶無法回到前一個頁面狀態,因為瀏覽器僅能記憶歷史記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的差別非常怪異,用戶通常想取消他們的前一次操作,但是在Ajax應用程序中並不能實行。開發者們想出了種種辦法來解決這個問題,大多數都是在用戶按歷史記錄時,通過創建或使用一個隱藏的IFRAME來重現頁面上的變更。

一個相關的觀點認為,使用動態頁面更新使得用戶難於將某個特定的狀態保存到收藏夾中。該問題的解決方案也已出現,大部分都用URL片斷標識符來保持跟蹤,允許用戶回到指定的某個應用程序狀態。這些解決方案也同時解決了許多關於不支持後退按鈕的爭論。

-- ----------------------------------------------------------------------------------------------------------------

 

 

Ajax程式庫 

首先我們先談談為什麼ajax會受到大家的矚目,除了在網頁上有運用的到ajax的技術,且除了網頁中使用ajax的技術外,網路上也公開許多ajax的程式庫,其中也有使用者可以自由使用的程式庫,而這些資料庫是將製作的ajax的實體等固定的處理程序和製作網站時,方便功能轉變為簡短的程式碼之後的集合體。

 

在這些程式庫中,有些不但具有ajax的功能,還會有擴充JavaScript的功能,可以簡易的作PynamicHTML網頁的功能,除哦了上述說的這種程式庫,還有一種是使用ajax的web應用程式的API製作成資料庫,」prototype.js」和」Yahoo!User Interface Library」屬前者,Google地圖和Yahoo!地圖資訊web服務屬後者。

 

Prototype.js

「Prototype.js」是以緩和動態web應用程式的開發為目的,可議在MIT授權條款的範圍內,讓使用者自由的使用JavaScript的框架。MIT授權條款是開放原始碼軟體所使用的一種授權條款,被授權人只要再重新發佈時,發表著作權申明及免責聲明即可。

「Prototype.js」是由SamStephenson所製作並發表的程式庫,而「Prototype.js」是由一個外部讀取的JavaScript檔案。使用者可以藉由引入這個「Prototype.js」檔案來使用它。

其所支援的瀏覽器

Internet Explorer 6.0以上 

Firefox1以上 

Safari1.2以上 

 

使用範例1

注:

這個程式是以HTTP從外部讀取HTML檔案範例,使用「Prototype.js」重新改寫。

這個範例是放在他的HTML檔案所在的目錄中,放入「Prototype.js」檔案以方便讀取,所以當讀取前者時,後者也會順便被讀取。 

 

操作:

點選」變更!!!」,就會使用HTTP從外部讀取HTML檔案到id名」view1」的div元素之內。 

prototype_1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<meta http-equiv="Content-Script-Type" content="text/javascript">

<meta http-equiv="Content-Style-Type" content="text/css">

<title>Prototype_1</title>

<script type="text/javascript" src="prototype.js"></script>

<script type="text/javascript">

//<![CDATA[

function RoadHtml(id, uri) {

    new Ajax.Request(uri,

    {

        method:'get',

        onSuccess: function(transport){

            $(id).innerHTML =transport.responseText;

        }

    });

}

//]]>

</script>

<style type="text/css">

<!--

#view1{

    width: 600px;

    height: 400px;

    background-color:tan;

}

-->

</style>

</head>

<body>

<div id="view1">

在這裡讀取HTML檔案

</div>

<form id="Ajax_Form">

  <input type="button" id="change" value="變更!!" onClick="RoadHtml('view1','test.html')">

</form>

  </body>

</html>

 

test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" >

<html><head>

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<meta http-equiv="Content-Style-Type" content="text/css">

<title>Ajax_Sample</title>

<style type="text/css">

<!--

#view1{

    width: 600px;

    height: 400px;

    background-color:#00ffff;

}

-->

</style>

</head>

<body>

<div id="view1">

檔案讀取完畢了...</div>

</body>

</html>

 

解釋:

讀取「Prototype.js」的部份 

<script type="text/javascript" src="prototype.js"></script>

函數的處理程序:

function RoadHtml(id, uri) {

    new Ajax.Request(uri,

    {

        method:'get',

        onSuccess: function(transport){

            $(id).innerHTML =transport.responseText;

        }

    });

}

設定對伺服端傳送請求,把傳回完成的資料寫出。

  new Ajax.Request(uri,

    {

        method:'get',

        onSuccess: function(transport){

            $(id).innerHTML =transport.responseText;

        }

 

 

 

 

 

本身综合了「Javascript + DHTML + DOM + CSS + XMLHttp + XML」又可稱做多位一體的互動式網頁應用開發技術,除了 (所思即所見)的特色,AJAX也可以說是一種以客戶導向的網頁應用DIY開發程式。

Web2.0是最近的新趨勢,其中最主打的技術就是”AJAX網頁技術

AJAX全名為「Asynchronous JavaScript and XML」,是創建互動式網頁應用的網頁開發技術,結合了「Javascript + DHTML + DOM + CSS + XMLHttp + XML」在2000年就提出,但是直到最近Web2.0的興起,才又竄紅。

傳統網頁與AJAX網頁

使用搜尋引擎找網頁資料時,依照搜尋引擎的分類一個個點進去,以最Yahoo為例,假如想找”曾雅妮”的資料(並非找新聞),從熱門分類找到運動體育這類,點擊後進到下一頁,再點選運動明星、選高爾夫球,好不容易找到正確的分類,這個分類下有三頁,再一頁頁找尋想找的資料,這樣找竟然還是找不到關於曾雅妮的介紹。

 

們想搜尋的網頁隱藏在茫茫網海之中的妮妮,傳統方式須透過點擊、等待畫面、思考、再點擊、等待畫面、再思考…重複幾個循環後,還不見得能找到所要的資料。

 

然而要如何更快而且更直接的找到所需的資料?

有別於一般入口網站,最近所有人的口頭禪”不會就去GOOGLE一下”

Google提供了強大的搜尋功能,畫面簡單明瞭,僅讓使用者輸入想查詢的字串,便會找出相關的資訊。Google搜尋加入了「自動補齊字串」的新功能,此即為AJAX的技術的應用之一。用上面一樣的範例透過Google來搜尋。輸完前兩個字,底下就自動顯示許多搜尋關鍵字,後面並出現對應的搜尋結果次數。甚至可以再繼續增加關鍵字縮小搜尋結果的範圍。對使用者而言,可以更快更精準的找到所需的資料。因此透過AJAX技術的演進,使用者可以擺脫以往Click and Wait的痛苦經驗,取而代之的是「所思即所見」。可以直接用Javascript寫AJAX網頁。若有用Microsoft Visual Studio 2005則可利用Client Script Callback的功能,達到AJAX網頁的功能。

 

 

擁有AJAX的網頁
●Google Maps
 
Google地圖服務,利用地圖左上方的拉桿調整地圖解析度,網頁會即時顯示解析度和地圖資料。移動地圖畫面時,僅需用滑鼠拖拉底圖即可移動。相較於傳統網頁地圖服務,會在地圖四周出現箭頭,往右鍵頭點一下會重新整理畫面,將地圖右移。同樣調整解析度也需透過重新整理畫面,花費許多時間在等待網頁傳輸。

目前Google Maps也已經將台灣地區的路名、巷道全面更新為中文版,未來搭配上GPS系統,將可針對不同需求,製作自己需要的地圖。

 

●Web Online Office
除了傳統的Microsoft Office之外,透過AJAX的技術,目前可在網頁上做出如Word、Excel等功能的網頁應用程式。

 

 

(以下是直接貼網路資料)

Microsoft在去年推出ASP.NET AJAX,並今年推出1.0版。可下載的元件有:ASP.NET 2.0 AJAX Extensions 1.0及ASP.NET AJAX Control Toolkit(註:必須先安裝好ASP.NET AJAX1.0,才能夠安裝使用Control Toolkit)。AJAX 1.0內有Script Manager幫助撰寫AJAX網頁,在AJAX Control Toolkit中則提供32個常見的控制項 (官方網頁http://ajax.asp.net/)

 

 

---F20-Web基本原理與技術--

 

編輯者 : 林采昕 408262143 / 張字青 408262349 / 陳嬿婷 408262416 / 許瀚丰 408262208/ 龔子昀 408261060

web 前端的整合

 留言

整合跳躍的前端技術

  • HTML(定義網頁的內容架構)、CSS(網頁呈現)、JavaScript、Dom&Event
  • 演化過程:門檻低 → 繁複 → 新功能(AJAX) → 整合(HTML5) → 簡化(jQuery)
  • AJAX(Asynchronous JavaScript and XML) - 新功能
  • HTML5 - 整合(HTML + CSS + JavaScript + …etc)
  • JQuery - 簡化(以簡單的語法達到AJAX HTML5)

AJAX(Asynchronous JavaScript and XML)

  • Asynchronous = 非同步
    • 使用者傳出request接收太慢,所以可以再做出request的同時做其他事情,request由網頁接收並送到後端,由瀏覽器跟後端做互動。

    • 上述由AJAX Engine Solve

  • 包含XML,但格式有能用Plain Text、JSON(不限於XML)
  • classic -> world wide wait(Fig)
  • 伺服器要求取回資料(局部更新)
  • 困擾:失去歷史紀錄與書籤的功能,無法回到前一頁,因為瀏覽器僅能記下歷史紀錄中的靜態頁面
  • 解決:HTML5操作瀏覽歷史,以字串形式儲存網頁狀態
  • 運作流程細節,「XRL物件」使用Callback SOP(同源政策)
    • SOP = Same Origin Policy
    • callback function => 控制回應回來接收的人
  • UML(Unified Modeling Language)

AJAX元件互動

XHR(XMLHTTPRequest)Methods

  • 註冊在XHR裡面
Method Descriction
new XMLHttpRequest() 新增一個XHR物件
abort() 取消HTTP Request
open(method/url/async/user/psw) 描述HTTP Request method
method:GET or POS
url:網址
async:true(asynchronous)false(synchronous)
user:optional ID
psw:optional password
send() 送出 HTTP Request : Get
send(string) 送出 HTTP Request : Post
屬性 描述
onreadystatechange 狀態改變事件觸發
readyState XHR請求狀態
0 = 未初始化
1 = 正在下載
2 = 已下載
3 = 互動中
4 = 完成
responseText 伺服器的回應,傳回文字
responseXML 伺服器的回應,傳回XML
status 伺服器的HTTP狀態碼
如:200:“OK”, 404:“Not Found”
statusText 伺服器返回的信息,HTTP狀態碼的相應文本( OK或Not Found )

Asyn Callback

  • 將函是當作是另一個函式的參數
  • Callback function
    • 當另一個fuction的參數,執行完就呼叫Callback function
    • 讀取資料庫會 Call API 時會用到
    • 使用 Wrapper fuction 讓 Callback 做不同的事
    • 缺點 : Callback Hell串接函式一旦變多,不知身處第幾層,Error/Exception handing 除錯麻煩
    • Promise : 能解決Callback Hell

Promise Stateful Machine

  • Promise 是一種狀態機(Finite State Machine, FSM)
  • 有三種狀態
    • Pending - 剛建立的時候
    • Fulfilled - 操作成功的狀態
    • Rejected - 操作失敗有error的狀態
  • 用 .then() 拿到result
  • .then() & catch() 都會回傳一個Promise串在一起
  • Callback Hell 的多層縮排變成一層, error更好處理

同源政策(Same Origin Policy, SOP)

  • 為了保證安全,防止惡意網站竊取數據,限制 “Cross Domain Access (跨網域存取)”
  • Cross-Site Scripting(also known as XSS)
    • 連到這個網頁後,然後有第三方網站(惡意網站)又在連出去,被抓取資料
    • 資安方法 Bypass
      • Server-site Proxy: make request to other servers on the web application behalf
    • W3C:瀏覽器實作( 用得最多的方式 )
      • CORS(Cross - Origin Resource Sharing) - 通知Cross-Domain Name, Method, Header