标签：
| URL | 结果 | 原因 |
|---|---|---|
http://store.company.com/dir2/other.html |
成功 | 仅路径不同 |
http://store.company.com/dir/inner/another.html |
成功 | 仅路径不同 |
https://store.company.com/secure.html |
失败 | 协议不同 |
http://store.company.com:81/dir/etc.html |
失败 | 端口不同 |
http://news.company.com/dir/other.html |
失败 | 主机名不同 |
SimpleHTTPServer module has been merged into http.server in Python 3.0.$ python -m SimpleHTTPServer 8088 (2.x)
$ python -m http.server 8088 (3.x)
1 <!doctype html> 2 <html lang="en" ng-app="simpleApp"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="scripts/vendor/angular.min.js"></script> 6 <script src="scripts/vendor/angular-resource.min.js"></script> 7 <script src="scripts/controllers/controllers.js"></script> 8 <script src="scripts/services/services.js"></script> 9 <link href="styles/bootstrap.css" rel="stylesheet"> 10 11 <!-- [跨域]step1. 通过拥有src属性的标签进行跨域调用 <script><img><iframe> --> 12 <script type="text/javascript" src="http://localhost:8090/remote.js"></script> 13 14 <!-- [跨域]step2. 本地函数被跨域的远程js调用，并接收远程js带来的数据 --> 15 <script type="text/javascript"> 16 var localHandler = function(data){ 17 alert(‘我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：‘ + data.result); 18 }; 19 </script> 20 21 <!-- [跨域]step3. JSONP client端的核心：实现动态查询 22 怎么样让远程JS知道它应该调用的本地函数叫什么名字？ 23 client传参告诉server"我想要一段调用xx函数的JS代码，请返回给我"；即client在发送请求URL时，指定回调函数--> 24 <script type="text/javascript"> 25 // 得到航班信息查询结果后的回调函数 26 var flightHandler = function(data){ 27 <!-- [跨域]step4. 处理server返回的数据：几种格式 --> 28 /* JSONArray 29 * flightHandler([ 30 * {"code": "CA1998", "price": 1780, "tickets": 5 }, 31 * {"code": "CA2001", "price": 2090, "tickets": 10 } 32 * ]);*/ 33 for(var i=0; i<data.length; i++){ 34 alert(‘你查询的航班结果是：票价 ‘ + data[i].price + ‘ 元，‘ + ‘余票 ‘ + data[i].tickets + ‘ 张。‘); 35 } 36 37 /* JSON 38 flightHandler({ "code": "CA1998", "price": 1780, "tickets": 5 }); 39 */ 40 // alert(‘你查询的航班结果是：票价 ‘ + data.price + ‘ 元，‘ + ‘余票 ‘ + data.tickets + ‘ 张。‘); 41 }; 42 // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码） 43 var url = "http://localhost:8090/remote.js?code=CA1998&callback=flightHandler"; 44 // 创建script标签，设置其属性 45 var script = document.createElement(‘script‘); 46 script.setAttribute(‘src‘, url); 47 // 把script标签加入head，此时调用开始 48 document.getElementsByTagName(‘head‘)[0].appendChild(script); 49 </script> 50 51 <title>simpleApp</title> 52 </head> 53 <body> 54 <div ng-view></div> 55 </body> 56 </html>
remote.js，在8090端口提供服务，来模拟不同域的远程文件（端口不同）
1 alert("远程文件"); 2 localHandler({"result":"我是远程js带来的数据"}); 3 4 //JSON 5 flightHandler({ 6 "code": "CA1998", 7 "price": 1780, 8 "tickets": 5 9 }); 10 11 //JSONArray 12 flightHandler([{ 13 "code": "CA1998", 14 "price": 1780, 15 "tickets": 5 16 }, { 17 "code": "CA2001", 18 "price": 2090, 19 "tickets": 10 20 }]);
1 myUrl ="http://localhost:8090/api/test?callback=JSON_CALLBACK"; 2 $http.jsonp(myUrl).success( 3 function(data){ 4 alert(data); 5 } 6 );
1 myUrl ="http://localhost:8090/api/test"; 2 $.ajax({ 3 type:"GET", 4 url:myUrl, 5 dataType:"jsonp", 6 jsonp:"callback", 7 jsonpCallback:"jsonpCallback", 8 success:function(data){ 9 alert(data.msg); 10 } 11 }); 12 function jsonpCallback(data){ 13 alert(data); 14 }
标签：
原文地址：http://www.cnblogs.com/xhz-dalalala/p/5259965.html
