JS趴趴往上走- AJAX基本應用

-

AJAX

非同步 JavaScript 及 XML（Asynchronous JavaScript and XML，AJAX），利用XMLHttpRequest物件來與伺服器進行通訊，可以傳送並接收多種格式的資訊，包括:JSON、XML、HTML以及文字檔案。AJAX最吸引人的特點是「非同步」的本質，這代表它可以與伺服溝通、交換資料、以及更新頁面，且無須重整網頁。

透過XMLHttpRequest撈資料

為了使用JavaScript向伺服器撈取資料，首先我們要送出一個HTTP請求，這時就需要建立一個能和伺服器溝通的橋梁，也就是XMLHttpRequest物件

  //建立一個XMLHttpRequest物件
  var xhr=new XMLHttpRequest();

打開xhr會發現會裡面有各種狀態，這時我們看readyState:0意思就是request目前的狀態
創建好溝通的橋樑後，呼叫HTTP request類別的open()及send()方法讀取資料

  xhr.open('GET','網址',true);
  xhr.send(null);
open()的第一個參數是HTTP request的方法，也就是從 GET(讀取資料)、POST(傳送資料到伺服器)...等伺服器支援的方法中擇一使用。
第二個參數為請求資料的網址。
第三個參數為是否要不同步進行，設定為true表示不同步進行，即使伺服器尚未傳回資料也會繼續執行其餘的程式，此時的readyState狀態就會跳到1

接者使用send()，send()的參數則是Post資料給伺服器，而伺服器則以字串的方式回傳資料;而若你沒有想傳送任何資料，可以在參數寫上null(空的資料)，此時readyState狀態就會跳到2


readyState一共有四種狀態，分別是:
  • 0(還沒開始):已經產生一個XMLHttpRequest，但還沒有連結要撈取的資料
  • 1(讀取中):你使用了open(),但還沒把資料傳送過去
  • 2(已讀取):偵測到使用了send()
  • 3(資訊交換中):loading
  • 4(一切完成):撈到資料，數據已經完全接收，準備就緒
第2、3、4狀態若資料很少的話通常會很快跳到第4個狀態


使用 POST 請求

上面範例我們只要(GET)讀取資料而已，而當你想要POST時，首先open()的第一個參數要改成'POST',
緊接著需要使用setRequestHeader()設定內容類型，因為POST要發送的資料會放在請求的本體中，所以你必須告知發送的資料類型為何

  xhr.open('POST','網址',true);
  xhr.setRequestHeader(header(屬性的名稱), value(屬性的值);
  xhr.send('傳送資料');

發送表單類型的資料：('Content-Type','application/x-www-form-urlencoded')
發送 JSON 類型的資料：('Content-Type','application/json')

HTTP檢查狀態碼

最後我們要檢查伺服器傳回的HTTP狀態碼是否為200 (成功)

 //在XMLHttpRequestloading後，若狀態碼為200時回傳資料
 xhr.onload=function(){
 if(xhr.status==200){
  console.log(xhr.responseText);
  //可再這裡顯示撰寫的資料
 }else{
 //錯誤則回傳資料錯誤
 console.log('資料錯誤!!');
 }
}

xhr.responseText:傳回值視為字串用

其他狀態碼可以到連結了解~
https://blog.miniasp.com/post/2009/01/16/Web-developer-should-know-about-HTTP-Status-Code


參考資料:
https://developer.mozilla.org/zh-TW/docs/Web/Guide/AJAX/Getting_Started
https://openhome.cc/Gossip/JavaScript/POST.html
https://ithelp.ithome.com.tw/articles/10228118

留言

張貼留言