欢迎订阅我的博客利用jQuery实现跨域的Ajax
2011-02-19 上午 - JS/Ajax/AS - ajax - JQuery - json - 跨域
说到Ajax的跨域，还真是个让人头痛的问题，实现的方法有多种，这里仅记录使用jQuery的getJSON实现跨域，需要用到json数据。
简单json格式如下：
[{"a":"1","b":"2"},{"a":"3","b":"4"}]
主体代码：
$.getJSON('http://您的域名/文件名?jsoncallback=?',function(dt){
$.each(dt,function(i,item){
alert(item.a);
});
});
$.each(dt,function(i,item){
alert(item.a);
});
});
jsoncallback=?，这个必不可少，后端程序会get这个参数，这里就不做解释了，具体请参看jQuery API里的说明。
后端PHP：
<?php
header('Content-Type: application/json; charset=utf-8');
$callback = $_GET['jsoncallback'];
echo $callback.'([{"a":"1","b":"2"},{"a":"3","b":"4"}])';
?>
header('Content-Type: application/json; charset=utf-8');
$callback = $_GET['jsoncallback'];
echo $callback.'([{"a":"1","b":"2"},{"a":"3","b":"4"}])';
?>
这里仅仅只是一个简单的json示范，可以动态生成更复杂的json以适应项目需求。
说明一下：由于jQuery的getJSON使用的是get方式请求数据，因此数据量不能太大，否则导致接收失败。
既然说到Ajax跨域了，再记录一个PHP中简单的方法吧，利用file_get_content()把整个文件读入一个字符串中，性能可能略低。
<?php
@header("Content-Type: text/html; charset=utf-8");
@header("Expires: -1");
@header("Cache-Control: no-store, private, post-check=0, pre-check=0, max-age=0", FALSE);
@header("Pragma: no-cache");
$vcontent=file_get_contents("http://您的域名/文件名");
echo $vcontent;
?>
@header("Content-Type: text/html; charset=utf-8");
@header("Expires: -1");
@header("Cache-Control: no-store, private, post-check=0, pre-check=0, max-age=0", FALSE);
@header("Pragma: no-cache");
$vcontent=file_get_contents("http://您的域名/文件名");
echo $vcontent;
?>
关于js跨域跨域还可参看：支付宝前端开发组：也来谈谈”完美”跨域
