<<AJAX範例>>
AJAX說明：
AJAX 是「Asynchronous JavaScript and XML」（非同步的 JavaScript 與 XML 技術）的縮寫，簡單說就是網頁不用重新整理，就能即時地透過瀏覽器去跟伺服器溝通，撈出資料。
伺服器對 AJAX 資料請求回應通常是以三種資料格式其中之一（HTML、XML、JSON），最常與 Javascript 做搭配就是 JSON。[1]
AJAX範例：
<script type="text/javascript" src="https://jplop.neocities.org/js/tw-sack.js"></script>
<script type="text/javascript">
//AJAX元件來源 https://code.google.com/archive/p/tw-sack/ [2]
var ajax = new sack(); //宣告物件
function whenCompleted(){
var e = document.getElementById('sackdata');
//印出相關資訊
if (ajax.responseStatus){
var string = "<p>Status Code: " + ajax.responseStatus[0] + "</p><p>Status Message: " + ajax.responseStatus[1] + "</p><p>URLString Sent: " + ajax.URLString + "</p>";
} else {
var string = "<p>URLString Sent: " + ajax.URLString + "</p>";
}
e.innerHTML = string;
//印出實際傳回值
alert(ajax.response);
}
function doit(){
var form = document.getElementById('form');
ajax.setVar("myTextBox", form.mytext.value); //設定丟出的值. (如果有多個可以多設定幾個)
ajax.requestFile = "sackdemo.php"; //設定後端處理程式
ajax.method = form.method.value; //使用GET 還是 POST (不輸入預設為 POST) GET/POST 必須打大寫，不然RNDVAL不會正常工作
ajax.element = 'replaceme'; //設定回傳的資料要自動放哪！！ 可以不設定
ajax.onCompletion = whenCompleted; //設定資料回來時的觸發事件
ajax.execute = true; //寫這行就不必寫觸發事件.. 回傳立刻執行
ajax.runAJAX("passedvar=somedata"); //確定送出資料
}
</script> |
同步請求 v.s. 非同步請求：
「同步請求」和「非同步請求」的對比：同步請求 (Synchronous request)： 客戶端 (client) 對伺服器端 (server) 送出 request ，並且在收到伺服器端的 response 之後才會繼續下一步的動作，等待的期間無法處理其他事情。
這個作法並不理想，因為通常伺服器端的運算速度比本地電腦慢上好幾倍。
非同步請求 (Asynchronous request)：客戶端 (client) 對伺服器端 (server) 送出 request 之後，不需要等待結果，仍可以持續處理其他事情，甚至繼續送出其他 request。Responese 傳回之後，就被融合進當下頁面或應用中。[3]
HTTP 請求方法[4]：
所有的 API 都有對應的 HTTP 請求方法（request methods），方法與 API 完全一致時，後端才能依據請求回應資源；反之，方法與 API 無法對應時就會出現錯誤（404 找不到路徑）。
常見的請求方法如下：
- GET：請求特定的資源，不會提交任何資源，伺服器僅會依據條件進行回應。
- POST：提交特定的資源，通常會用來新增資源或是用以改變狀態使用（登入、註冊等等）。 -> 伺服器會回應新增或改變狀態的結果。
- PUT：取代指定的資源，通常用於完整更新。 -> 伺服器會回應更新的結果。
- PATCH：更新指定資源，通常用於部分資源更新。 -> 伺服器會回應更新的結果。
- DELETE：刪除特定的資源。 -> 伺服器會回應刪除的結果。
HTTP 的方法雖然很多，每個方法功能也略有不同，但在此不需要熟記，API 的文件中大多都會詳述可用的方法，僅需要從字面概略了解其用途即可。
AJAX參考文件：
https://medium.com/
https://code.google.com/archive/p/tw-sack/
https://tw.alphacamp.co/blog/ajax-asynchronous-request
https://www.casper.tw/development/2020/09/30/about-ajax/
|