ITPub博客

首页 > Linux操作系统 > Linux操作系统 > Ajax+ashx vs Ajax+WebService

Ajax+ashx vs Ajax+WebService

原创 Linux操作系统 作者:iDotNetSpace 时间:2009-03-04 15:57:25 0 删除 编辑

引言:使用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/,如需转载,请注明出处,否则将追究法律责任。

下一篇: C# EventLog 类
请登录后发表评论 登录
全部评论

注册时间:2008-01-04

  • 博文量
    2376
  • 访问量
    5307948