跨站点AJAX请求

时间:2010-11-24 05:52:44

标签: jquery ajax

我正在尝试构建的是一个INTERFACE,用户可以通过该界面向我的网站发送帖子请求并在他的浏览器上显示响应。

例如

$.post(
     'http://www.mysite.com/thirdpartyrequest.php',
     { param1: value1, param2: value2 },
     function(data) {
         $("#universalid").html(data);//Update with the response
     }
);
//however it is not allowed.

任何想法如何进行此类跨站点Ajax请求

1 个答案:

答案 0 :(得分:4)

您最好的选择是使用JSONP。退房:

http://api.jquery.com/jQuery.getJSON/

http://en.wikipedia.org/wiki/JSON

如果您的服务器提供的数据如下:

http://my.server.com/somedata.json

{
   'some': ['fancy', 'json' ],
   'structure: 'here'
}

通过在请求网址中提供回调参数,将其转换为jsonp - 事实上的标准名称为callback。然后在服务器上,您需要检查此参数并将结果包装在该回调中(有效地将其转换为javascript而不是json)。

http://my.server.com/somedata.json?callback=receive_this

receive_this({
   'some': ['fancy', 'json' ],
   'structure: 'here'
});

(对于niggly,json的响应mime类型应该是application/json,而对于jsonp,它应该是application/javascript

客户端现在(概念上)加载json,如下所示:

<script type="text/javascript">

   var receive_this = function(json) {

     // do some stuff with data here.

   };

</script>

<script type="text/javascript" src="http://my.server.com/somedata.json?callback=receive_this"></script>

在实践中,您使用类似jQuery的东西将jsonp请求脚本标记动态插入到DOM中。 jQuery默认调用回调请求参数callback

$.ajax({
  url: 'http://my.server.com/somedata.json',
  dataType: 'jsonp',
  success: receive_this
});