我们知道不同域中的js代码受同源策略的限制，不同域中的AJAX同样受此限制，不过使用html中的script远程脚本可以跳过该限制，下面我们实际看一下利用RoR和js如何实现所谓的JSONP。

这里只是简单地演示一下功能，并没有严格的实现JSONP，如果是那样需要用一个函数包容JSON对象主体：

some_function([1,2,{a:1,b:11}])

而这里的包容函数名称也不需要定死，而是可以通过http参数告知web服务器，比如可以用以下url的方式：

http://some_address/some_service?arg0=xxx&arg1=xxx&json=some_function
//或者是
http://some_address/some_service?json=some_function

当然这只是一个约定，你可以用其他任意的方式告知服务器。

我们下面实现一个不严格的JSONP。首先用如下命令创建新的RoR网站:

rails new ws
rails g controller Service func0

在Service控制器的func0方法中增加如下代码：

def func0
    respond_to do |format|
      format.js
    end
end

然后在rails的app/views/service目录中添加func0.js.erb文件，内容如下：

alert("hello RoR!");
var add_elt = "<h1>hello RoR!!!";
document.write(add_elt);

注意因为我们在func0中返回的response不是一个html页面，所以正常的通过url访问func0会出错的：

//用以下url访问出错
http://127.0.0.1:3000/service/func0

下面我们建立一个本地html文件，内容如下：

<!DOCTYPE html>
<html>
<head>
    <title>test JSONP fundation</title>
    <script src="http://127.0.0.1:3000/service/func0?msg=hello" type="text/javascript"></script>
</head>
<body>

</body>
</html>

如果直接打开该页面会出错，因为你在服务器端没对此action关闭外联保护，在RoR中显示如下错误:

Started GET "/service/func0?msg=hello" for 127.0.0.1 at 2015-03-29 10:25:27 +0800
Processing by ServiceController#func0 as */*
  Parameters: {"msg"=>"hello"}
  Rendered service/func0.js.erb (0.4ms)
Security warning: an embedded <script> tag on another site requested protected JavaScript. If you know what you're doing, go ahead and disable forgery protection on this action to permit cross-origin JavaScript embedding.
Completed 422 Unprocessable Entity in 9ms

ActionController::InvalidCrossOriginRequest (Security warning: an embedded <script> tag on another site requested protected JavaScript. If you know what you're doing, go ahead and disable forgery protection on this action to permit cross-origin JavaScript embedding.):

我们只需要对func0 action关闭保护即可：

class ServiceController < ApplicationController
  protect_from_forgery except: :func0

  def func0
    respond_to do |format|
      format.js
    end
  end
end

注意config中的保护也是要关闭的：

config.action_controller.allow_forgery_protection = false

然后再次在浏览器中打开本地html文件，成功执行了web服务器中传回的js脚本，该脚本能做的事只受限于想象力而已。

javascript加RoR实现JSONP的更多相关文章

  1. 关于javascript跨域及JSONP的原理与应用

    同源策略,它是由Netscape提出的一个著名的安全策略,现在所有的可支持javascript的浏览器都会使用这个策略. 为什么需要同源策略,这里举个例子: 假 设现在没有同源策略,会发生什么事情呢? ...

  2. 原生JavaScript实现AJAX、JSONP

    相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...

  3. 原生javascript加载运行

    原生javascript加载运行 (function(){ //TODO sometings }()); 在要运行相应代码的位置加入script标签,创建函数并自执行; 关于window.onload ...

  4. javascript加载顺序

    javascript加载顺序 <script type="text/javascript" src="jquery.js"></script& ...

  5. JSBinding + SharpKit / JavaScript 加载流程

    首先,现在的方案是游戏启动就加载全部的 JavaScript 代码. 先看下 StreamingAssets/JavaScript/ 文件夹下的目录结构:

  6. Javascript加载速度慢解决办法

    通常我们的网站里面会加载一些js代码,统计啊,google广告啊,百度同盟啊,阿里妈妈广告代码啊,一堆,最后弄得页面加载速度很慢,很慢.解决办法:换一个js包含的方式,让javascript加载速度倍 ...

  7. 怎么样加快JavaScript加载和执行效率

    概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...

  8. jQuery(三) javascript跨域问题(JSONP解决)

    加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...

  9. javascript javascript加载类似星座、血型的函数

     javascript加载类似星座.血型的函数 //加载血型 function bloodtypelaod(constellation) { var obj = document.getElement ...

随机推荐

  1. Android初级教程通过简要分析“土司”源码，来自实现定义土司理论探讨

    由于系统自带的土司瞬间即逝,而且非常难看.因此我们就希望自定义自己的土司风格.有些实例就是基于自定义土司完成的,例如金山卫士的火箭发射,基本原理就是个土司.但是在做出自己的土司风格之前,还是要简要分析 ...

  2. Citrix 桌面虚拟化解决方案与VMware桌面虚拟化解决方案对比

    通过 XenDesktop 和 FlexCast为各种场景交付虚拟桌面 企业桌面面临的问题 为每个用户提供安全高效的桌面环境是几乎所有公司或组织的基本要求.如果用户无法使用他们的桌面或应用程序,公司就 ...

  3. 当图片验证码遇上JSP

    今天看到了一个关于使用JSP方式生成图片验证码 的小例子,感觉真的是很不错,拿来分享一下. 原理 对于图片验证码,我们在审查元素的时候会方便的看出是<img src="#" ...

  4. 让 Google Test 出错时断点

    Google Test 缺省是出错退出. 如果最后的出错行在系统库中,那就没什么帮助. 如果是调试运行,直接退出根本就不知道哪里出错了. 后来添加了一个运行参数: --gtest_break_on_f ...

  5. 开源项目——小Q聊天机器人V1.0

    小Q聊天机器人V1.0 http://blog.csdn.net/baiyuliang2013/article/details/51386281 小Q聊天机器人V1.1 http://blog.csd ...

  6. scala学习笔记4（apply方法）

    class ApplyTest{ def apply() = "This apply is in class" def test{ println("test" ...

  7. (NO.00004)iOS实现打砖块游戏(五):游戏场景类

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 创建游戏场景类头文件 在Xcode创建新GameScene类,继 ...

  8. JAVA之旅（二十二）——Map概述,子类对象特点，共性方法，keySet，entrySet，Map小练习

    JAVA之旅(二十二)--Map概述,子类对象特点,共性方法,keySet,entrySet,Map小练习 继续坚持下去吧,各位骚年们! 事实上,我们的数据结构,只剩下这个Map的知识点了,平时开发中 ...

  9. 实战项目：通讯录&nbsp;UI—第十一天

     1.推出视图的两种方式:  1.通过导航控制器push到下一个界面,使用pop返回到上一个界面 2.通过模态的形式推出视图,不需要依赖于导航控制器,通过使用present到下一个界面,通过dismi ...

  10. JSON 的数据转换格式（DataTable或DataSet） -善良公社项目

    这两天在使用JqueryEasyUI框架绑定数据并实现自动分页时,由于框架的限制需要使用Json数据的来传递与获取数据: JSON的全称是JavaScript Object Notation, 是一种 ...