这里有两个页面,test.php和testserver.php。

test.php

<script src="scripts/jq.js" type="text/javascript"></script>
<script>
    $(function() {
        $.ajax({url:"testserver.php",
            success:function() {
                alert("Success");
            },
            error:function() {
                alert("Error");
            },
            dataType:"json",
            type:"get"
        }
    )})
</script>

testserver.php

<?php
$arr = array("element1",
             "element2",
             array("element31","element32"));
$arr['name'] = "response";
echo json_encode($arr);
?>

现在我的问题是:当这两个文件都在同一服务器(本地主机或web服务器),它的工作和警报(“成功”)被调用;如果它在不同的服务器上,即web服务器上的testserver.php和localhost上的test.php,则它不工作,并且alert(“错误”)正在执行。即使AJAX内部的URL更改为http://domain.example/path/to/file/testserver.php


当前回答

我不得不从本地磁盘加载网页“file:///C:/test/htmlpage.html”,调用“http://localhost/getxml.php”url,并在IE8+和Firefox12+浏览器中做到这一点,使用jQuery v1.7.2 lib来最小化样板代码。在阅读了几十篇文章之后,我终于明白了。以下是我的总结。

服务器脚本(.php, .jsp,…)必须返回http响应头Access-Control-Allow-Origin: * 在使用jQuery ajax之前,在javascript中设置这个标志:jQuery.support.cors = true; 你可以设置标志一次或每次使用jQuery ajax函数 现在我可以在IE和Firefox中阅读。xml文档。其他浏览器我没有测试。 响应文档可以是纯/文本,xml, json或其他任何东西

下面是一个jQuery ajax调用的例子,其中包含一些调试系统。

jQuery.support.cors = true;
$.ajax({
    url: "http://localhost/getxml.php",
    data: { "id":"doc1", "rows":"100" },
    type: "GET",
    timeout: 30000,
    dataType: "text", // "xml", "json"
    success: function(data) {
        // show text reply as-is (debug)
        alert(data);

        // show xml field values (debug)
        //alert( $(data).find("title").text() );

        // loop JSON array (debug)
        //var str="";
        //$.each(data.items, function(i,item) {
        //  str += item.title + "\n";
        //});
        //alert(str);
    },
    error: function(jqXHR, textStatus, ex) {
        alert(textStatus + "," + ex + "," + jqXHR.responseText);
    }
});

其他回答

我使用Apache服务器,所以我使用mod_proxy模块。使模块:

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

然后添加:

ProxyPass /your-proxy-url/ http://service-url:serviceport/

最后,将proxy-url传递给脚本。

使用JSONP。

jQuery:

$.ajax({
     url:"testserver.php",
     dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
     success:function(json){
         // do stuff with json (in this case an array)
         alert("Success");
     },
     error:function(){
         alert("Error");
     }      
});

PHP:

<?php
$arr = array("element1","element2",array("element31","element32"));
$arr['name'] = "response";
echo $_GET['callback']."(".json_encode($arr).");";
?>

echo可能是错误的,我已经有一段时间没用php了。在任何情况下,你都需要输出callbackName('jsonString'),注意引号。jQuery会传递自己的回调名称,所以你需要从get参数中获取。

正如Stefan Kendall所发布的,$.getJSON()是一个简便方法,但随后你需要附加'callback=?'到url作为GET参数(是的,值是?,jQuery用自己生成的回调方法替换它)。

有一些使用JSONP的例子,其中包括错误处理。

但是,请注意,使用JSONP时不会触发错误事件!参见:http://api.jquery.com/jQuery.ajax/或jQuery ajax请求使用jsonp错误

浏览器安全性防止ajax调用从一个域上托管的页面到另一个域上托管的页面;这就是所谓的“同源策略”。

对于微软Azure来说,情况略有不同。

Azure有一个需要设置的特殊CORS设置。这在幕后本质上是相同的事情,但简单地设置joshua提到的头文件将不起作用。Azure支持跨域的文档可以在这里找到:

https://learn.microsoft.com/en-us/azure/app-service-api/app-service-api-cors-consume-javascript

我摆弄了几个小时,才意识到我的主机平台有这个特殊的设置。