簡單的無架構Ajax應用

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

上載者：User

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

如果一定要添加Ajax的架構才能應用Ajax的話,那麼在一般購買虛擬機器主機空間的朋友們來說,讓服務商安裝自己所要用的架構在伺服器上,是一件很麻煩,也可能是不能完成的事件.所以還是讓我們自己來瞭解Ajax的應用吧.
其實很簡單,利用JS的XMLHTTP對像就行了.
在IE中,它是這麼聲明的:var oBao = new ActiveXObject("Microsoft.XMLHTTP");

下面是一個應用的例子,很簡單,對一個數組內容的讀取,相信大家看了後能瞭解Ajax最基本的東西.這個例子可以擴充成對文章的按條讀取.

首先:我們建立一個響應JS調用內容的頁面.這個頁面的作用就是獲得當前要讀取的數組內容的索引.從數組裡取得其內容,返回給JS就行,怎麼返回?Response.Write()就行了,一個頁面的返回內容就是它的輸出內容.

art.aspx內容如下:<%@ Page Language="C#" %>

<script runat="server">
    private String[] Strs = new String[3];

    protected void Page_Load(object sender, EventArgs e)
    {
        Strs[0] = "這是第一條!";
        Strs[1] = "這是第二條!";
        Strs[2] = "這是第三條!";
        Int32 num = Int32.Parse(Request["id"]);
        Response.Clear();
        if (num < Strs.Length)
        {
            Response.Write(DateTime.Now.ToString("hh:mm:ss")+"-"+Strs[num]);
        }
        else
        {
            Response.Write("沒有下一條了!");
        }

    }
</script>

接下來,我們要建一個調用頁面了
頁面的內容很簡單:一個DIV用來顯示內容.ID=Content,然後有一個按鈕,點擊時調用JS的Loadart()函數來取得內容並顯示.
Default.aspx內容如下:<html>
<head runat="server">
    <title>Ajax 讀文章示範</title>
    <script type="text/javascript">
var i=0;
function loadart()
{

    var content =document.getElementById("content");
    var oBao = new ActiveXObject("Microsoft.XMLHTTP");
    oBao.open("Get","art.aspx?id=" + i,false);
    oBao.send();
    content.innerHTML = oBao.responseText;
    if(i<3)
        {i++;}
    else
    {i=0;}

}
</script>
</head>
<body>

    <div id="content">
    </div>
    <input type="button" onclick="loadart()" value="下一條"/>

</body>
</html>

完成了,測試一下吧,,,這兩個頁面放在一起喲.當然,你不想放在一起也行,那麼在oBap.open裡的地址就要寫完整路徑了.
一切就這麼簡單.擴充一下art.aspx,你可以讓它讀資料庫,這樣你的資訊內容就能按條瀏覽了.

本文章原先以中文撰寫並發佈於 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