AngularJS如何实现ajax请求？具体方法和示例代码是什么？

AngularJS 作为一款经典的前端 JavaScript 框架，以其数据绑定、依赖注入等特性深受开发者青睐，在 Web 应用开发中，Ajax 请求是实现前后端数据交互的核心技术，AngularJS 提供了多种便捷的方法来处理异步请求，本文将详细介绍这些方法的实现原理、使用场景及最佳实践。

基于 $http 服务的基础请求方法

$http 是 AngularJS 内置的核心服务，基于浏览器的 XMLHttpRequest 对象或 JSONP 实现，是处理 Ajax 请求最常用的方式，它支持 GET、POST、PUT、DELETE 等多种 HTTP 方法，且返回一个 Promise 对象，便于链式调用和异步处理。

GET 请求示例

GET 请求常用于从服务器获取数据，AngularJS 中通过 $http.get() 方法实现，假设需要获取用户列表，代码如下：

app.controller('UserController', function($scope, $http) {
  $http.get('/api/users')
    .then(function(response) {
      // 请求成功，response.data 包含服务器返回的数据
      $scope.users = response.data;
    }, function(error) {
      // 请求失败，error 对象包含错误信息
      console.error('获取用户列表失败:', error);
    });
});

POST 请求示例

POST 请求用于向服务器提交数据，通常用于创建资源，通过 $http.post() 方法实现，需传递请求体数据：

app.controller('PostController', function($scope, $http) {
  $scope.newPost = { title: 'AngularJS Ajax', content: '示例内容' };
  $http.post('/api/posts', $scope.newPost)
    .then(function(response) {
      $scope.message = '文章创建成功！';
      $scope.posts.push(response.data);
    }, function(error) {
      console.error('创建文章失败:', error);
    });
});

其他 HTTP 方法

AngularJS 还支持 $http.put()（更新资源）、$http.delete()（删除资源）等方法，用法与 POST 类似，只需指定正确的 HTTP 方法名和请求参数。

$http 配置项与全局设置

在实际开发中,可能需要对请求进行统一配置，如设置请求头、处理跨域、配置超时时间等，AngularJS 允许通过 $httpProvider 或 $http 的配置对象实现。

单次请求配置

在调用 $http 方法时，可通过第二个参数传递配置对象：

$http.get('/api/data', {
  timeout: 5000, // 设置超时时间为 5 秒
  headers: {
    'Authorization': 'Bearer token123',
    'Content-Type': 'application/json'
  }
});

全局配置

通过 app.config() 方法配置 $httpProvider，可对所有请求生效：

app.config(function($httpProvider) {
  // 设置默认请求头
  $httpProvider.defaults.headers.common['Authorization'] = 'Bearer token123';
  // 配置拦截器
  $httpProvider.interceptors.push(function($q, $injector) {
    return {
      request: function(config) {
        // 请求发送前拦截，可修改配置
        console.log('请求发送:', config.url);
        return config;
      },
      responseError: function(rejection) {
        // 响应错误拦截，统一处理错误
        if (rejection.status === 401) {
          // 未登录，跳转到登录页
          $injector.get('$state').go('login');
        }
        return $q.reject(rejection);
      }
    };
  });
});

常用配置项说明

$http 拦截器的进阶应用

拦截器是 AngularJS 中强大的功能，允许在请求发送前、响应返回后或发生错误时进行统一处理，例如添加 token、统一错误提示、日志记录等。

创建拦截器

拦截器是一个返回配置对象的函数,需实现 request、requestError、response、responseError 四个方法中的一个或多个：

app.factory('authInterceptor', function($q, $window) {
  return {
    request: function(config) {
      // 从本地存储获取 token 并添加到请求头
      var token = $window.localStorage.getItem('token');
      if (token) {
        config.headers.Authorization = 'Bearer ' + token;
      }
      return config;
    },
    responseError: function(rejection) {
      // 处理 401 错误（token 过期）
      if (rejection.status === 401) {
        $window.localStorage.removeItem('token');
        $window.location.href = '/login';
      }
      return $q.reject(rejection);
    }
  };
});
// 注册拦截器
app.config(function($httpProvider) {
  $httpProvider.interceptors.push('authInterceptor');
});

基于 $resource 的 RESTful 请求简化

对于 RESTful API 的调用，AngularJS 提供了 $resource 模块，进一步简化了 CRUD（创建、读取、更新、删除）操作的使用。$resource 是 $http 的高级封装，支持将资源映射为可直接调用的方法。

引入 $resource 模块

需在 AngularJS 应用中引入 angular-resource.js 文件，并依赖 ngResource 模块：

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

定义资源服务

通过 $resource 定义资源，并调用其方法：

app.factory('User', function($resource) {
  return $resource('/api/users/:id', { id: '@id' }, {
    update: { method: 'PUT' } // 自定义更新方法
  });
});
app.controller('UserController', function($scope, User) {
  // 获取用户列表（GET /api/users）
  User.query(function(users) {
    $scope.users = users;
  });
  // 获取单个用户（GET /api/users/:id）
  User.get({ id: 123 }, function(user) {
    $scope.user = user;
  });
  // 创建用户（POST /api/users）
  $scope.createUser = function() {
    User.save({ name: 'New User' }, function(response) {
      console.log('用户创建成功:', response);
    });
  };
  // 更新用户（PUT /api/users/:id）
  $scope.updateUser = function(user) {
    user.$update(function(response) {
      console.log('用户更新成功:', response);
    });
  };
  // 删除用户（DELETE /api/users/:id）
  $scope.deleteUser = function(id) {
    User.delete({ id: id }, function() {
      console.log('用户删除成功');
    });
  };
});

$resource 方法说明

错误处理与最佳实践

统一错误处理

通过拦截器或 Promise 的 catch 方法统一处理错误，避免在多个控制器中重复编写错误逻辑：

$http.get('/api/data')
  .then(function(response) {
    $scope.data = response.data;
  })
  .catch(function(error) {
    $scope.error = '加载数据失败，请稍后重试';
    console.error(error);
  });

避免内存泄漏

在控制器销毁时（如路由切换），需取消未完成的 $http 请求，尤其是在请求设置了较长的超时时间时：

app.controller('DataController', function($scope, $http, $q) {
  var canceler = $q.defer();
  $http.get('/api/data', { timeout: canceler.promise })
    .then(function(response) {
      $scope.data = response.data;
    });
  // 控制器销毁时取消请求
  $scope.$on('$destroy', function() {
    canceler.resolve();
  });
});

安全性注意事项

• 避免直接将用户输入拼接到 URL 中，防止 XSS 攻击，优先使用 params 配置传递查询参数。
• 敏感信息（如 token）应通过 HTTP 请求头或 HTTPS 传输，而非 URL 参数。
• 对服务器返回的数据进行过滤和验证,避免直接渲染未处理的内容。

AngularJS 提供了从基础 $http 服务到高级 $resource 模块的完整 Ajax 请求解决方案，开发者可根据项目需求选择合适的方式。$http 灵活且功能全面，适合复杂的请求场景；$resource 则通过封装简化了 RESTful API 的调用，结合拦截器统一处理请求配置、错误处理和安全性问题，可构建高效、可维护的前端应用，在实际开发中，需注意错误处理、内存泄漏和安全性，确保应用的稳定与安全。