javascript

AngularJS（3）跨域

跨域几乎在前端开发总会遇到的一个东西。
自主开发选用：CORS（跨域资源共享）
第三方API仅仅提供获取数据的get请求，且不支持CORS，选用：JSONP
本文由于采用豆瓣第三方API，故采用JSONP方式；且不支持回调函数 mod.func带 . 方式，故自己写JSONP，作为Angular一个组件Service

自定义JSONP步骤

  1. 挂载回调函数
    将回调函数挂载到window对象上，供回调；函数名称保持唯一。
  2. 处理URL普通参数
    将传入的参数进行处理，拼接到URL中。如：?key1=value1&key2&value2
  3. 写入回调函数URL参数
    将回调函数作为参数，写入URL中。如：&callback=函数名

  4. 创建script标签

    1
    document.createElement('script');

  5. 放入script到页面上

    1
    document.body.appendChild(element);

代码实例(写入自值型函数中)

  • 源码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    (function(angular){
    	var http = angular.module('moviecat.services.http',[]);
    	http.service('HttpService',['$window','$document',function($window,$document{
    		this.jsonp = function(url,data,callback){
    	        /*1.0 挂载回调函数*/
    	        var cbFuncName = "cb_func_" +  Math.round().toString().replace('.','');
    	        $window[cbFuncName] = callback;
    	        /*2.0 处理URL普通参数*/
    	        var queryString = url.indexOf('?') == '-1'?"?":"&";
    	        for(key in data){
    	        	queryString += (key + "=" + data[key] + "&");
    	        }
    	        /*3.0 回调函数URL参数写入*/
    	        queryString += ("callback=" + cbFuncName);
    	        /*4.0 创建script标签*/
    	        var scriptElement = $document[0].createElement('script');
    	        scriptElement.src = url + queryString;
    	        /*5.0 将script放入页面*/			
    	        $document[0].body.appendChild(scriptElement);
    		};
    	}]);
    	
    })(angular);