涉及后台的东西，我也不敢保证对错，总之写出来如果有错望各位高人不吝赐教吧。跨域的需要大多数出于web2.0的mashup，如果我的网站想搞一个地图，但自己实现没有钱没有技术显然难度太大，这样可以利用google map，又如想加入天气预报，这样也可以调用yahoo网站提供的相关服务。这些服务常常是一些HTTP GET形式的API。那么我们就发起一个get请求就是，往往可以得到一段文本或xml，然后我们就可以搞鼓了……本文提到的jsonp，或许说动态JS标签更合适些，与上面提到的情形有些不同。上面的google，yahoo都不属性于你的东西，你只要传入URI外加几个参数，它就会返回一堆东西，然后你再用它们提供的代码加工一下。如本博客引用feedsky的服务，就是这种情况。由于这情况太简单，不在本文讨论范围内。我所说的情况是有两个网站，它们都是我们开发的。我们从一个网站发送请求，另一个网站接收请来，返回数据，交由原网站处理。发送的请求当然是get请求，就是普通动态加载JS文件，不过这JS文件是另一个网站生成的。看一下面代码：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo by 司徒正美</title>
<script type="text/javascript">
//在原页设置函数体
function say(words) {
alert(words);
}
</script>
</head>
<body>
<!--在远程js文件上调用本地函数//-->
<script src="http://yabooo.org/remote.js" type="text/javascript"></script>
</body>
</html>
JS文件很简单：
say("司徒正美！")
弹出司徒正美
一般认为这就是JSONP的原型，用一个以js文件作结尾的URL请求另一个域的服务器，然后让它把所需要的东西全部搞成一个JSON对象，作为本地函数的参数传入执行。下面的例子需要rails支持，有兴趣的可以看看。
设置控制器：
class FooController < ApplicationController
def bar
respond_to do |format|
format.html
format.js do
render :update do |page|
page << %{
say("司徒正美!")
}
end
end
end
end
end
设置layout:
#D:\demo\views\layouts
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo</title>
</head>
<body>
<h1>layout</h1>
<%= yield %>
</body>
</html>
设置视图：
#D:\polyline\app\views\foo\bar.html.erb
<script type="text/javascript">
//在原页设置函数体
function say(words) {
alert(words);
}
</script>
<!--在远程js文件上调用本地函数//-->
<%= javascript_include_tag "/foo/bar.js" %>
设置路由规则:
map.resources :foo, :collection => { :bar => :get}
然后打开http://localhost:3000/foo/bar.html，就会看到alert了，证明调用成功。
下面是一个增强版，由于可怜的我没有网站与域名，姑且用另一个action冒充第二个网站吧，反正我们都知道JS文件是不受域名限制的，很完美地绕过所谓的同源策略。
class FooController < ApplicationController
def bar
end
def laaa
respond_to do |format|
format.html
format.js do
render :update do |page|
page << %{
say(" laaa")
}
end
end
end
end
end
map.resources :foo, :collection => { :bar => :get,:laaa => :get}
<script type="text/javascript">
//在原页设置函数体
function say(words) {
alert(words);
}
var url = "http://localhost:3000/foo/laaa.js"; // URL of the external script
// this shows dynamic script insertion
var script = document.createElement('script');
script.setAttribute('src', url+"?"+(+new Date));
script.setAttribute("charset", "utf-8");
// load the script
document.getElementsByTagName('head')[0].appendChild(script);
</script>
再修改一下，这次传入json做参数。rails在这方面做得很好，可以直接把从数据库取得的记录用to_json转换成JSON，不过我现在不需要这么复杂。
class FooController < ApplicationController
def bar
end
def laaa
respond_to do |format|
format.html
format.js do
if params[:jsonp].present?
callback = params[:jsonp]
render :update do |page|
page << %{
#{callback}({"a":"司徒正美","b":"RestlessDream"})
}
end
end
end
end
end
end
<script type="text/javascript">
//在原页设置函数体
function say(json) {
alert(json.a+" : "+json.b);
}
function jsonp(url,callback){
if (url.indexOf("?") > -1)
url += "&jsonp="+callback
else
url += "?jsonp="+callback
url += "&nocache=" +(+new Date()); // prevent caching
var script = document.createElement("script");
script.setAttribute("src",url);
script.setAttribute("type","text/javascript");
script.setAttribute("charset", "utf-8");
document.getElementsByTagName('head')[0].appendChild(script);
}
jsonp("http://localhost:3000/foo/laaa.js","say")
</script>
这次会弹出司徒正美 ： RestlessDream，当然现实的需要会很复杂，会对传回来的JSON进行深加工，很少会像这样对号入座。不过处理JSON总比处理XML好。有时可能加载N多JSON，那么后台就要设置更多的分支，前台动态生成的script标签也随之增加，那么我们加载完这些标签后，可以立即删除，这是没有问题的。
好了，这样就完了，更复杂更完善的东西结合Ajax再说吧。