Ajax+ashx vs Ajax+WebService

引言：使用Ext的TreePanel對論壇版塊進行管理。

一、使用TreePanel+TreeLoader+ashx
最初直接使用TreePanel自帶的TreeLoader指定url：GetForums.ashx(使用JavaScriptSerializer對List進行序列化輸出json資料)

Code
var forumTree = new Ext.tree.TreePanel({
    el: 'forumTree',
    useArrows: true,
    enableDD: true,
    width: 200,
    height: 300,
    loader: new Ext.tree.TreeLoader({
        dataUrl: "GetForums.ashx"
    }),
    rootVisible: false,
    root: new Ext.tree.AsyncTreeNode({}),
    listeners: {
        'beforeload': beforeloadHandler,
        'load': loadHandler,
        'beforenodedrop': beforenodedropHandler,
        'contextmenu': contextmenuHandler
    }
 });

forumTree.render();
forumTree.expandAll(); // 展開所有結點

二、使用TreePanel+Ajax+ashx
但是上面的方法在IE下無法正常載入，改變方法採用呼叫Ajax指定url：GetForums.ashx，將取到的資料新增到root結點下。

Code
function appendChildNodesFromServerData(node) { // append child nodes from server data
　　Ext.Ajax.request({
　　　　url: 'GetForums.ashx',
　　　　success: function(request) {
　　　　　　var data = Ext.util.JSON.decode(request.responseText);
　　　　　　node.appendChild(data); // append child nodes
　　　　　　node.expandChildNodes(true); // expand node
　　　　},
　　　　failure: function() {                                           
　　　　　　Ext.MessageBox.show({
　　　　　　　　title: '版塊管理',
　　　　　　　　msg: '對不起,載入資料出現異常,請重試!',
　　　　　　　　buttons: Ext.MessageBox.OK,
　　　　　　　　icon: Ext.MessageBox.ERROR
　　　　　　});
　　　　}
　　});       
}
           
var forumTree = new Ext.tree.TreePanel( { // forum tree
　　el: 'forumtree',
　　useArrows: true,
　　enableDD: true,
　　width: 200,
　　height: 300,
　　rootVisible: false,
　　root: new Ext.tree.AsyncTreeNode({}),
　　listeners: {
　　　　'beforenodedrop': beforenodedropHandler,
　　　　'contextmenu': contextmenuHandler
　　}
});
       
forumTree.render();
appendChildNodesFromServerData(forumTree.root); // load data   

三、使用TreePanel+Ajax+WebService
由於版塊管理的操作較多，有刪除功能對應DeleteForum.ashx，拖動功能對應MoveForum.ashx等等。這樣ashx檔案會越來越多，怎樣才能更好的管理呢？
使用WebService，非常方便，而且連序列化成json的工作都省略了。

主要注意的就是ajax中指定了method為post和headers的Content-Type為application/json

Code
function appendChildNodesFromServerData(node) { // append child nodes from server data
　　Ext.Ajax.request({
　　　　method: "post",
　　　　headers: {'Content-Type': 'application/json'},
　　　　url: 'ForumService.asmx/GetForums',
　　　　success: function(request) {
　　　　　　var data = Ext.util.JSON.decode(request.responseText);
　　　　　　node.appendChild(data); // append child nodes
　　　　　　node.expandChildNodes(true); // expand node
　　　　},
　　　　failure: function() {                  
　　　　　　Ext.MessageBox.show({
　　　　　　　　title: '版塊管理',
　　　　　　　　msg: '對不起,載入資料出現異常,請重試!',
　　　　　　　　buttons: Ext.MessageBox.OK,
　　　　　　　　icon: Ext.MessageBox.ERROR
　　　　　　});
　　　　}
　　});       
}
           
var forumTree = new Ext.tree.TreePanel( { // forum tree
　　el: 'forumtree',
　　useArrows: true,
　　enableDD: true,
　　width: 200,
　　height: 300,
　　rootVisible: false,
　　root: new Ext.tree.AsyncTreeNode({}),
　　listeners: {
　　　　'beforenodedrop': beforenodedropHandler,
　　　　'contextmenu': contextmenuHandler
　　}
});
       
forumTree.render();
appendChildNodesFromServerData(forumTree.root); // load data     

Web Service需要注意的地方有
[ScriptService]一定要，這樣script才能呼叫web service
在WebMethod上加上[ScriptMethod(ResponseFormat=ResponseFormat.Json)]

Code
///

/// Summary description for ForumService
///

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[ScriptService]
public class ForumService : System.Web.Services.WebService
{
　　[WebMethod]
　　[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
　　public List GetForums()
　　{
　　　　return list;
　　}
}
這樣客戶端呼叫就可以得到json
不過得到的資料如下：

 

{"d":[{"__type":"Relax.Web.Admin.Forums.TreeNode","id":59,"text":"web development","leaf":false,"children":[{"__type":"Relax.Web.Admin.Forums.TreeNode","id":60,"text":"asp.net","leaf":false,"children":[]},{"__type":"Relax.Web.Admin.Forums.TreeNode","id":61,"text":"php","leaf":false,"children":[]}]},{"__type":"Relax.Web.Admin.Forums.TreeNode","id":62,"text":"web development","leaf":false,"children":[{"__type":"Relax.Web.Admin.Forums.TreeNode","id":63,"text":"asp.net","leaf":false,"children":[]},{"__type":"Relax.Web.Admin.Forums.TreeNode","id":64,"text":"php","leaf":false,"children":[]}]}]}
剛開始嚇到了，不是我輸出的啊？仔細看下，就是{"d" : []}而已，所以只需要將上面的data修改成data.d就可以了。
還有多了個"_type" : "xxx"，不過這個沒有關係，沒有衝突。

補充說明：
當呼叫WebService需要傳入引數的時候如：

Code
[WebMethod]
public void MoveForumPosition(int sourceID, int targetID, string type)
{}
那客戶端的ajax的呼叫指定jsonData就可以了，jsonData中的引數對應Web Service上的引數。

Code
Ext.Ajax.request({
　　method: "post",
　　url: 'ForumService.asmx/MoveForumPosition',
　　jsonData: {sourceID: 1, targetID: 2, type: "above"},
　　success: function(request) {
　　　　var root = forumTree.root;
　　　　removeChildNodes(root); // remove root is all child nodes
　　　　appendChildNodesFromServerData(root); // load data
　　},
　　failure: function() {
　　　　Ext.MessageBox.show({
　　　　　　title: '版塊管理',
　　　　　　msg: '對不起,操作執行失敗,請重試!',
　　　　　　buttons: Ext.MessageBox.OK,
　　　　　　icon: Ext.MessageBox.ERROR
　　　　});
　　}
});
大家可以看到上面多了行removeChildNodes(root)；由於小菜使用ajax取得資料之後是直接appendChild到root結點下，所以得先清空下重新獲取。
由於TreeNode沒有removeChildNodes方法，所以只能自己寫一個如下：

只是使用下遞迴，排除root結點。

Code
function removeChildNodes(node) { // remove all child nodes
　　while(node.firstChild) {
　　　　removeChildNodes(node.firstChild);
　　}
 
　　if(node.getDepth() != "0") { // isn't root node
　　　　node.remove();
　　}
}   

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-561383/，如需轉載，請註明出處，否則將追究法律責任。