唯品秀前端博客
当前位置: 前端开发 > Vue.js专区 > angular1.2通过$http请求数据及跨域(兼容IE8)

angular1.2通过$http请求数据及跨域(兼容IE8)

2019-03-22 分类:Vue.js专区 作者:管理员 阅读(701)

最近准备要迭代个古老项目,和c++工程师合作做PC桌面应用.exe,因为桌面客户端需要缩包,原本30多M文件缩小到几M内,但提出的要求是需要前端混合的页面兼容到最低IE8。当然,项目还是前后端分离模式,本身项目是jq撸的,粗略看了下,没有看下去的欲望,近一年多都没怎么碰jQuery ,习惯了MVVM的快感,怎么办?

想起刚学MVVM时候我最开始是学的angular,但学的差不多时候,版本2发布了,升级版本后我写的demo都崩了,于是发现很多人遇到这个问题,所以就开始各种嫌弃它了,转向了vue.js怀抱,但angular有个很大优势,这玩意儿低版本传说中的脏检查模式是可以兼容到IE8的(版本<1.3)甚至IE7(需借助插件),这就不得不让我想到了它,因为vue.js的指令很多都是从angular中模仿过去的,所以撸起来还是相对轻松不少,但当时学的时候,只是学的基本语法,并没有去弄前后端交互ajax请求数据这些东西,所以赶紧看了下相关文档,也给需要搞老古董项目的同学做个笔记分享下经验。

先顺便说下做IE7兼容需要的东西

  • 1. 加载json2.js
  • 2. 加载html5shiv.js
  • 3. 加载angular.min.js文件
  • 4. 加载angular-ie7-support文件 (这个文件主要解决ng的$sceProvider的问题)
  • 如何请求数据

    在angular1.5x版本以下有个内置服务$http,它只是对原始ajax做了基本封装,示例:

    1
    2
    3
    4
    5
    6
    var app = angular.module('myApp', []);
    app.controller('ajaxCtrl', function ($scope, $http) {
        $http.get('http://api.douban.com/v2/movie/top250?start=25&count=25').success(function (data) {
            $scope.users = data;
        });
    });

    POST 与 GET 简写方法格式:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $http.get('/someUrl', config).then(successCallback, errorCallback);
    $http.post('/someUrl', data, config).then(successCallback, errorCallback);
    //更多。。。
    $http.get
    $http.head
    $http.post
    $http.put
    $http.delete
    $http.jsonp
    $http.patch

    $http服务提供的实现极为简单和低级,可以用来发送XHR请求,同时它还为你提供了很大的可控性和灵活性。但是,在大多数情况下,我们需要处理对象,以及封装了特定属性和方法的对象模型,例如一个person对象(带有详细信息),或者一个信用卡对象。

    $resource(angular-resource.min.js)就是为这一功能而设计的。AngularJS中的resource(资源)允许我们用描述性的方式来定义对象模型

    如何跨域进行jsonp请求数据

    1
    2
    3
    4
    5
    6
    7
    var app = angular.module('myApp', []);
    app.controller('ajaxCtrl', function ($scope, $http) {
        $http.jsonp("https://dfttdetail.dftoutiao.com/newsmore_h5detail/newspool?jsonpcallback=JSON_CALLBACK").success(
            function (data) {
                console.log('jsonp', data)
            });
    });

    重点:参数为callback=JSON_CALLBACK,angular会自动为你替换你的JSON_CALLBACK(固定值)并分配callbackName。否则你能请求到数据,但无法走进sccess里面,是因为没有触发angular为你设置的callback

    「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

    赞(0) 打赏

    谢谢你请我吃鸡腿*^_^*

    支付宝
    微信
    0

    谢谢你请我吃鸡腿*^_^*

    支付宝
    微信
    标签:

    上一篇:

    下一篇:

    你可能感兴趣

    共有 0 条评论 - angular1.2通过$http请求数据及跨域(兼容IE8)

    博客简介

    唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与,主题源码 

    精彩评论

    友情链接

    他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

    站点统计

    • 文章总数: 238 篇
    • 草稿数目: 0 篇
    • 分类数目: 15 个
    • 独立页面: 6 个
    • 评论总数: 863 条
    • 链接总数: 14 个
    • 标签总数: 429 个
    • 建站时间: 1041 天
    • 注册用户: 2886 人
    • 访问总量: 8669081 次
    • 最近更新: 2019年10月21日
    服务热线:
     173xxxx7240

     QQ在线交流

     旺旺在线