Mobilebone.js使用教程-请求

请求

介绍下 Mobilebone 的请求处理逻辑。

方法

在 Mobilebone 中，触发页面的请求与加载有两种方式：

基于 <a> 元素或者 <form> 元素；
调用 Mobilebone.ajax() 方法。

其中，Mobilebone.ajax() 方法通过传递 Object 类型参数触发请求的执行，示意：

Mobilebone.ajax({
    url: "",
    type: "",
    dataType: "",
    data: {},
    timeout: 10000,
    success: function() {},
    error: function() {},
    complete: function() {}
})

参数的命名均源自 jQuery 的 $.ajax() 方法。

如果是通过点击 <a> 元素触发请求的执行，则所有的参数需要使用 HTML 属性进行传递。

其中的 data 参数本身就是个 Object 纯对象，因此，这个参数的传递稍微特别了一点，通常使用下面两种方法：

支持通过 href 原地址进行简单的请求参数传递，例如：
```
<a href="detail.html?id=1&type=0">加载</a>
```

通过 data-formdata 进行请求参数设置，例如：

<a href="detail.html" data-formdata="id=1&type=0">加载</a>

而其他的参数，则可以通过下面两种方法进行设置：

分别设置，包括：data-url、data-datatype、data-success等，详见对应的 API 文档：data-ajaxKeys.html

批量设置，使用 data-params 属性进行参数设置，例如：

<a href="ajax.html" data-params="datatype=json&amp;success=succ_callback>点击我</a>

参数

各个参数函数和对应的 HTML 属性如下：

url: 请求地址。对应 <a> 元素的 href属性或者 <form> 元素的 action 属性，如果这些属性值都缺失，则尝试使用 data-url 的属性值作为请求地址，如果还是缺失，则尝试从 data-params 属性中匹配 url 字段值。
type: 请求的类型。默认是 'get'。可以使用 <form> 元素的 method 属性进行设置。如果缺失，则尝试使用 data-type 属性。如果还是缺失，则尝试从 data-params 属性中匹配 type 字段值。
dataType: 请求数据类型。默认类型是文本类型，支持 'json' 数据类型，Mobilebone 会对返回的数据进行 JSON 解析并处理。可以通过 data-datatype 或匹配 data-params 属性值获取。
data: 请求参数。默认为空。可以设置在 url 参数中，也可以使用 data-formdata 或匹配 data-params 属性值获取。
timeout: 超时时间。可以使用 data-timeout 或匹配 data-params 属性值获取。
success: 请求成功回调方法。可以使用 data-success 或匹配 data-params 属性值获取。
error: 请求失败回调方法。可以使用 data-error 或匹配 data-params 属性值获取。
complete: 请求完成回调方法。可以使用 data-complete 或匹配 data-params 属性值获取。

其中几个回调方法需要专门说下。

首先，各个回调方法使用和生命周期事件函数同样的装载器，默认是 window 对象，当通过 Mobilebone.rootTransition 改变函数的装载器的时候，这里的请求方法的装载器也会同步变化。

如果不希望这种变化发生，则可以使用 data-root 指定几个函数的调用上级，例如：

<a href="ajax.html" data-params="datatype=json&amp;success=succ_callback data-root="myVue">点击我</a>

则请求成功后就会执行 myVue.succ_callback() 这个方法。

然后，讲下各个回调方法的语法：

success(response, status);
error(xhr, status);
complete(xhr, status);

其中 response 指返回的数据，xhr 指 XMLHttpRequest 请求对象，status 是请求返回的原始状态码。

JSON处理

如果请求的数据类型是 'json'，则请求成功后，Mobilebone 会调用名为 Mobilebone.jsonHandle() 的方法，如果有安装有 Mobilebone 官方的模板渲染插件，则会自动执行 JSON 数据的渲染，否则，需要开发者自己设置 Mobilebone.jsonHandle 的处理逻辑：

Mobilebone.jsonHandle = function (json) {
    // 根据 json 数据渲染页面
    // 可以使用 Mobilebone.createPage() 方法创建页面
};

上面提到的 Mobilebone.createPage() 方法是 Mobilebone 底层的创建页面方法，详见对应的 API 文档：Mobilebone.createPage.html。

发现错误？想参与编辑？在 GitHub 上编辑此页！