<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<script type="text/javascript" src='../jquery.js'></script>
<!--
//回调函数，输出要跨域请求的数据
<script type="text/javascript">
function result(msg){
alert(msg);
}
</script>
-->
<!--
//页面加载时直接触发跨域请求
<script type="text/javascript" src="http://www.shop.com/index.php/test/demo?callback=result"></script> -->
<!-- **************常用*************** -->
<script type="text/javascript">
//通过jquery来实现jsonp的跨域请求
$(function(){
$('button').click(function(){
var url="http://www.shop.com/index.php/test/demo?callback=?";
$.getJSON(url,function(msg){
alert(msg)
});
/*
$.get(url,function(msg){
alert(msg)
},'jsonp');
});
*/
});
//点击按钮创建SCRIPT标签实现原始的JSONP请求
/*
$(function(){
$('button').click(function(){
//点击创建script标签，且src属性的指向地址为http://www.shop.com/index.php/test/demo?callback=result
var script=document.createElement('script');
script.src="http://www.shop.com/index.php/test/demo?callback=result";
document.getElementsByTagName('head')[0].appendChild(script);
});
});
*/
//讲解跨域请求的场景及解决方案（请求第三方脚本（同站点））
/*
$(function(){
$('button').click(function(){
//var url="http://www.study.com/seven7/1412phpB/20160909/demo.php";
var url="http://www.shop.com/index.php/test/demo";
$.get(url,function(msg){
alert(msg)
});
//$('iframe').show();
});
});
*/
</script>
</head>
<body>
<!-- <iframe src="http://www.shop.com/index.php/test/demo" frameborder="0" style="display:none"></iframe> -->
<button>点击</button>
</body>
</html>