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。

angularjs 学习笔记(一) -----JSONP跨站访问,布布扣,bubuko.com

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

上一篇:用PHP将Unicode 转化为UTF-8


下一篇:angularjs 学习笔记 -----结构定义