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個狀