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将对url /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'
       }
    });
});