AngularJS“响应式”调用与旧的 AJAX 调用有啥不同？

Posted 2023-02-19

【中文标题】AngularJS“响应式”调用与旧的 AJAX 调用有啥不同？

【英文标题】：Whats different between AngularJS “Responsive” calls vs good old AJAX calls?AngularJS“响应式”调用与旧的 AJAX 调用有什么不同？

【发布时间】：2014-12-10 11:52:33

【问题描述】：

我正在观看angularjs.org 发布的免费互动课程，以学习 Angular，Shaping up with Angular js。

在本课程的第一章，他们说，使用 AngularJS 的主要原因之一是，它可以构建“响应式”网络应用程序。 （我知道“响应式设计”，但那是完全不同的事情），并解释说，使用 Angular，您无需刷新网页即可使用从 Web 服务器获取的数据来更新它（他们告诉您这一点，就像这是全新的技术！）。

我认为这不是我们过去 10 年使用 Ajax 所做的事情吗？或者这是完全不同的东西？

请帮助我理解这一点，因为我是 AngularJS 的新手。

【问题讨论】：

听起来课程的作者只是与流行语混淆了。据我所知，响应式仅用于描述响应式设计。它不同于 Ajax。

是的，这与我们过去 10 年使用 Ajax 所做的事情相同。

我想人们可以将 AJAX 的使用描述为从 UX 角度有效使用时的“响应式”，因为在调用操作时，用户不需要坐下来等待在用户能够做任何其他事情之前重新加载页面。即使操作需要一些时间，UI 的其余部分仍然可以“响应”其他交互。但是，是的，仍然是简单的旧 AJAX，只是包装在框架接口中。我同意这是对术语的潜在误导性使用。

是的，我认为它使用了误导性术语。感谢大家帮助我。

响应式，他的意思是它通过避免整页回发来提供丰富的客户端交互性和用户体验。

【参考方案1】：

在我看来，“Responsive” web apps. 是指根据模型更改 (MVC) 更新 View 的应用程序类型。

Angular 应用程序 UI 充满了观察者。对于在 html 中由 包装的每个变量，Angular 会创建新的观察者，并且当我们在运行此值的代码期间更新时，Angular 会分别使用digest cycle 更新视图。或 ng-repeat 指令，为每个列表项创建单独的范围并添加观察者。

另一方面，在纯 javascript 中，我需要通过 id 找到我的元素并手动更新它。

考虑下面的例子 Fiddle

HTML

<ul>
    <li ng-click="loadGeo()">click 1</li>
</ul>
<ul> <pre>
      data: data|json
    </pre>
</ul>

JS

var app = angular.module('myModule', ['ngResource']);

app.controller('fessCntrl', function ($scope, Data) 

    $scope.data = false;

    $scope.loadGeo = function () 
        Data.query()
            .then(function (result) 
            $scope.data = result.data.results[0];
        , function (result) 
            alert("Error: No data returned");
        );
        
);

app.factory('Data', ['$http', '$q', function ($http, $q) 

    var address = 'Singapore, SG, Singapore, 153 Bukit Batok Street 1';
    var URL = 'http://maps.googleapis.com/maps/api/geocode/json?address=' + address + '&sensor=true';

    var factory = 
        query: function () 
            var data = $http(
                method: 'GET',
                url: URL
            );

            var deferred = $q.defer();
            deferred.resolve(data);
            return deferred.promise;
        
    
    return factory;
]);

一开始我们有空的data:$scope.data = false;

我们点击按钮，从工厂获取地理数据并使用地理输出填充data。我们的 GUI 更新无需任何额外代码。

我将这种方法称为“Responsive” web app

---

我建议您阅读 Josh David Miller 撰写的这篇精彩文章：

how-do-i-think-in-angularjs-if-i-have-a-jquery-background

【讨论】：

同意，但它又是 ajax 调用，它封装在一个 Javascript 框架 (AngularJS) 中，它允许开发人员以一种简单、快速和更有条理的方式构建他们的 Web 应用程序，不是吗？