引言
AngularJS作为一个开源的前端框架，它的$http服务和jQuery中的$.ajax服务有很多相似之处，但也存在很多区别。本文将详细比较这两种服务的差异，并提供指导意义和实际示例代码。
语法和使用
$.ajax
$.ajax()方法是jQuery库中 AJAX 的核心函数，在jQuery中非常常用，经常用来向服务器请求数据。使用jQuery中的$.ajax()方法需要传入以下参数：
-- -------------------- ---- -------
--------
---- ------------------- -- -----
----- ------ -- --------------
----- - -- ---------
--------- -------
--------- --------
--
--------- ------- -- -------------
-------- ------------------- -- -------
----------------------
--
------ -------------- -- -------
-----------------
-
---$http
$http服务是AngularJS中的一个核心服务，它封装了XMLHttpRequest对象，提供了更加简洁易用的API。使用$http服务需要传入以下参数：
-- -------------------- ---- -------
-------
------- ------ -- --------------
---- ------------------- -- -----
------- - -- ---------
--------- -------
--------- --------
-
---------------- ------------------------- - -- -------
----------------------
-- -------- ----------------------- - -- -------
----------------------
---参数传递方式
$.ajax
$.ajax()方法的参数传递可以使用data属性来传递参数，也可以通过url属性将参数放在url上。比如：
-- -------------------- ---- -------
-- ----------
--------
---- -------------------
----- ------
----- -
--------- -------
--------- --------
--
---
-- ---------
--------
---- -------------------------------------------------
----- -----
---$http
$http服务的参数传递方式也有两种，第一种是通过params属性传递参数，第二种是通过data属性传递参数。比如：
-- -------------------- ---- -------
-- ------------
-------
------- ------
---- -------------------
------- -
--------- -------
--------- --------
-
---
-- ----------
-------
------- -------
---- -------------------
----- -
--------- -------
--------- --------
-
---请求头设置
$.ajax
$.ajax()方法可以通过headers属性来设置请求头，比如：
-- -------------------- ---- -------
--------
---- -------------------
----- ------
----- -
--------- -------
--------- --------
--
-------- -
------------------- -----------------
--------------- ------------------
-
---$http
$http服务可以通过headers属性来设置请求头，比如：
-- -------------------- ---- -------
-------
------- ------
---- -------------------
------- -
--------- -------
--------- --------
--
-------- -
------------------- -----------------
--------------- ------------------
-
---数据类型
$.ajax
$.ajax()方法可以通过dataType属性来设置接收服务器返回的数据的格式，常见的格式有html、json、xml等。比如：
-- -------------------- ---- -------
--------
---- -------------------
----- ------
----- -
--------- -------
--------- --------
--
--------- ------
---$http
$http服务可以通过responseType属性来设置接收服务器返回的数据的格式，常见的格式有json、text、blob、arraybuffer等。比如：
-- -------------------- ---- -------
-------
------- ------
---- -------------------
------- -
--------- -------
--------- --------
--
------------- ------
---取消请求
$.ajax
在使用$.ajax()方法发送异步请求后，如果需要取消这个请求，可以调用该方法返回一个XMLHttpRequest对象，然后使用.abort()方法取消该请求。比如：
-- -------------------- ---- -------
--- --- - --------
---- -------------------
----- ------
----- -
--------- -------
--------- --------
--
--------- ------
---
------------$http
在使用$http服务发送异步请求后，如果需要取消这个请求，可以调用该服务返回的promise对象的cancel()方法。比如：
-- -------------------- ---- -------
--- -------- - -----------
-------
------- ------
---- -------------------
------- -
--------- -------
--------- --------
--
-------- ----------------
---------------- ------------------------- - -- -------
----------------------
-- -------- ----------------------- - -- -------
----------------------
---
-------------------总结
综上所述，$.ajax方法和$http服务都是前端中发送异步请求的工具，但它们之间的使用和处理有很多方面的不同，需要根据具体的场景进行选择。比如，当我们需要取消请求时，$http服务的方式更为简单。当我们需要处理RESTful API时，$http服务的支持更好。在使用AngularJS时，我们更愿意使用$http服务，因为它更加透明，可以很好地集成到AngularJS的作用域内。
示例代码
示例代码使用了Node.js和Express框架进行本地搭建，需要先安装Node.js和Express框架。
server.js
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
--------------------------- ----- ---- -- -
----- -------- - -------------------
----- -------- - -------------------
----------- --- ------ -- -------- --- ----------
---------- -------- ----- -------- ------ ---
------
---------- -------- ------ -------- ----------- ---
-
---
---------------- -- -- -------------------- ------ -- ------- -- ---- ---------index.html
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
------------------------
------- ---------------------------------------------------------------------------------
--------
--- --- - ----------------------- ----
-- -------------
------------------------- ----------------
--- -- - -----
----------- - ---
----------- - ---
-------- - -----------
-------
------- ------
---- -------------------
------- -
--------- ------------
--------- -----------
-
---------------- ------------------------- -
---------------------------
-- -------- ----------------------- -
---------------------------
---
-
---
-- --------------
------------------------- -----------
--- -- - -----
----------- - ---
----------- - ---
-------- - -----------
--------
---- -------------------
----- ------
----- -
--------- ------------
--------- -----------
--
--------- -------
-------- -------------------
----------------------
--
------ --------------
-----------------
-
---
-
---
---------
-------
----- ---------------------- -- ----------- -- -----
----------------------
------
-------------------
------ ----------- ----------------------- ----- --
------------------
------ --------------- ----------------------- ----- --
------ ------------- ---------------------- ---------- --
-------
----------
-----------------------
------
-------------------
------ ----------- ----------------------- ----- --
------------------
------ --------------- ----------------------- ----- --
------ ------------- ---------------------- ---------- --
-------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653b20ed7d4982a6eb5730e5