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将使一个AJAX调用的URL /panel，并就成功的警报语句？但是如果我将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' 
     } 
    }); 
});