AJAX跨域请求获取JSON数据的实现方法
作者：cdming
Asynchronous JavaScript and XML (AJAX ) 是驱动新一代 Web 站点（流行术语为 Web 2.0 站点）的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力，它可将来自多个地方的内容集成为单一 Web 应用程序。
我们都知道，由于受到浏览器的限制，AJAX 是不允许跨域请求。不过可以通过使用 JSONP 来实现。JSONP 是一种通过脚本标记注入的方式，它是可以引用跨域 URL 的 js 脚本，不过需要提供一个回调函数（必须在您自己的页面上），因此，你可以自己处理结果。 本文介绍了 JSONP 的是怎么在 jQuery，MooTools 的，Dojo Toolkit 中实现的。
jQuery 的 JSONP
1. 什么是 JSONP
要了解 JSONP，不得不提一下 JSON，那什么是 JSON？
JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.
JSONP(JSON with Padding) 是一个非官方的协议，它允许在服务器端集成 Script tags 返回至客户端，通过 javascript callback 的形式实现跨域访问（这仅仅是 JSONP 简单的实现形式）。
2. JSONP有什么用
由于同源策略的限制，XmlHttpRequest 只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过 script 标签实现跨域请求，然后在服务端输出 JSON 数据并执行回调函数，从而解决了跨域的数据请求。
jQuery.getJSON 方法：
Js 代码如下:
jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{
q: "Arsenal"
},function(tweets) {
// Handle response here
console.info("Twitter returned: ",tweets);
});或者类似
Js 代码如下:
$.ajax({
type:"get",
data:"random = "+Math.random(),
url:url,
dataType:"jsonp",
jsonp:"callback",
success:function(data){
$.each(data, function(key, val) {
$("#myDiv").html($("#myDiv").html()+val.cvalue+"</br>");
});
}
}); 回调方法的参数通过 getJSON 就可以获取到 json 对象
MooTools JSONP
MooTools 需要 Request.JSONP Class，可以从这里下载 MooTools More。选择 Request.JSONP
这样从另一个域获取 JSON 就是小菜一碟了
Js 代码如下:
new Request.JSONP({
url: "http://search.twitter.com/search.json",
data: {
q: "Arsenal"
},//提交的参数, 没有参数可以不写
callbackKey: 'jsoncallback',//自己定义回调函数的参数名称
onComplete: function(tweets) {
// Log the result to console for inspection
console.info("Twitter returned: ",tweets);
}
}).send(); 如果自己定义了回调函数的参数名称，跟 jquery 一样
服务器端你需要这样去取得：
Js 代码如下:
String callback = request.getParameter("jsoncallback");//取得回调方法名
response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/json;charset = UTF-8");
PrintWriter out;
try {
out = response.getWriter();
out.print(callback+"("+message+")");//这里是关键.主要就是这里
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
} 顺便说一句：个人比较喜欢 mootools 的语法结构，和框架设计思路，再次赞美!
Dojo JSONP
JSONP 在 Dojo Toolkit 中需要用上 dojo.io.script (点击可以查看示例)
Js 代码如下：
// dojo.io.script is an external dependency, so it must be required
dojo.require("dojo.io.script");
// When the resource is ready
dojo.ready(function() {
// Use the get method
dojo.io.script.get({
// The URL to get JSON from Twitter
url: "http://search.twitter.com/search.json",
// The callback paramater
callbackParamName: "callback", // Twitter requires "callback"
// The content to send
content: {
q: "Arsenal"
},
// The success callback
load: function(tweetsJson) { // Twitter sent us information!
// Log the result to console for inspection
console.info("Twitter returned: ",tweetsJson);
}
});
}); JSONP 是一种非常有效的，可靠的，容易实现的远程数据获取方式。JSONP 的策略也使开发人员能够避免繁琐的服务器代理方式,很方便的获取数据。
JSONP (JSON with Padding) 是一个非官方的协议，它允许在服务器端集成 Script tags 返回至客户端，通过 javascript callback 的形式实现跨域访问（这仅仅是 JSONP 简单的实现形式）。
客户端代码：
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
function jsonpCallback(result) {
//alert(result);
for(var i in result) {
alert(i+":"+result[i]); //循环输出a:1, b:2, etc.
}
}
var JSONP=document.createElement("script");
JSONP.type = "text/javascript";
JSONP.src = "http://crossdomain.com/services.php?callback = jsonpCallback";
document.getElementsByTagName("head")[0].appendChild(JSONP);
</script>服务端代码：
<?php
//服务端返回 JSON 数据
$arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
$result=json_encode($arr);
//echo $_GET['callback'].'("Hello,World!")';
//echo $_GET['callback']."($result)";
//动态执行回调函数
$callback = $_GET['callback'];
echo $callback."($result)";到此这篇关于AJAX跨域请求获取JSON数据的文章就介绍到这了,更多相关AJAX跨域请求获取JSON数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！