在AngularJS中,与服务器交互的能力同样依赖于XMLHttpRequest对象实现。正如在JS中一样,AngularJS对XMLHttpRequest对象进行了封装,使得开发者能以更优雅的方式与服务器进行Ajax交互。
$http是AngularJS内置的一个Ajax支持的服务。与该服务配套使用的,还有如下常用的服务。
1. $httpParamSerializer:该服务用于将JS对象转换为查询字符串。
2.$httpParamSerializerJQLike:该服务用于将JS对象转换为查询字符串。该服务与上一个服务的细微区别是,它转换为的查询字符串更符合jQuery风格。
3.$xhrFactory:一般不直接使用该服务。当开发者对AngularJS创建的XMLHttpRequest对象的方式不满意时,开发者可替换或修改该服务,从而创建自己的XMLHttpRequest对象.(一般来说,开发者没必要替换或修改$xhrFactory服务。)
接下来我们通过一个例子来看一下上述的服务是如何运用的:
输入用户名
输入密码:
$httpParamSerializer:{{serializer1}}
$httpParamSerializerJQLike:{{serializer2}}
$http服务调用它的构造器即可与服务器交互,调用构造器时只要传入一个JS对象指定与服务器交互的选项即可。该JS对象支持如下属性。(仅列举常用的)
method:该属性指定发送请求的方式,该属性支持GET,POST等请求。
url:该属性指定发送请求的URL地址。
data:该属性指定请求参数。
headers:该属性指定发送请求的请求头。该属性应该是一个JS对象,对象的属性名表示请求头的名,属性值表示请求头的值。
调用$http服务的构造器将会返回一个Promise对象(简单来说就是一个容器,里面保存着在某个未来才会结束的事件的结果,是异步编程的一种解决方案。)接下来程序可调用该对象的then()方法传入resolve、reject回调函数,这两个回调函数相当于Ajax的交互成功、失败的回调函数。两个回调函数都支持一个response参数。下面示例示范了如何使用$http服务与服务器进行交互。
请输入你的信息
接下来是需要搭建服务器以及编写服务器端的脚本,在这里我就不细说了。
$http服务还提供了如下快捷方法与服务器进行交互,这些方法都是对$http的简化。
1.$http.get(url,[config]):发送GET请求的快捷方法
2.$http.head(url,[config]):发送HEAD请求的快捷方法
3.$http.post(url,data,[config]):发送POST请求的快捷方法
4.$http.put(url,data,[config]):发送PUT请求的快捷方法
5.$http.head(url,[config]):发送HEAD请求的快捷方法
6.$http.delete(url,[config]):发送delete请求的快捷方法
7.$http.jsonp(url,[config]):发送JSONP请求的快捷方法
8.$http.patch(url,data,[config]):发送JSONP请求的快捷方法
在这些方法中都可指定一个config参数,该参数的作用和直接使用$http时传入的config参数的作用相同。
下面示范了使用快捷方法$http.post()发送POST请求:
请输入你的信息
使用$http上传文件:
使用$http上传文件有两个关键点:
1.将表单内的文件以二进制的方式提交,这一点可借助于FormData来实现,因此只要在使用$http提交请求时将FormData设为请求参数即可。
2.不能以application/x-www-form-urlencoded方式提交请求,要以multipart/form-data的方式提交请求。实际上提价请求时不能将Content-Type请求头设为multipart/form-data,而是应该将请求头设为undefined,让AngularJS根据请求参数自动添加Content-Type请求头。
下面的代码示范了如何利用$http处理文件上传。
使用$resource服务:
AngularJS还提供了一个ngResource模块,该模块专门用于支持RESTful风格的服务交互。(关于RESTFUL风格:客户端和服务器之间的交互在请求之间是无状态的,无状态的请求可以由任何可用服务器回答,这十分适合云计算之类的环境,客户端可以缓存数据以改进性能)。
由于ngResource模块并不是AngularJS的核心部分,而是一个可选的模块,因此如果需要使用该模块,则需要在页面上单独引用该模块的JS库。
引入该模块之后,接下来即可使用$resource服务了。使用$resource服务大致可分为两步:
1.调用$resource(url,[paramDefaults],[actions],options)构造器创建一个对象。
程序并不直接使用$resource与服务器通信,$resource是一个创建资源对象的工厂,用来创建同服务器端交互的对象。
var CreditCard=$resource('/user/:userId/card/:cardId',{userId:123,cardId:'@id');
以上代码返回的CreditCard对象包含了同后端服务进行交互的方法,因此可将CreditCard对象理解成与RESTful服务通信的接口。
2.调用通信对象的get,save,query,remove,delete方法与服务器交互。eg:{‘get’:{method:'GET'}}
eg:
var CreditCard=$resource('/user/:userId/card/:cardId',{userId:123,cardId:'@id');
var card=CreditCard.get({cardId:20},function(){...});