首頁 > 開發者 > Ajax

EXT入門（三）－－－ajax

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
1  test.html

<html>
<head>
    <title></title>
    
    <!-- Include Ext and app-specific scripts: -->
    <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-all-debug.js"></script>
    <script type="text/javascript" src="ExtStart.js"></script>
    
    <!-- Include Ext stylesheets here: -->
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
</head>
<body>
<div id="msg"></div>
<div>
    Name: <input type="text" id="name" />
    <input type="button" id="okButton" value="OK" />
</div>
<div id="msg"></div>
    </div>
</body>
</html>

 2  ExtStart.js
 Ext.onReady(function()...{
    Ext.get('okButton').on('click', function()...{
        var msg = Ext.get('msg');
        msg.load(...{
            url: 'ajax-example.php', // <-- 按實際改動
            params: 'name=' + Ext.get('name').dom.value,
            text: 'Updating...'
        });
        msg.show();
    });
});

3 ajax-example.php

<?php if(isset($_POST['name'])) {
        echo 'From Server: '.$_POST['name'];
    }
?>

這種模式看起來已經比較熟悉了吧！先擷取按鈕元素，加入一個匿名函數監聽單擊。在事件處理器中（event handler），我們使用一個負責處理Ajax請求、接受響應（Response）和更新另一個元素的Ext內建類，稱作UpdateManagerUpdater。UpdateManager可以直接使用，或者和我們現在的做法一樣，通過Element的load方法來引用（本例中該元素是id為“msg“的div）。當使用Element.load方 法，請求（request)會在加工處理後發送，等待伺服器的響應（Response），來自動替換元素的innerHTML。簡單傳入伺服器url地 址，加上字串參數，便可以處理這個請求（本例中，參數值來自“name”元素的value),而text值是請求發送時提示的文本，完畢後顯示那個 msg的div（因為開始時預設隱藏）。當然，和大多數Ext組件一樣，Ext.Ajax 有許多的參數可選，不同的Ajax請求有不同的方案。而這裡僅示範最簡單的那種。

最後一個關於Ajax隱晦的地方就是，伺服器實際處理請求和返回（Resposne）是具體過程。這個過程會是一個服務端頁面，一個Servlet，一個 Http調度過程，一個WebService,甚至是Perl或CGI指令碼，即不指定一個伺服器都可以處理的http請求。讓人無法預料的是，伺服器返回 什麼是伺服器的事情，無法給一個標準的例子來覆蓋闡述所有的可能性。。

 

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

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： 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