發出 Ajax 請求

 發出 Ajax 請求

1、從 Web 表單中擷取需要的資料。
2、建立要串連的 URL。
3、開啟到伺服器的串連。
4、設定伺服器在完成後要啟動並執行函數。
5、發送請求。

function callServer() {
  // 得到從表單中得到的city和state的值
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  // Only go on if there are values for both fields
  if ((city == null) || (city == "")) return;
  if ((state == null) || (state == "")) return;

  // Build the URL to connect to
  var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);

  // Open a connection to the server
  xmlHttp.open("GET", url, true);

  // Setup a function for the server to run when it's done
  xmlHttp.onreadystatechange = updatePage;

  //發送請求 

  xmlHttp.send(null);
}

1.開始的代碼使用基本 JavaScript 代碼擷取幾個表單欄位的值。

然後設定一個 PHP 指令碼作為連結的目標。要注意指令碼 URL 的指定方式，city 和 state（來自表單）使用簡單的 GET 參數附加在 URL 之後。

2.然後開啟一個串連，這是您第一次看到使用 XMLHttpRequest。

3。其中指定了串連方法（GET）和要串連的 URL。最後一個參數如果設為 true，那麼將請求一個非同步串連（這就是 Ajax 的由來）。如果使用 false，那麼代碼發出請求後將等待伺服器返回的響應。如果設為 true，當伺服器在幕後處理請求的時候使用者仍然可以使用表單（甚至調用其他 JavaScript 方法）。

4.xmlHttp（要記住，這是 XMLHttpRequest 對象執行個體）的 onreadystatechange 屬性可以告訴伺服器在運行完成 後（可能要用五分鐘或者五個小時）做什麼。因為代碼沒有等待伺服器，必須讓伺服器知道怎麼做以便您能作出響應。在這個樣本中，如果伺服器處理完了請求，一個特殊的名為 updatePage() 的方法將被觸發。

5.最後，使用值 null 調用 send()。因為已經在請求 URL 中添加了要發送給伺服器的資料（city 和 state），所以請求中不需要發送任何資料。這樣就發出了請求，伺服器按照您的要求工作。