XUI Ajax示例

Question

我不明白如何使用XUI xhr（ajax）调用。请考虑以下代码：

x$('#left-panel').xhr('/panel', {
    async: true,
    callback: function() {
        alert("The response is " + this.responseText);
    },
   headers:{
       'Mobile':'true'
   }
});

这是否意味着当用户在左侧面板上操作时，xui会对网址/panel进行ajax调用，并在成功时发出警告声明？但是如果我将ajax调用改为执行ONBLUR呢？

Answer 1

xui.js api docs表示xhr请求...

  总是在元素集合上调用

...并使用html的行为。

因此，在您对/panel的GET请求中，响应文本将显示在警告窗口中，因为这是您的回调所要执行的操作。但是，如果没有回调，它会将响应加载到#left-panel元素中，就像您使用过：

x$('#left-panel').xhr('/panel', {
   async: true,
   callback: function() {
       x$('#left-panel').html(this.responseText);
   },
   headers:{
       'Mobile':'true'
   }
});

也就是说，上面的代码应该产生与以下相同的效果：

x$('#left-panel').xhr('/panel', {
   async: true,
   headers:{
       'Mobile':'true'
   }
});

此外，调用xhr请求与目标元素事件无关。也就是说，它不一定由悬停（或模糊）触发。假设您希望绑定到#left-panel元素的单击。然后你需要这样的东西：

x$('#left-panel').on('click', function(e){
    this.xhr('/panel', {
       async: true,
       callback: function() {
           alert("The response is " + this.responseText);
       },
       headers:{
           'Mobile':'true'
       }
    });
});