Question

如何在Rails中基于Zepto使用Ajax

Answer 1

Rails中Jquery支持下的Ajax请求

在rails中使用 Ajax 是十分方便的，你可能早已经熟悉了这样的代码：
在views中声明属性 :remote => true ：
<%= form_for(@post, :remote => true) do |f| %>
<div class="field">
<%= f.label :title %><br />
<%= f.text_field :title %>
</div>
<div class="field">
<%= f.label :content %><br />
<%= f.text_field :content %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>

接着在对应 controller 里接收请求，做如下处理：
respond_to do |format|
format.html
format.js { render 'success' } # 这里表示你收到的是ajax请求,将结果给success.js.erb处理
end

最后就是在 success.erb.js 文件里做一些操作：
alert("ok")

Everything is so easy!
但是，你知道为什么可以使用 remote 属性来发送ajax请求吗？
在rails中assets目录下的 application.js 文件可以看到：
//= require jquery
//= require jquery_ujs

对，就是要归功于 jquery_ujs.js 这个文件，它会找出所有 remote 链接和表单并重写 click 事件来驱动它们发送AJAX请求到服务器。
亲，说到这儿，你能猜到我想要说什么了吗？对！如果我们想在rails里使用zepto来发送ajax请求，我们要做的就是模仿 jquery_ujs.js 所做的。
在Rails基于Zepto使用Ajax
卖了半天的关子，终于进入正题了。 首先我们得看下 zepto 框架对于js的ajax请求提供的方法调用，文档里大概是这样一种方式：
Ajax requests

$.ajax

$.ajax(options) ⇒ XMLHttpRequest

type (default: “GET”): HTTP request method (“GET”, “POST”, or other)
url (default: current URL): URL to which the request is made
data (default: none): data for the request; for GET requests it is appended to query string of the URL. Non-string objects will get serialized with
…

Ajax callbacks

beforeSend(xhr, settings)
success(data, status, xhr)
error(xhr, errorType, error)
complete(xhr, status)
…

Ajax events

…

在发送ajax请求时，我们可以指定ajax请求的类型，url等属性，在ajax请求过程中会有相应的回调函数以及ajax事件函数。这些就不多说了，现在我们要做的就是来模拟jquery_ujs.js所做的工作：
我们先新建一个 mock_ujs.js ,当文档加载完成后来监视Dom元素的行为:
$(document).ready(function() {
//...
}

添加一个 click 事件:
$(document).ready(function() {
$('.load').live('click', function() {
//可以在这里取页面上的一些数据
var text = $(".data").text();

$.ajax({
type: 'http请求如GET、POST',
url: '所请求的url',
// data为发送的数据，将以url?a=xx&b=xxx这种方式发送
data: { a: xxx, b: xxxx },
// 期望服务器返回的数据类型:
dataType: 'json',
timeout: 10000,
beforeSend: function(xhr, settings) {
//回调函数
},
success: function(data){
//data为返回数据
},
error: function(xhr, type){
//错误处理
}
});
});
}

现在请求已经到达服务器， controller 收到请求并进行相应处理：
def custom
data = Model.find(data)

# return the data as the format of json
respond_to do |format|
format.json {
render :inline => data.to_json
}
end
end

得到了返回的数据，在上面的success函数里进行相应的处理。
这里需要注意的一点是：controller里返回的数据必须与发送ajax请求时指定的dataType 同一类型，否则就无法响应了。
举个例子来说明一下：你可以上这个网站，这个是我专门为手机用户做的，前端采用了zepto框架。页面上的导航栏以及 加载更多 按钮都对应着一个个click事件，每次点击都会触发一个ajax请求，比如点击加载更多的时候，会到服务器请求5条新闻数据，其中发送ajax请求时还会触发一个回调函数，通过 beforeSend 实现等待时的加载效果。如果你想了解更多可以fork这个 仓库 。
另外，zepto的其它用法其实和jquery差不多，有需要的话可以好好研究一下。