(一)什么是跨域请求?
首先要理解什么是跨域?
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。
其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。
常见跨域场景:(JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。)
常见解决跨域办法:
①代理:使用php做代理文件,ajax直接请求php文件
②通过设置响应头
③通过jsonp,通过某些标签(img,script,iframe )src属性
(二)json和jsonp的定义和区别
区别:
json是一种基于文本的数据交换格式（无法跨域）,jsonp是一种非官方跨域数据交互协议。json返回的是一串数据,而 jsonp返回的是脚本代码（包含一个函数调用）。
定义:
json可以理解为是一种格式，它的键必须用双引号。json格式的对象必须写在{}花括号里面，json格式的数组写在[]大括号里面。
jsonp实现跨域的原理：
1.首先在客户端注册一个callback, 然后把callback的名字传给服务器。
2.服务器先生成 json 数据。 然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp. 最后将 json 数据直接以入参
的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
3.客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）
(三)使用demo示例
script标签jsonp跨域具体实现
(1)script标签实现跨域
客户端html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>script标签与jsonp</title>
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
//传参并指定回调执行函数为jsonpBack
script.src = 'http://dev.test.com/jsonp.php?callback=jsonpBack';
//script标签追加到head标签中
document.head.appendChild(script); //回调执行函数
function jsonpBack(data) {
alert(JSON.stringify(data));
}
</script>
</head>
<body>
</body>
</html>
服务端php.代码
<?php
$a = $_GET['callback'];//接收参数,名为js函数名
$data = array('name'=>'admin','age'=>100);
$json = json_encode($data);
echo "$a($json)";//服务端输出,可执行的js函数名称
打印结果如下图:
注意:由于浏览器的同源策略,禁止ajax从一个域名请求另外一个域名上面的数据.
(2)ajax获取json数据
客户端html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax获取json</title>
</head>
<body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
</script>
<script type="text/javascript">
$.ajax({
type : 'get',
url : 'http://dev.php.com/test3/json.php',
dataType : 'json',
success : function(data) {
alert('ajax获取json数据:' +JSON.stringify(data));
}
});
</script>
</body>
</html>
服务端php.代码
<?php
$data = array("name"=>"admin","age"=>"100");
$json = json_encode($data);
echo $json;
打印结果如下图:
ajax中jsonp跨域具体实现
(3)ajax中jsonp使用
客户端html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax中jsonp</title>
</head>
<body>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
type: "get",
url: "http://dev.test.com/jsonp.php",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"jsonpBack",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function(data){
alert('ajax中jsonp回调:' +JSON.stringify(data));
},
error: function(){
alert('fail');
}
});
</script>
</body>
</html>
服务端php.代码
<?php
$a = $_GET['callback'];//接收参数,名为js函数名
$data = array('name'=>'admin','age'=>100);
$json = json_encode($data);
echo "$a($json)";//服务端输出,可执行的js函数名称
打印结果如下图:
