About | NetLify | NeoCities | Project | TEST | 管理

<<AJAX範例>>

AJAX說明:

AJAX 是「Asynchronous JavaScript and XML」(非同步的 JavaScriptXML 技術)的縮寫,簡單說就是網頁不用重新整理,就能即時地透過瀏覽器去跟伺服器溝通,撈出資料。

伺服器對 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/

 

Jplopsoft | THI | Netlify | NeoCities | LionFree

加密工具 | 提交歸檔 | QRCODE產生器 | 密碼產生器

アクセスカウンター
Free Web Hosting