JSONP技术解决跨域问题
官方解释：
JSONP是一个非官方的协议，它允许在服务器端集成script tags返回至客户端，通过javascript callback回调函数的形式实现跨域访问。
概括：JSONP技术就是解决跨域问题的。
跨域：只有JavaScript中的ajax访问其他域名的PHP文件才会跨 域，后台之间互相访问是不
跨域的，但是后台PHP文件一般是访问不到的。
解决思路：
一般像图片的路径<img src="" />都是可以访问到图片的，那么我们可以用src的属性。
实现跨域的方案有：
-
使用JSONP动态创建script标签，增加src属性。
-
在PHP文件服务器端写三个header头部，这种方法不建议使用，它会使服务器端信息不安全。
header("Access-Control-Allow-Origin: *"); // 允许所有发起的跨域请求 //如果需要设置允许所有域名发起的跨域请求，可以使用通配符 * header("Access-Control-Allow-Origin: *"); // 允许任意域名发起的跨域请求 header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With'); -
配置服务器反向代理，简单来说，就是用自己的HTML文件访问自己的PHP文件，再通过自己的PHP文件去访问其他的PHP文件。
这里对第一种方案进行说明：
1. demo.html
<!DOCTYPE html>
<meta charset="UTF-8">
<title>使用JSONP+JSON返回大批量数据</title>
<script src="myajax.js"></script>
</head>
<body>
<input type="button" id='btnok' value='Ajax跨域请求' />
<hr />
<div id='result'></div>
<script>
$('btnok').onclick = function () {
var sc = document.createElement('script');
sc.src = "http://www.test.com/demo.php?fn=callback";
document.getElementsByTagName('head')[0].appendChild(sc);
}
function callback(msg){
for(var i=0;i<msg.length;i++){
var id = msg[i].id;
var name = msg[i].username;
$('result').innerHTML += 'id是：'+id+' 名字是：'+name+'<hr />';
}
}
</script>
</body>
</html>
2. demo.php (这个文件可以放在别的域名下)
<?php
//1、接收fn参数
$fn = $_GET['fn']; //callback
//2、连接数据库
mysql_connect('localhost','root','');
mysql_query('use abc');
mysql_query('set names utf8');
//3、定义sql语句
$sql = "select id,username from admin";
//4、执行sql语句
$res = mysql_query($sql);
//5、定义一个空数组
$data = array();
//6、遍历结果集
while($row = mysql_fetch_assoc($res)) {
$data[] = $row;
}
//7、使用json_encode对数据进行转码操作
$str = json_encode($data);
//8、拼接数据callback([{},{},{}])
echo $fn."($str)";
结果展示：
image
网友评论