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 方法时，可通过第二个参数传递配置对象：

全局配置

通过 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 的调用，结合拦截器统一处理请求配置、错误处理和安全性问题，可构建高效、可维护的前端应用，在实际开发中，需注意错误处理、内存泄漏和安全性，确保应用的稳定与安全。