javascript加RoR实现JSONP

简介:

我们知道不同域中的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脚本,该脚本能做的事只受限于想象力而已。

相关文章
|
7月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- jsonp跨域请求
JavaScript学习 -- jsonp跨域请求
29 0
|
4月前
|
JSON 前端开发 JavaScript
JavaScript学习 -- jsonp跨域请求
JavaScript学习 -- jsonp跨域请求
22 0
|
5月前
|
JSON 前端开发 JavaScript
JavaScript高级主题:什么是 JSONP?
JavaScript高级主题:什么是 JSONP?
28 0
|
JavaScript 前端开发
利用JavaScript实现二级联动
利用JavaScript实现二级联动 要实现JavaScript二级联动效果,首先要确定需要哪些技术: 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码: &lt;!-- &lt;input type=&quot;text&quot; id=&quot;text&quot;&gt; --&gt; 请选择省份: &lt;select name=&quot;&quot; id=&quot;provinces&quot;&gt; &lt;!-- &lt;option value=&quot;江苏省&quot;&gt;江苏省&lt;/option&gt;
|
JavaScript 前端开发
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
JavaScript函数柯里化的实现原理,进来教你完成一个自己的自动实现柯里化方法
167 0
|
移动开发 JavaScript weex
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
weex-自定义module,实现weex在iOS的本地化,js之间互相跳转,交互,传值(iOS接入weex的最佳方式)
220 0
|
JavaScript
JS中实现或退出全屏
JS中实现或退出全屏
153 0
|
前端开发 JavaScript
前端:JS实现双击table单元格变为可编辑状态
前端:JS实现双击table单元格变为可编辑状态
365 0
|
JavaScript 算法 前端开发
【前端算法】JS实现数字千分位格式化
JS实现数字千分位格式化的几种思路,以及它们之间的性能比较
279 1