ExtJs學習筆記(23)-ScriptTagProxy+XTemplate+WCF跨域取資料

ajax應用中跨域一直是一個非常麻煩的問題，目前也有一些解決辦法，但要麼比較麻煩，要麼就不具備通用性，幸好ExtJs裡的ScriptTagProxy提供了跨域讀取資料的功能，而且在幾大浏覽器上都可以正常運作，但在使用過程中要注意幾點:

1.服務端傳回時，必須按以下格式傳回:

stcCallback1001({...})

其中stcCallback1001中的1001是自動生成的，如果是分頁送出的話，每再請求一次1001會變成1002,1003...類推

2.ExtJs官方的示例中雖然ScriptTagProxy的例子并不少，但是就是沒有XTemplate+ScriptTagProxy跨域讀取的單一功能示例，下面給一個XTemplate跨域讀取資料的示例

a.服務端WCF的處理

b.ExtJs的前端處理

這裡要注意的是:

嘗試了多次，發現XTemplate不支援多層節點的綁定，即服務端傳回的值類似：

stcCallback1001({"RecordCount":6,"PageSize":2,"PageCount":3,"CurrentPageIndex":2,"Data":[{"F_ID":3,"F_IP":"192.168.0.2","F_Date":new Date(1221399073843),"F_Content":"這是第三條留言","F_Reply":""},{"F_ID":4,"F_IP":"172.168.235.1","F_Date":new Date(1221399073843),"F_Content":"這是第四條留言","F_Reply":""}]})

在回調函數裡經過Ext.util.JSON.encode(data)處理後，變成了

{"success":true,"records":[{"id":1001,"data":{"F_ID":3,"F_IP":"192.168.0.2","F_Date":"2008-09-14T21:28:28","F_Content":"這是第三條留言"},"json":

{"F_ID":3,"F_IP":"192.168.0.2","F_Date":"2008-09-14T21:28:28","F_Content":"這是第三條留言","F_Reply":""}},{"id":1002,"data":{"F_ID":4,"F_IP":"172.168.235.1","F_Date":"2008

-09-14T21:28:28","F_Content":"這是第四條留言"},"json":{"F_ID":4,"F_IP":"172.168.235.1","F_Date":"2008-09-14T21:28:28","F_Content":"這是第四條留

言","F_Reply":""}}],"totalRecords":6}

雖然也是标準的JSON字元串，但是資料節點是多層次的，XTemplate無法直接讀取。是以隻能在用戶端用JS的正規表達式處理，手動重新組織成XTemplate所需的JSON對象，最終轉換成：

{data:[{"F_ID":3,"F_IP":"192.168.0.2","F_Date":"2008-09-14T21:29:55","F_Content":"這是第三條留言","F_Reply":""},{"F_ID":4,"F_IP":"172.168.235.1","F_Date":"2008-09-14T21:29:55","F_Content":"這是第四條留言","F_Reply":""}]}