Angular中$http服务与$.ajax服务的差异比较

引言

AngularJS作为一个开源的前端框架，它的$http服务和jQuery中的$.ajax服务有很多相似之处，但也存在很多区别。本文将详细比较这两种服务的差异，并提供指导意义和实际示例代码。

语法和使用

$.ajax

$.ajax()方法是jQuery库中 AJAX 的核心函数，在jQuery中非常常用，经常用来向服务器请求数据。使用jQuery中的$.ajax()方法需要传入以下参数：

// javascriptcn.com 代码示例
$.ajax({
  url: "/api/getUserInfo", // 请求url
  type: "GET", // 请求方式（GET或POST）
  data: { // 发送给服务器的数据
    username: "test",
    password: "123456"
  },
  dataType: "json", // 接收服务器返回的数据的格式
  success: function(response){ // 成功的回调函数
    console.log(response);
  },
  error: function(xhr){ // 失败的回调函数
    console.log(xhr);
  }
});

$http

$http服务是AngularJS中的一个核心服务，它封装了XMLHttpRequest对象，提供了更加简洁易用的API。使用$http服务需要传入以下参数：

// javascriptcn.com 代码示例
$http({
  method: 'GET', // 请求方式（GET或POST）
  url: '/api/getUserInfo', // 请求url
  params: { // 发送给服务器的数据
    username: 'test',
    password: '123456'
  }
}).then(function successCallback(response) { // 成功的回调函数
  console.log(response);
}, function errorCallback(response) { // 失败的回调函数
  console.log(response);
});

参数传递方式

$.ajax

$.ajax()方法的参数传递可以使用data属性来传递参数，也可以通过url属性将参数放在url上。比如：

// javascriptcn.com 代码示例
// data属性传递参数
$.ajax({
  url: "/api/getUserInfo",
  type: "GET",
  data: {
    username: "test",
    password: "123456"
  },
});

// url属性传递参数
$.ajax({
  url: "/api/getUserInfo?username=test&password=123456",
  type: "GET"
});

$http

$http服务的参数传递方式也有两种，第一种是通过params属性传递参数，第二种是通过data属性传递参数。比如：

// javascriptcn.com 代码示例
// params属性传递参数
$http({
  method: 'GET',
  url: '/api/getUserInfo',
  params: {
    username: 'test',
    password: '123456'
  }
});

// data属性传递参数
$http({
  method: 'POST',
  url: '/api/getUserInfo',
  data: {
    username: 'test',
    password: '123456'
  }
});

请求头设置

$.ajax

$.ajax()方法可以通过headers属性来设置请求头，比如：

// javascriptcn.com 代码示例
$.ajax({
  url: "/api/getUserInfo",
  type: "GET",
  data: {
    username: "test",
    password: "123456"
  },
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/json'
  }
});

$http

$http服务可以通过headers属性来设置请求头，比如：

// javascriptcn.com 代码示例
$http({
  method: 'GET',
  url: '/api/getUserInfo',
  params: {
    username: 'test',
    password: '123456'
  },
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/json'
  }
});

数据类型

$.ajax

$.ajax()方法可以通过dataType属性来设置接收服务器返回的数据的格式，常见的格式有html、json、xml等。比如：

// javascriptcn.com 代码示例
$.ajax({
  url: "/api/getUserInfo",
  type: "GET",
  data: {
    username: "test",
    password: "123456"
  },
  dataType: "json"
});

$http

$http服务可以通过responseType属性来设置接收服务器返回的数据的格式，常见的格式有json、text、blob、arraybuffer等。比如：

// javascriptcn.com 代码示例
$http({
  method: 'GET',
  url: '/api/getUserInfo',
  params: {
    username: 'test',
    password: '123456'
  },
  responseType: 'json'
});

取消请求

$.ajax

在使用$.ajax()方法发送异步请求后，如果需要取消这个请求，可以调用该方法返回一个XMLHttpRequest对象，然后使用.abort()方法取消该请求。比如：

// javascriptcn.com 代码示例
var xhr = $.ajax({
  url: "/api/getUserInfo",
  type: "GET",
  data: {
    username: "test",
    password: "123456"
  },
  dataType: "json"
});

xhr.abort();

$http

在使用$http服务发送异步请求后，如果需要取消这个请求，可以调用该服务返回的promise对象的cancel()方法。比如：

// javascriptcn.com 代码示例
var canceler = $q.defer();

$http({
  method: 'GET',
  url: '/api/getUserInfo',
  params: {
    username: 'test',
    password: '123456'
  },
  timeout: canceler.promise
}).then(function successCallback(response) { // 成功的回调函数
  console.log(response);
}, function errorCallback(response) { // 失败的回调函数
  console.log(response);
});

canceler.resolve();

总结

综上所述，$.ajax方法和$http服务都是前端中发送异步请求的工具，但它们之间的使用和处理有很多方面的不同，需要根据具体的场景进行选择。比如，当我们需要取消请求时，$http服务的方式更为简单。当我们需要处理RESTful API时，$http服务的支持更好。在使用AngularJS时，我们更愿意使用$http服务，因为它更加透明，可以很好地集成到AngularJS的作用域内。

示例代码

示例代码使用了Node.js和Express框架进行本地搭建，需要先安装Node.js和Express框架。

server.js

// javascriptcn.com 代码示例
const express = require('express');
const app = express();

app.get('/api/getUserInfo', (req, res) => {
  const username = req.query.username;
  const password = req.query.password;

  if(username === 'test' && password === '123456'){
    res.json({ success: true, message: '登录成功' });
  }else{
    res.json({ success: false, message: '用户名或密码不正确' });
  }
});

app.listen(3000, () => console.log('Express server is running on port 3000.'));

index.html

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  <script>
    var app = angular.module('myApp', []);

    // 使用$http服务发送请求
    app.controller('MyCtrl1', function($http){
      var vm = this;

      vm.username = '';
      vm.password = '';

      vm.login = function(){
        $http({
          method: 'GET',
          url: '/api/getUserInfo',
          params: {
            username: vm.username,
            password: vm.password
          }
        }).then(function successCallback(response) {
          console.log(response.data);
        }, function errorCallback(response) {
          console.log(response.data);
        });
      }
    });

    // 使用$.ajax方法发送请求
    app.controller('MyCtrl2', function(){
      var vm = this;

      vm.username = '';
      vm.password = '';

      vm.login = function(){
        $.ajax({
          url: "/api/getUserInfo",
          type: "GET",
          data: {
            username: vm.username,
            password: vm.password
          },
          dataType: "json",
          success: function(response){
            console.log(response);
          },
          error: function(xhr){
            console.log(xhr);
          }
        });
      }
    });
  </script>
</head>
<body ng-controller="MyCtrl1 as vm1;MyCtrl2 as vm2">
  <h3>使用$http服务发送请求</h3>
  <form>
    <label>用户名：</label>
    <input type="text" ng-model="vm1.username" /><br />
    <label>密码：</label>
    <input type="password" ng-model="vm1.password" /><br />
    <input type="button" ng-click="vm1.login()" value="登录" />
  </form>

  <br/><br/>

  <h3>使用$.ajax方法发送请求</h3>
  <form>
    <label>用户名：</label>
    <input type="text" ng-model="vm2.username" /><br />
    <label>密码：</label>
    <input type="password" ng-model="vm2.password" /><br />
    <input type="button" ng-click="vm2.login()" value="登录" />
  </form>
</body>
</html>

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653b20ed7d4982a6eb5730e5