(一)什么是跨域请求?
首先要理解什么是跨域?
跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。
其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。
常见跨域场景:(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代码:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>script标签与jsonp</title> 6 <script> 7 var script = document.createElement('script'); 8 script.type = 'text/javascript'; 9 //传参并指定回调执行函数为jsonpBack 10 script.src = 'http://dev.test.com/jsonp.php?callback=jsonpBack'; 11 //script标签追加到head标签中 12 document.head.appendChild(script); 13 14 //回调执行函数 15 function jsonpBack(data) { 16 alert(JSON.stringify(data)); 17 } 18 </script> 19 </head> 20 <body> 21 </body> 22 </html>
服务端php.代码
1 <?php 2 $a = $_GET['callback'];//接收参数,名为js函数名 3 $data = array('name'=>'admin','age'=>100); 4 $json = json_encode($data); 5 echo "$a($json)";//服务端输出,可执行的js函数名称
打印结果如下图:
注意:由于浏览器的同源策略,禁止ajax从一个域名请求另外一个域名上面的数据.
(2)ajax获取json数据
客户端html代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ajax获取json</title> 6 </head> 7 <body> 8 <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script> 9 <script type="text/javascript"> 10 </script> 11 <script type="text/javascript"> 12 $.ajax({ 13 type : 'get', 14 url : 'http://dev.php.com/test3/json.php', 15 dataType : 'json', 16 success : function(data) { 17 alert('ajax获取json数据:' +JSON.stringify(data)); 18 } 19 }); 20 </script> 21 </body> 22 </html>
服务端php.代码
1 <?php 2 $data = array("name"=>"admin","age"=>"100"); 3 $json = json_encode($data); 4 echo $json;
打印结果如下图:
ajax中jsonp跨域具体实现
(3)ajax中jsonp使用
客户端html代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ajax中jsonp</title> 6 </head> 7 <body> 8 <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script> 9 <script type="text/javascript"> 10 $.ajax({ 11 type: "get", 12 url: "http://dev.test.com/jsonp.php", 13 dataType: "jsonp", 14 jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) 15 jsonpCallback:"jsonpBack",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据 16 success: function(data){ 17 alert('ajax中jsonp回调:' +JSON.stringify(data)); 18 }, 19 error: function(){ 20 alert('fail'); 21 } 22 }); 23 </script> 24 </body> 25 </html>
服务端php.代码
1 <?php 2 $a = $_GET['callback'];//接收参数,名为js函数名 3 $data = array('name'=>'admin','age'=>100); 4 $json = json_encode($data); 5 echo "$a($json)";//服务端输出,可执行的js函数名称
打印结果如下图:
