Ruby迷

• 跨域方法1：使用jquery

<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "cat",
    tagmode: "any",
    format: "json"
  },
  function(data) {
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#images");
      if ( i == 3 ) return false;
    });
  });
</script>

• 跨域方法2：

<script>
function jsonpCallback(result)
{
	alert(result);
}
</script>
<script type="text/javascript" src="http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=jsonpCallback"></script>

————–如果你有时间可以看下面的原理—————-

• 跨域原理：

Ajax是现在web开发会经常应用的技术，为我们的系统提供了更好应用体验，而一般我们只是在系统内部相互调用，如果跨域的调用可能就要受到同源策略的限制，无法完成请求。
同源策略是指阻止代码获得或者更改从另一个域名下获得的文件或者信息。也就是说我们的请求地址必须和当前网站的地指相同。同源策略通过隔离来实现对资源的保护。
你可以测试一下，ajax直接进行post或get跨域调用，方法会自动变为OPTIONS。
同源策略有个例外就是<script src=”">的调用，你可以在src中指定任何服务器地址来进行调用。
如果<script src=”">返回的是一段js代码时，那么它会自动执行，这就是跨域调用的思路。

• JSONP原理:

JSONP是json with padding，它是对<script src=”">做了一些封装。具体为请求时带一个jsoncallback参数，并在本地书写同名方法。
如跨域调用<script src=”http://domain2.do?jsoncallback=jsonCallBack”/>
则http://domain2.do返回时格式一定要是

jsonCallBack([{"name":"jim", "age":12}, {"name":"tom", "age":18}])

然后在本地写同名方法

function jsonCallBack(data){
	alert(data);
}

JSONP与一般跨域不同在限制了这里要使用JSON格式传输。

Jquery也是用了这个原理，下面是源码：

getJSON: function( url, data, callback ) {
	return jQuery.get(url, data, callback, "json");
}

//...

get: function( url, data, callback, type ) {
	// shift arguments if data argument was omited
	if ( jQuery.isFunction( data ) ) {
	type = type || callback;
	callback = data;
	data = null;
}

return jQuery.ajax({
	type: "GET",
	url: url,
	data: data,
	success: callback,
	dataType: type
});

//下面是jQuery.ajax

if ( s.dataType === "json" && (s.data && jsre.test(s.data) || jsre.test(s.url)) ) {
jsonp = s.jsonpCallback || ("jsonp" + jsc++);
// Replace the =? sequence both in the query string and the data
if ( s.data ) {
	s.data = (s.data + "").replace(jsre, "=" + jsonp + "$1");
}
s.url = s.url.replace(jsre, "=" + jsonp + "$1");
// 设置结果为script
s.dataType = "script";

//此处省略代码80行
//在head中插入<script>片段，这行最关键
head.insertBefore(script, head.firstChild);

可以看到jQuery并没有用其它新奇的技术，只不是对<script src=”"/>做了个封装。
其实不仅仅是jQuery,很多js框架都是用了同样的跨域方案。