首頁 > 開發者 > ASP

Extjs和Asp.NET背景資料互動1

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

Ext.data.Connection應該說提供了最為簡潔的與背景非同步呼叫功能

執行個體如下

首先是aspx頁面內容（省略了head和對js檔案引用的部分）

view plaincopy to clipboardprint?
<body> 
    <div id="form1"></div>                 
</body> 
<body>
    <div id="form1"></div>              
</body>

關於Extjs的內容寫在jsdataConnection.js檔案中

內容如下：

view plaincopy to clipboardprint?
Ext.onReady(function() {  
 
    var form1 = new Ext.form.FormPanel({  
        width: 350,  
        frame: true,  
        renderTo: "form1",  
        labelWidth: 80,  
        title: "form1",  
        bodyStyle: "padding:5px 5px 0",  
        defaults: { width: 150, xtype: "textfield" },  
        items: [  
        {  
            fieldLabel: "ID",  
            id: "ID",  
            anchor: "90%" 
        },  
        {  
            fieldLabel: "name",  
            id: "name",  
            anchor: "90%" 
        }  
        ],  
        buttons: [  
            { text: "確定", handler: function() { doUpdate(); } }  
        ]  
 
    });  
 
    //建立串連  
    var conn = new Ext.data.Connection({  
        autoAbort: false,  
        defaultHeaders: {  
            referer: 'http://localhost:1068' 
            //此處defaultHeaders可以不設定  
        },  
        disableCaching: false,  
        extraParams: {  
            params: 'Update' 
        },  
 
        method: 'post',  
        timeout: 300,  
        url: 'Handler.ashx'//此處如不指定，則預設訪問當前頁面  
    });  
    /* 
    其中 
    ①autoAbort：該request是否會自動斷開（預設值false）。  
    ②disableCaching：設定為true就會添加一個獨一無二的cache-buster參數來擷取請求（預設值為true）。  
    ③extraParams：這些屬性在該Connection發起的每次請求中作為外部參數使用 
    ④timeout：串連的逾時時間  
    ⑤method：請求時使用的預設的http方法。【post】【get】  
    ⑥url:請求的網頁地址，關於url最好使用ashx分頁檔， 
    如果用aspx的話要把所有的頁面元素都清除乾淨，否則前台接收到的內容會有問題。 
    */ 
 
    function doUpdate() {  
        //在建立了conn之後，可以調用request()函數發送請求，處理返回的結果，如下面的代碼所示。  
        conn.request({  
            success: function(response) {  
                Ext.Msg.alert('info', response.responseText);  
                //response.responseText為返回的資訊  
            },  
            failure: function() {  
                Ext.Msg.alert('warn', 'failure');  
            }  
        });  
    }  
 
    //success：成功後執行的方法（參數返回response）  
    //failure：失敗時執行的方法  
 
}); 
Ext.onReady(function() {

    var form1 = new Ext.form.FormPanel({
        width: 350,
        frame: true,
        renderTo: "form1",
        labelWidth: 80,
        title: "form1",
        bodyStyle: "padding:5px 5px 0",
        defaults: { width: 150, xtype: "textfield" },
        items: [
        {
            fieldLabel: "ID",
            id: "ID",
            anchor: "90%"
        },
        {
            fieldLabel: "name",
            id: "name",
            anchor: "90%"
        }
        ],
        buttons: [
            { text: "確定", handler: function() { doUpdate(); } }
        ]

    });

    //建立串連
    var conn = new Ext.data.Connection({
        autoAbort: false,
        defaultHeaders: {
            referer: 'http://localhost:1068'
            //此處defaultHeaders可以不設定
        },
        disableCaching: false,
        extraParams: {
            params: 'Update'
        },

        method: 'post',
        timeout: 300,
        url: 'Handler.ashx'//此處如不指定，則預設訪問當前頁面
    });
    /*
    其中
    ①autoAbort：該request是否會自動斷開（預設值false）。
    ②disableCaching：設定為true就會添加一個獨一無二的cache-buster參數來擷取請求（預設值為true）。
    ③extraParams：這些屬性在該Connection發起的每次請求中作為外部參數使用
    ④timeout：串連的逾時時間
    ⑤method：請求時使用的預設的http方法。【post】【get】
    ⑥url:請求的網頁地址，關於url最好使用ashx分頁檔，
    如果用aspx的話要把所有的頁面元素都清除乾淨，否則前台接收到的內容會有問題。
    */

    function doUpdate() {
        //在建立了conn之後，可以調用request()函數發送請求，處理返回的結果，如下面的代碼所示。
        conn.request({
            success: function(response) {
                Ext.Msg.alert('info', response.responseText);
                //response.responseText為返回的資訊
            },
            failure: function() {
                Ext.Msg.alert('warn', 'failure');
            }
        });
    }

    //success：成功後執行的方法（參數返回response）
    //failure：失敗時執行的方法

});
 

其中Handler.ashx的內容如下

（建立ashx檔案，我對內容沒有做任何改動，除了加上一句注釋之外）

view plaincopy to clipboardprint?
<%@ WebHandler Language="C#" Class="Handler" %>  
 
using System;  
using System.Web;  
 
public class Handler : IHttpHandler {  
      
    public void ProcessRequest (HttpContext context) {  
        context.Response.ContentType = "text/plain";  
          
        //返回字串Hello World          
        context.Response.Write("Hello World");          
    }  
   
    public bool IsReusable {  
        get {  
            return false;  
        }  
    }  
 
} 

本文來自CSDN部落格，轉載請標明出處：http://blog.csdn.net/gishero/archive/2010/01/05/5133922.aspx

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