Jsonp 跨域

最新推荐文章于 2024-11-01 07:44:09 发布

xuyanlu

最新推荐文章于 2024-11-01 07:44:09 发布

阅读量655

点赞数

分类专栏： JavaScript PHP 文章标签： jsonp xmlhttprequest callback json javascript 服务器

本文链接：https://blog.csdn.net/jovenlu/article/details/7938308

版权

PHP 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

JavaScript

6 篇文章 0 订阅

订阅专栏

客户端请求：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <script src="./jquery-1.7.2.js"></script>
 </head>

 <body>

	<div id="vvgBox">
        <ul id="gameCanvas">aa</ul>
    </div>

	<script type="text/javascript">
		var qsData = "123454";
		$.ajax({
			url: "http://www.jaap.com/jsonp.php",
			type: "POST",
			dataType: 'jsonp',
			jsonp: 'callback',
			data: qsData,
			timeout: 2000,
			success: function (json) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数
				alert(json);
			}
		});

	</script>

 </body>
</html>

服务器端响应：

<?php
//服务端返回JSON数据  
$arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);  
$result=json_encode($arr);  

//动态执行回调函数  
$callback=$_GET['callback'];  
echo $callback."($result)";

响应结果：

Jsonp优点：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

Jsonp缺点：JSONP不提供错误处理。如果动态插入的代码正常运行，你可以得到返回，但是如果失败了，那么什么都不会发生。你无法获得一个404的错误，也不能取消这个请求。另外一个重要的缺点是如果使用了不信任的服务会造成很大的安全隐患。它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。