angularjs 学习笔记(一) -----JSONP跨站访问

1、  下载angular-seed-master-master包，解压缩后将新版本的angularJS文件放入其中。

 

2、  制作frontmockup文件夹（前端调用），同时制作backmockup文件夹（后端调用），使用IIS开启2个webserver（此步骤可以用其他方式替代）。

 

3、  backmockup站点添加以下HTTP头

Access-Control-Allow-Credentials：true

Access-Control-Allow-Headers：origin,x-requested-with,content-type

Access-Control-Allow-Methods： POST,GET,OPTIONS

Access-Control-Allow-Origin：*

（此处用来开启跨域访问，IIS中在HTTP响应头中添加）

 

4、  AngularJs 跨域访问使用$resource的JSONP技术，代码如下

.service('JsonSource', ['$resource',function($resource) {

return $resource('http://127.0.0.1:801/index.asp', {}, {init:{method:'JSONP',format: 'json', params:{callback:'JSON_CALLBACK'},isArray:true}});

}])

其中init方法为自定义，因为需要用到method:'JSONP'，所以不能使用get、query等自带方法，数组直接用isArray设置。

params:{callback:'JSON_CALLBACK'}是关键点，JSON_CALLBACK为系统方法，会生成一个自增长ID，用以与客户端匹配，客户端用<%=request("callback")%>方式获得，并输出

angular.callbacks._0(

[{"name":"angular.callbacks._0","journal_id":"539016f202b418c1e6000019"}])

这个方法的原始形态是callback:'JSON_CALLBACK'，并不使用params，由于无法使用request获得参数，不知道服务器端怎么配置，理论上这个选项的安全性更高。

 

5、  数据读取调用JsonSource的init方法

function ($scope,JsonSource ) {

         JsonSource.init(function(result){

                $scope.journals = result;

            });

}

         通过ng-repeat="journal in journals" 循环输出

 

6、  跨站访问功能完成，整理成压缩文件angularjs-0.0-20140610-jsonp.zip。

转载于:https://www.cnblogs.com/aaronjin/p/3795823.html