当 AJAX 框架向服务器发出请求时，显示加载指示器是个好主意，因为页面可能不会立即更新。有几种方法和标准加载指示器，用于明确 AJAX 请求何时被触发以及何时正在进行。
AJAX框架的一个显著特性是一个进度条，当AJAX请求运行时，它会显示在页面顶部。该进度条监听AJAX请求，并在请求耗时超过300毫秒时出现，请求完成后再次隐藏。
要禁用请求的进度条，将 data-request-progress-bar 属性设置为 false。
<button
data-request="onDoSomething"
data-request-progress-bar="false">
Do something
</button>在 JavaScript 中，将 AJAX 请求的 progressBar 选项设置为 false.
oc.ajax('onSilentRequest', { progressBar: false });若要全局禁用进度条，请使用 StyleSheet 将 visibility 样式设置为 hidden。
.oc-progress-bar {
visibility: hidden;
}您可以使用 JavaScript 使用 oc.progressBar 对象和 show / hide 函数显示进度条.
oc.progressBar.show();
oc.progressBar.hide();提交表单时，用户可能会意外地点击按钮两次，导致重复提交，这可以通过使用加载按钮来解决。在AJAX请求期间，带有 data-attach-loading 属性的按钮元素将被禁用，并添加一个CSS类 oc-attach-loader。此类别将使用 :after CSS选择器在按钮和锚点元素上生成一个加载微调器。
<a href="#"
data-request="onDoSomething"
data-attach-loading>
Do Something
</a>当一个按钮存在于一个包含 oc-attach-loader 属性的表单内部时 该按钮将显示加载指示器。
<form data-request="onSubmit">
<button data-attach-loading>
Submit
</button>
</form>由于输入框不支持 :after CSS 选择器，因此它们会改为在其后插入一个新的元素。一旦 AJAX 请求完成，该元素就会被移除。这在处理 data-track-input 属性时很有用，该属性会监视输入框的变化并提交 AJAX 请求。
<input name="username"
data-request="onCheckUsername"
data-track-input
data-attach-loading />您可以手动将加载器添加到按钮 使用 oc.attachLoader 对象 和 show / hide 函数 将元素选择器或对象作为第一个参数传递.
oc.attachLoader.show('.my-element');
oc.attachLoader.hide('.my-element');您可以使用 data-request-loading 属性，使元素在AJAX请求期间可见。该值是一个CSS选择器，它使用 display block 和 none 属性来管理元素的可见性。
<button
data-request="onPay"
data-request-loading=".is-loading">
Pay Now
</button>
<div style="display:none" class="is-loading">
Processing Payment...
</div>您可以通过检查 HTML 元素上的 data-ajax-progress 属性来检测全局 AJAX 请求是否正在进行中。在样式表中表示如下。
html[data-ajax-progress] {
/* Display loading indicators */
}该属性也添加到表单元素。
form[data-ajax-progress] {
/* The form is loading */
}在某些情况下，您可能希望为一个特定的 AJAX 处理程序事件 显示一个加载指示器， 该 data-ajax-progress 属性将包含最新的处理程序名称， 并且这可以用于定位特定的请求。
<form>
<button data-request="onPay">Pay Now</button>
<button data-request="onCancel">Cancel</button>
<div class="is-payment-loading">
Processing Payment...
</div>
</form>这可以通过使用样式表属性值选择器进行定位。
.is-payment-loading {
display: none;
}
form[data-ajax-progress=onPay] .is-payment-loading {
display: block;
}对于更复杂的场景，您可以使用 ajax:promise 和 ajax:always 事件接入到 AJAX JavaScript API。这些事件可以附加到文档、表单或目标元素上。
formElement.addEventListener('ajax:promise', function() {
// A new request has started
});
formElement.addEventListener('ajax:always', function() {
// A request has ended
});以下示例将在请求运行时禁用表单中的所有输入。
addEventListener('ajax:promise', function(event) {
event.target.closest('form').querySelectorAll('input').forEach(function(el) {
el.disabled = true;
});
});
addEventListener('ajax:always', function() {
event.target.closest('form').querySelectorAll('input').forEach(function(el) {
el.disabled = false;
});
});