如何让 ajax 像 Google Map API 一样工作？

Question

我正在尝试访问我在其他网站上创建的 Javascript API。 javascript 位于https://ksc105.kscserver.com/query.js，它将ajax 调用拉到https://ksc105.kscserver.com/suggestions.php (?action=getall)。当然，在https://ksc105.kscserver.com/index.php 上使用它是有效的。

但是，我正在尝试将该 javascript 导入另一个域站点。我知道跨域 ajax 调用不起作用，但我认为如果 ajax 调用是从该站点上的 javascript 发出的，它就会起作用。我认为这是基于 Google 的 Map API 的。我很确定它使用 ajax。

如何让 ajax 像 Google Map API 一样工作？哪里有网站可以添加我的脚本并使用它的功能？

在萤火虫中，我收到了触发请求，但我只得到了一个空返回，但它不应该返回空。在 IE9 中，我收到错误“SCRIPT5：访问被拒绝”。 /“query.js，第 62 行字符 5”。

如果您转到https://ksc105.kscerver.com/index.php 并在框中输入 3 个或更多字符，您应该会收到类似于 Google 搜索的“建议”。我需要同样的东西才能在没有服务器代理的任何其他网站上工作。您可以使用“测试”，因为它会提取一堆测试数据。

Answer 1

尝试使用 AJAX 回调。 jQuery 在这方面做得很好，但作为一个原始示例，如果您使用回调函数（来自 <script> 标记）加载一些 JSON，它将运行该函数。这就是您可以跨站点使用 Twitter API 的方式。 IE。如果你调用http://api.twitter.com/1/statuses/user_timeline.json?screen_name=twitter&count=20&callback=handletwitter 并创建一个handletwitter 函数：

<script type="text/javascript">
function handletwitter(data){
    console.log(data);
}
</script>
<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=twitter&count=20&callback=handletwitter"></script>

这也称为 JSONP

Answer 2

有一个聪明的解决方案可以做到这一点。您可以拥有一个宽度和高度为 0 的 iFrame，因此它不可见。在其中，您可以使用“父”属性在主页上加载数据。由于您可以在 iFrame 中加载任何内容，因此这对您来说应该是一个很好的解决方案。 考虑以下示例（也适用于不同的域）。

<html>
    <head>
    <script type="text/javascript">
        function loadData(data)
        {
            var a = document.getElementById("H");
            a.innerHTML = data;
        }
    </script>   
    </head>
    <body>
    <div id="H">hello</div>
    <iframe src="sample.html" width="0px" height="0px">
    </iframe>
    </body>
</html>

Sample.html

    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<script>
    <!--
    parent.loadData("I am inside iFrame");
    -->
</script>
</body>
</html>