jQuery AJAX跨域

这里有两个页面,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服务器)时,它都会工作并且alert("Success")被调用; 如果它位于不同的服务器上,这意味着Web服务器上的testserver.php和本地主机上的test.php,它不工作,并且alert("Error")正在执行。 即使ajax中的URL更改为http://domain.com/path/to/file/testserver.php


使用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).");";
?>

回声可能是错误的,自从我使用php以来已经有一段时间了。 无论如何,你需要输出callbackName('jsonString')注意引号。 jQuery将传递它自己的回调名称,所以你需要从GET参数中获取它。

正如Stefan Kendall所发布的,$ .getJSON()是一种速记方法,但是您需要追加'callback=?' 以url参数作为GET参数(是的,值是?,jQuery用它自己生成的回调方法替换它)。


JSONP是一个不错的选择,但有一个更简单的方法。 您可以简单Access-Control-Allow-Origin在服务器上设置Access-Control-Allow-Origin标头。 将其设置为*将接受来自任何域的跨域AJAX请求。 (https://developer.mozilla.org/en/http_access_control)

当然,这样做的方法会因语言而异。 这里是在Rails中:

class HelloController < ApplicationController
  def say_hello
    headers['Access-Control-Allow-Origin'] = "*"
    render text: "hello!"
  end
end

在这个例子中, say_hello动作将接受来自任何域的AJAX请求并返回“hello!”的响应。

以下是它可能返回的头文件的示例:

HTTP/1.1 200 OK 
Access-Control-Allow-Origin: *
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Type: text/html; charset=utf-8
X-Ua-Compatible: IE=Edge
Etag: "c4ca4238a0b923820dcc509a6f75849b"
X-Runtime: 0.913606
Content-Length: 6
Server: WEBrick/1.3.1 (Ruby/1.9.2/2011-07-09)
Date: Thu, 01 Mar 2012 20:44:28 GMT
Connection: Keep-Alive

它很容易,它确实有一些浏览器的限制。 请参阅http://caniuse.com/#feat=cors。


您可以通过添加Access-Control-Allow-Origin来通过HTTP标头来控制它 。 将其设置为*将接受来自任何域的跨域AJAX请求。

使用PHP它非常简单,只需将以下代码行添加到您想从域中访问的脚本中即可:

header("Access-Control-Allow-Origin: *");

不要忘记在httpd.conf中启用mod_headers模块。

链接地址: http://www.djcxy.com/p/96477.html

上一篇: jQuery AJAX cross domain

下一篇: Programmatically control breakpoints in Javascript?