Hello! Ajax!

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

來撰寫您第一個Ajax程式，使用非同步的方式向伺服端取得文字檔案，並加以顯示，首先請準備一個HTML網頁：

HelloAjaxEx-1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=Big5" http-equiv="content-type">
  <title>Hello! Ajax! Examples...</title>
  <script type="text/javascript" src="HelloAjaxEx-1.js"></script>
</head>
<body>

<center><input value="Ajax請求" onclick="startRequest();" type="button"></center>

</body>
</html>

這個HTML網頁會取得JavaScript檔案，而按下按鈕後，會執行startRequest()函式，JavaScript檔案如下所示：

HelloAjaxEx-1.js

var xmlHttp;

function createXMLHttpRequest() {
    if(window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
    else if(window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function startRequest() {
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", "HelloAjaxEx-1.txt");
    xmlHttp.send(null);
}

function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            alert("伺服端回應：" + xmlHttp.responseText);
        }
    }
}

在startRequest()中會建立XMLHttpRequest，並發出非同步請求取得HelloAjaxEx-1.txt，在當中只是簡單的文字訊息，注意如果當中要撰寫中文，則文字檔案必須儲存為UTF8，假設HelloAjaxEx1.txt如下撰寫：

HelloAjaxEx1.txt

這是非同步請求的回應文字

您可以按下鏈結來觀看結果。

您可以結合DOM來顯示取得的回應文字，不必使用對話方塊或重清（Refresh）網頁，例如在網頁中設定一個<div>：

HelloAjaxEx-2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=Big5" http-equiv="content-type">
  <title>Hello! Ajax! Examples...</title>

  <script type="text/javascript" src="HelloAjaxEx-2.js"></script>
</head>
<body>

<center>
<input value="Ajax請求" onclick="startRequest();" type="button">
<br>
<div id="response"></div>
</center>
</body>
</html>

而HelloAjaxEx-2.js可以改寫如下：

HelloAjaxEx-2.js

var xmlHttp;

function createXMLHttpRequest() {
    if(window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
    else if(window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
}

function startRequest() {
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", "HelloAjaxEx-2.txt");
    xmlHttp.send(null);
}

function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            document.getElementById("response").innerHTML =
                xmlHttp.responseText;
        }
    }
}

在這邊為了簡化範例，直接使用DOM物件的innerHTML屬性，您可以按鏈結觀看結果。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More