AngularJS如何实现与服务器交互？详细步骤与代码分享

AngularJS 作为一款经典的前端 JavaScript 框架，其强大的数据绑定和依赖注入特性，为开发者构建动态 Web 应用提供了便捷的途径，在与服务器交互方面，AngularJS 通过内置的 $http 服务和 $resource 服务，实现了前后端数据的高效通信，本文将围绕这两种核心方式展开分享。

基于 $http 服务的灵活交互

$http 是 AngularJS 最核心的服务之一，它基于 XMLHttpRequest 或 JSONP（跨域场景）实现，支持 GET、POST、PUT、DELETE 等 HTTP 方法，能够满足绝大多数前后端交互需求，其核心优势在于与 AngularJS 生命周期的深度集成，可自动将响应数据包装在 $http 的 success 和 error 回调中，并触发数据绑定更新。

基本使用示例

通过 $http 发起请求时，只需传入配置对象即可，以下是一个 GET 请求的典型代码：

$http.get('/api/users')
  .success(function(data, status, headers, config) {
    // 请求成功，data 为服务器返回的数据
    $scope.users = data;
  })
  .error(function(data, status, headers, config) {
    // 请求失败，data 为错误信息
    console.error('请求失败:', data);
  });

对于 POST 请求，可通过 data 属性传递请求体，并通过 headers 设置请求头：

$http.post('/api/users', {
  name: '张三',
  age: 25
}, {
  headers: {'Content-Type': 'application/json'}
})
.then(function(response) {
  $scope.user = response.data;
});

全局配置与拦截器

在实际项目中,通常需要对所有请求进行统一配置（如设置基础 URL、请求头）或拦截处理（如添加 token、错误处理），AngularJS 允许通过 $httpProvider 进行全局配置：

app.config(function($httpProvider) {
  // 设置基础 URL
  $httpProvider.defaults.baseUrl = '/api';
  // 添加请求拦截器
  $httpProvider.interceptors.push(function($q, $localStorage) {
    return {
      request: function(config) {
        // 为所有请求添加 Authorization 头
        if ($localStorage.token) {
          config.headers.Authorization = 'Bearer ' + $localStorage.token;
        }
        return config;
      },
      responseError: function(rejection) {
        // 统一处理 401 错误
        if (rejection.status === 401) {
          $location.path('/login');
        }
        return $q.reject(rejection);
      }
    };
  });
});

基于 $resource 的 RESTful 风格交互

当项目遵循 RESTful API 设计规范时，AngularJS 提供的 $resource 服务能进一步简化代码。$resource 是对 $http 的高级封装，专门用于操作 RESTful 风格的资源接口，支持默认的 CRUD（增删改查）操作。

定义资源服务

首先需通过 angular-resource 模块引入 $resource，然后定义资源接口：

app.factory('User', function($resource) {
  return $resource('/api/users/:id', {id: '@id'}, {
    update: {method: 'PUT'} // 自定义更新方法
  });
});

上述代码中,/api/users/:id 是资源 URL 模板，id 为参数占位符，{id: '@id'} 表示将返回数据中的 id 字段作为 URL 参数。

调用资源方法

定义资源后,可直接调用其内置方法进行数据操作：

// 获取用户列表（GET /api/users）
User.query(function(users) {
  $scope.users = users;
});
// 获取单个用户（GET /api/users/1）
User.get({id: 1}, function(user) {
  $scope.user = user;
});
// 创建用户（POST /api/users）
User.save({}, {name: '李四', age: 30}, function(newUser) {
  console.log('创建成功:', newUser);
});
// 更新用户（PUT /api/users/1）
User.update({id: 1}, {name: '李四更新', age: 31});
// 删除用户（DELETE /api/users/1）
User.delete({id: 1});

交互中的关键注意事项

在实现 AngularJS 与服务器交互时，需重点关注以下问题：

跨域请求处理

当前后端域名不同时,需确保服务器配置了 CORS（跨域资源共享）策略，允许前端域名访问，并设置必要的响应头（如 Access-Control-Allow-Origin）。

数据格式约定

前后端需统一数据格式（通常为 JSON），并在请求头中明确声明（如 application/json），避免因格式不一致导致解析错误。

错误处理机制

完善的错误处理能提升用户体验,除了通过 $http 的 error 回调捕获错误外，还可结合全局拦截器统一处理异常（如网络错误、服务器 500 错误），并友好提示用户。

性能优化

对于频繁请求的数据,可引入缓存机制（如 $http 的 cache 选项），减少重复请求；对于大数据列表，建议采用分页加载，避免一次性渲染导致页面卡顿。

AngularJS 通过 $http 和 $resource 服务为服务器交互提供了灵活且高效的解决方案。$http 适用于复杂的 HTTP 请求场景，支持自定义配置和拦截器；$resource 则专注于 RESTful 资源操作，简化了 CRUD 代码，开发者可根据项目需求选择合适的方式，并结合跨域处理、错误处理、性能优化等最佳实践，构建稳定的前后端交互应用，尽管如今 AngularJS 已逐渐被 Angular 等新框架取代，但其核心思想仍对现代前端开发具有参考价值。