04.01 异步加载基础 -- 关于异步加载和数据提交

简介

使用树结构，肯定会有很多同学直接提问：“我的页面如何异步加载节点数据呢？” 这一章将主要针对 zTree 的异步加载进行讲解。

看这篇文档时，你需要对照 API 文档进行学习（http://www.treejs.cn/v3/api.php）

什么是异步加载

使用 zTree 的不少朋友，不仅仅是 zTree 的初学者，更是 前端开发的初学者，对于这部分朋友，请你先去把以下基础内容学习一下：

• AJAX 教程
• jQuery 官网的 ajax 文档
• jQuery ajax 中文参考手册

zTree 与 异步加载

对于异步加载节点数据这一功能， 你可以使用 zTree 的 Ajax，也可以完全不使用。

使用自己的 ajax 方法

1. 在代码中，根据自己的需求，使用 ajax 获取节点数据， 然后去 init 初始化 zTree 或 在 zTree init 后，使用 addNodes 方法去添加节点
2. 如果需要实现逐级加载， 那么可以利用 onExpand 回调捕获展开的事件，然后 自己使用 ajax 加载数据，加载后使用 addNodes 方法即可 这里几个非常重要的关键点一定要注意，否则肯定会出问题：
   • 某个父节点加载子节点时，一定要设置状态，避免其在加载过程中，用户反复折叠、展开操作，进行多次加载，导致子节点重复
   • 父节点加载子节点成功后， 再次展开时，就不要再反复进行异步加载，除非你先把子节点清除，然后重新加载

zTree 的 异步加载模式配置

参考Demo：http://www.treejs.cn/v3/demo.php#_108

配置

阅读以下代码时，请务必结合 API 的说明进行理解。

var setting = {
    async: {
        // 开启 zTree 的异步加载模式
        enable: true,
        // 设置 ajax 的 url
        // url 也可以设置为 function，可以针对不同的父节点从不同的接口获取子节点数据
        url:"../asyncData/getNodes.php",
        // 配置节点的属性参数，这些配置的参数将会当作 ajax 的参数传给后端
        autoParam:["id", "name=n", "level=lv"],
        // 配置url 的其他参数，这些参数也会直接当作 ajax 的参数传给后端
        // 如果需要动态修改 otherParam，请利用 beforeAsync 回调 去修改 zTreeObj.setting.async.otherParam 内容
        otherParam:{"otherParam":"zTreeAsyncTest"},
        // contentType 和 dataType 和 type 都是与 ajax 传输 & 接受的数据类型相关
        contentType: 'application/json',
        dataType: 'text',
        type: 'post',
        // dataFilrer 是专门用于在浏览器端获取数据后，将数据传给 zTree 前进行处理的过程。
        // 尤其是当你的服务端无法直接生成 zTree 节点格式的数据时，这个方法尤为重要
        dataFilter:null
    }
};

• async.url 具体使用请参考 4.03 如何动态更换加载数据的 url
• async.contentType & dataType & type 具体使用请参考 4.04 如何处理 Ajax 参数提交
• async.dataFilter 具体使用请参考 4.05 如何预处理节点数据

后台数据接口

后台为 ajax 提供的接口，需要满足的要求就是：

1. 正确接受 ajax 请求的参数，以便于根据不同的父节点生成不同的子节点数据
2. 正确生成 js 可以阅读的 JSON 格式字符串 如果你是逐级生成节点数据，一定要给父节点设置属性 isParent = true，否则 zTree 不会把它当作父节点来处理的

//例如：
[
{ "id":"01", "name":"n1", "isParent":true},
{ "id":"02", "name":"n2", "isParent":false},
{ "id":"03", "name":"n3", "isParent":true},
{ "id":"04", "name":"n4", "isParent":false}
]

异步加载的相关回调

参考Demo：http://www.treejs.cn/v3/demo.php#_109

1. setting.callback.beforeAsync 这是一个在出发 Ajax 之前被触发的回调，主要用于让程序在触发 Ajax 之前处理一些事情，例如修改 otherParam 参数、根据节点控制是否允许异步加载等
2. setting.callback.onAsyncSuccess 当 Ajax 请求完毕，成功获取数据，并且添加到 zTree 后，会触发此回调。如果你需要在异步加载后做一系列操作，一定要记住此回调
3. setting.callback.onAsyncError 当 Ajax 请求完毕，Ajax 请求出现错误时，触发此回调，正常情况下此回调基本无意义，但是对于异常处理非常关键！千万不要忽略它的重要性

异步加载的禁忌

1. AJAX 的同步加载

使用异步加载，本身就是为了提升效率，但有的朋友因为搞不清楚异步加载的工作流，从而产生许多程序错误。然后为了解决问题，就直接把异步加载设置为同步模式，这样最严重的问题就是会在加载时导致 js 代码阻塞，并且页面也是完全无法操作。这样做违背了 AJAX 的初衷！！ 想具体了解异步加载流程的，请参考 4.02 zTree 的异步加载流程

2. 异步加载变成了无限循环

务必正常设置 异步加载的参数， 并且保证 服务端正常获取对应的参数，切莫每次请求都获取同样的数据！ 否则每次都生成同样的一批数据，这只会让你的树无限的加载下去，每次加载的都是相同的节点，展开后又是相同的节点。。。于是你就崩溃了

3. 异步加载 & 全部展开

异步加载模式，一般有两种用法：

1. 初次加载节点时采用异步加载，但直接加载全部节点数据

   这种情况一般用于不在页面上生成数据，并且节点数据量不大，数据关系简单的情况

2. 每次异步加载时，只加载当前这一级的节点数据

   这种一般用于有较规范的数据格式，并且数据量较大的情况，所以既然你的数据量很大，也使用了异步加载来实现，就不要再同时使用全部展开功能了！！这也是严重违背了 AJAX 的初衷，你只会让你的程序越来越慢！

   不过，仍然是有一些极端需求的，所以一定要实现这种需求的，请参考Demo：http://www.treejs.cn/v3/demo.php#_512

   另外，如果你有更深的需求，可以参考 4.07 如何自动加载多级节点 和 4.08 如何自动加载某路径的节点