我将此代码用于跨域 ajax 调用,我希望它对这里的帮助不止一个。我正在使用 Prototype 库,您可以使用 JQuery 或 Dojo 或其他任何东西来做同样的事情:
第一步:新建一个js文件,把这个类放在里面,我叫它xss_ajax.js
var WSAjax = Class.create ({
initialize: function (_url, _callback){
this.url = _url ;
this.callback = _callback ;
this.connect () ;
},
connect: function (){
var script_id = null;
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', this.url);
script.setAttribute('id', 'xss_ajax_script');
script_id = document.getElementById('xss_ajax_script');
if(script_id){
document.getElementsByTagName('head')[0].removeChild(script_id);
}
// Insert <script> into DOM
document.getElementsByTagName('head')[0].appendChild(script);
},
process: function (data){
this.callback(data) ;
}
}) ;
这个类创建一个动态脚本元素,它的 src 属性针对您的 JSON 数据提供者(JSON-P 实际上因为您的远程服务器必须以这种格式提供数据 :: call_back_function(//json_data_here) :: 所以当脚本标签创建后,您的 JSON 将直接作为函数进行评估(我们将在步骤 2 中讨论将回调方法名称传递给服务器),这背后的主要概念是 img 元素之类的脚本不受 SOP 约束。
Step2:在任何你想异步拉取 JSON 的 html 页面中(我们称之为 AJAJ ~ Asynchronous JAvascript + JSON :-) 而不是使用 XHTTPRequest 对象的 AJAX),如下所示
//load Prototype first
//load the file you've created in step1
var xss_crawler = new WSAjax (
"http://your_json_data_provider_url?callback=xss_crawler.process"
, function (_data){
// your json data is _data and do whatever you like with it
}) ;
你还记得第 1 步的回调吗?所以我们将它传递给服务器,它将返回嵌入在该方法中的 JSON,因此在我们的例子中,服务器将返回一个可评估的 JavaScript 代码 xss_crawler.process(//the_json_data),请记住 xss_crawler 是 WSAjax 类的一个实例。服务器代码取决于您(如果它是您的),但大多数 Ajax 数据提供程序允许您像我们一样在参数中指定回调方法。
我刚刚在 Ruby on rails 中做了
render :json=>MyModel.all(:limit=>10), :callback => params[:callback],:content_type => "application/json"
仅此而已,您现在可以从您的应用程序(小部件、地图等)中提取来自另一个域的数据,仅限 JSON 格式,不要忘记。
希望对您有所帮助,感谢您的耐心等待 :-),对代码格式化表示抱歉,它不能正常工作