AngularJS与服务器交互(4)
转自:http://itindex.net/detail/50919-angularjs-%E6%9C%8D%E5%8A%A1%E5%99%A8-%E4%BA%A4%E4%BA%92
对于AJAX应用(使用XMLHttpRequests)来说,向服务器发起请求的传统方式是:获取一个XMLHttpRequest对象的引用、发起请求、读取响应、检查状态码,最后处理服务端的响应。整个过程示例如下:
var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() {if(xmlhttp.readystate == 4 && xmlhttp.status == 200) {var response = xmlhttp.responseText;}else if(xmlhttp.status == 400) { //或者可以是任何以4开头的状态码//优雅地处理错误} };//建立连接 xmlhttp.open("GET", "http://myserver/api", true);//发起请求 xmlhttp.send();
对于简单、常用而且会经常重复的任务来说,这是一种很烦琐的工作。如果你想复用以上过程,你应该进行封装或者使用代码库。
AngularJS XHR API遵守一种通常被称为Promise的接口。由于XHR是异步调用的方法,所以服务端的响应会在未来某个不确定的时间点上返回(我们希望它立即能返回)。Promise接口规定了处理这种响应的方式,并且允许Promise的使用者以一种可预见的方式来使用它。
例如,我们要从服务端获取一个用户的信息,假设用来接受请求的后台接口位于/api/user路径上,此接口可以接受一个id属性作为URL参数,那么使用Angular的核心$http服务发起XHR请求的方法示例如下:
$http.get('api/user', {params: {id:'5'} }).success(function(data, status, headers, config) {//加载成功之后做一些事 }).error(function(data, status, headers, config) {//处理错误 });
如果你是jQuery使用者,你应该会发现,AngularJS和jQuery在对异步请求的处理方面非常类似。
上面例子中使用的$http.get方法是AngularJS的核心服务$http所提供的众多快捷方法之一。类似地,如果你想使用AngularJS向同一个URL发送POST请求,同时带上一些POST数据,你可以像下面这样做:
var postData = {text:'long blob of text'}; //下面这一行会被当成参数附加到URL后面,所以post请求最终会变成/api/user?id=5 var config = {params: {id: '5'}}; $http.post('api/user', postData, config ).success(function(data, status, headers, config) {//成功之后做一些事情 }).error(function(data, status, headers, config) {//处理错误 });
对于大多数常用的请求类型,都有类似的快捷方法,这些请求类型包括:GET、HEAD、POST、DELETE、PUT、JSONP。
一.进一步配置请求
虽然标准的请求方式使用起来比较简单,但是,有时候会存在可配置性不佳的缺点。如果你想要实现下面这些事情就会遇到困难:
a.给请求加上一些授权头。
b.修改对缓存的处理方式。
c.用一些特殊的方式来变换发送出去的请求,或者变换接收到的响应。
在这些情况下,你可以给请求传递一个可选的配置对象,从而对请求进行深度配置。在前面的例子中,我们使用config对象指定了一个可选的URL参数。但是那里的GET和POST方法是一些快捷方式。这种深度简化之后的方法调用示例如下:
$http(config)
下面是一个基本的伪代码模板,用来调用前面的这个方法:
$http({method: string,url: string,params: object,data: string or object,headers: object,transformRequest: function transform(data, headersGetter) or an array of functions,transformResponse: function transform(data, headersGetter) or an array of functions,cache: boolean or Cache object,timeout: number,withCredentials: boolean });
GET、POST及其他快捷方法都会自动设置method参数,所以不需要手动设置。config对象会作为最后一个参数传递给$http.get和$http.post,所以,在所有的快捷方法内部都可以使用这个参数。你可以传递config对象来修改发送的请求,config对象可以设置以下键值。
method:一个字符串,表示HTTP请求的类型,例如GET或者POST。
url:URL字符串,表示请求的绝对或者相对资源路径。
params:一个键和值都是字符串的对象(确切来说是一个map),表示需要转换成URL参数的键和值。例如:
[{key1: 'value1', key2: 'value2'}]
将会被转换成
?key1=value&key2=value2
并会被附加到URL后面。如果我们使用js对象(而不是字符串或者数值)作为map中的值,那么这个js对象会被转换成JSON字符串。
data:一个字符串或者对象,它会被当作请求数据发送。
timeout:在请求超时之前需要等待的毫秒数。
二.设置HTTP头
AngularJS带有一些默认的请求头,Angular发出的所有请求上都会带有这些默认的请求头信息。默认请求头包括以下两个:
1.Accept:appliction/json,text/pain,/
2.X-Requested-With: XMLHttpRequest
如果想设置特殊的请求头,可以用如下两种方法实现。
第一种方法,如果你想把请求头设置到每一个发送出去的请求上,那么你可以把需要使用的特殊请求头设置成AngularJS的默认值。这些值可以通过$httpProvider.defaults.headers配置对象来设置,通常会在应用的配置部分来做这件事情。所以,如果你想对所有的GET请求使用“DO NOT TRACK"头,同时对所有请求删除Requested-With头,可以简单地操作如下:
angular.module('MyApp', []).config(function($httpProvider) {//删除AngularJS默认的X-Request-With头delete $httpProvider.default.headers.common['X-Requested-With'];//为所有GET请求设置DO NOT TRACK$httpProvider.default.headers.get['DNT'] = '1'; });
如果你只想对某些特定的请求设置请求头,但不把它们作为默认值,那么你可以把头信息作为配置对象的一部分传递给$http服务。同样的,自定义头信息也可以作为第二个参数的一部分传递给GET请求,第二个参数还可以同时接受URL参数。
$http.get('api/user', {//设置Authorization(授权)头。在真实的应用中,你需要到一个服务里面去获取auth令牌headers: {'Authorization': 'Basic Qzsda231231'},params: {id:5} }).success(function() {//处理成功的情况 });
三.缓存响应
对于HTTP GET请求,AngularJS提供了一个开箱即用的简单缓存机制。默认情况下它对所有请求类型都不可用,为了启用缓存,你需要做一些配置:
$http.get('http://server/myapi', {cache: true }).success(function() {//处理成功的情况});
这样就可以启用缓存,然后AngularJS将会缓存来自服务器的响应。下一次向同一个URL发送请求的时候,AngularJS将会返回缓存中的响应内容。缓存也是智能的,所以即使你向同一个URL发送多次模拟的请求,缓存也只会向服务器发送一个请求,而且在收到服务端的响应之后,响应的内容会被分发给所有请求。
但是,这样做有些不太实用,因为用户会先看到缓存的旧结果,然后看到新的结果突然出现。例如,当用户即将点击一条数据时,它可能会突然发生变化。
注意,从本质上来说,响应(即使是从缓存中读取的)依然是异步的。换句话说,在第一次发出请求的时候,你应该使用处理异步请求的方式来编码。
四.转换请求和响应
对于所有通过$http服务发出的请求和收到的响应来说,AngularJS都会进行一些基本的转换,包括如下内容。
1.转换请求
如果请求的配置对象属性中包含JS对象,那么就把这个对象序列化成JSON格式。
2.转换响应
如果检测到了XSRF(Cross Site Request Forgery的缩写,意为跨站请求伪造,这是跨站脚本攻击的一种方式)前缀,则直接丢弃。如果检测到了JSON响应,则使用JSON解析器对它进行反序列化。
如果你不需要其中的某些转换,或者想自已进行转换,可以在配置项里面传入自已的函数。这些函数会获取HTTP的request/response体以及协议头信息,然后输出序列化、修改之后的版本。可以使用transformLRequest和transformResponse作为key来配置这些转换函数,而这两个函数在模块的config函数中是用$httpProvider服务来配置的。
我们什么时候需要使用这些东西呢?假设我们有一个服务,它更适合用jQuery的方式来操作。POST数据使用key1=val1&key2=val2(也就是字符串)形式来代替{key1:val1, key2:val2}JSON格式。我们可以在每个请求中来进行这种转换,也可以添加一个独立transformRequest调用,对于当前这个例子来说,我们打算添加一个通用的transformRequest,这样所有发出的请求都会进行这种从JSON到字符串的转换。下面就是实现方式:
var module = angular.module('myApp');module.config(function($httpProvider) {$httpProvider.defaults.transformRequest = function(data) {//使用jQuery的param方法把JSON数据转换成字符串形式return $.param(data);}; });
转载于:https://www.cnblogs.com/tianxue/p/4173773.html
AngularJS与服务器交互(4)相关推荐
- kazoo源码分析:服务器交互的实现细节
kazoo源码分析 kazoo-2.6.1 kazoo客户端与服务器概述 上文start概述中,只是简单的概述了kazoo客户端初始化之后,调用了start方法,本文继续详细的了解相关的细节. kaz ...
- 与服务器交互的分页组件PageComponent
2019独角兽企业重金招聘Python工程师标准>>> Ext.define('tools.PageComponent', {extend : 'Ext.Container',req ...
- 你还不会小程序啊?手把手带你做第一个和服务器交互的小程序
2017年的时候,腾讯推出了微信小程序,当时火的一塌糊涂,圈子里几乎所有的程序员都在讨论小程序的话题:随着腾讯对小程序的功的逐步开放,2018年,尤其是在微信首页下拉增加小程序入口之后,小程序正式爆发 ...
- Android 使用JSON格式与服务器交互 中文乱码问题解决
Android 使用JSON格式与服务器交互 中文乱码问题解决 参考文章: (1)Android 使用JSON格式与服务器交互 中文乱码问题解决 (2)https://www.cnblogs.com/ ...
- Android之使用HttpPost提交数据到服务器(Android手机客户端和后台服务器交互)
这是一个小型的数据交互案例,即Android手机客户端和后台服务器交互(数据库mysql) 服务器端 首先服务器端数据库(用户名root密码123456),db_student.sql数据库表user ...
- 系统服务器与手机关系,手机与云服务器交互
手机与云服务器交互 内容精选 换一换 购买弹性云服务器选错镜像,可以通过云平台的"切换操作系统"功能更换镜像.选择待切换操作系统的弹性云服务器,单击弹性云服务器列表左上角的&quo ...
- 客户端与服务器交互的功能,如何进行测试?
测试客户端与服务器交互的功能,如何进行测试,需要考虑哪些内容呢?下面我们分阶段来说明一下~ 测试沟通阶段 需要跟客户端和服务器端开发沟通,确定客户端发送请求的样式,需要包含哪些参数值,参数值具体有什么 ...
- wml 与服务器交互
虽然我们已经可以开发wml的应用了,但是这些毕竟都是些静态的内容.如果我们要开发和服务器交互的功能呢?答案当然是我们可以使用Servlet技术.看下面的例子: <?xml version='1. ...
- 如何使用Ajax进行与服务器交互
@如何使用Ajax 如何使用Ajax进行与服务器交互 AJAX全称为"Asynchronous [ei'siŋkrənəs] JavaScript and XML"(异步JavaS ...
- AutoPostBack属性值为True和False的含义 (即为和不和服务器交互)
AutoPostBack属性值为True和False的含义 检举 | 2010-6-3 17:22 提问者:一过眼云烟一 许多控件都有AutoPostBack属性,请分别解释该属性值为True和Fal ...
最新文章
- 在CentOS 6.6 64bit上编译安装LLVM3.7,Clang,Libc++和libc++abi
- PHP中几种加密形式
- Oracle 权限介绍及管理
- SAP 电商云 Spartacus UI Checkout 页面的三个 page guards
- 哪里学php开发,哪里学web开发
- Ubuntu 16.04 下修改免安裝版tomcat的內存大小
- 1910101811-2
- C#全局钩子和局部钩子记录
- 用php做的图书管管理系统,PHP自习室图书馆座位管理系统
- 递归算法经典实例python-python-动态规划的递归、非递归实现
- 2019蓝桥杯决赛Java_2019年蓝桥杯省赛总结
- 数据库备份的三种方式 不要再干掉数据库跑路啦~
- 大大学校园计算机市场分析,Acer笔记本计算机营销策略分析以大学生市场为例.doc...
- matlab读取数据流,【OpenBCI】(1):Matlab实时读取数据流(labstreaminglayer)
- 4g物联网模块dtu网络远程开关控制器485通讯 工业级TTL转4G串口服务器 全网通路由模块 通信通讯模组 二次开发
- laravel-excel使用(老猫包子店的故事)
- 学计算机需要什么基础?
- html 中 block、inline-block 都有哪些?都有什么样的特性?
- 前端面试日记(6)陌陌
- 2015百度沸点榜单
热门文章
- android 串口调试数据手机收不到,记录一次安卓串口一次接收全部数据时,发生的错误...
- razor读取mysql_MVC 数据库增删改查(Razor)方法(1)和数据库
- html播放器加选集,推荐:非常详细的网页播放器之代码篇(精选集一)
- fedora arm linux gcc,fedora17中安装arm-linux-gcc交叉编译器.doc
- java基础总结07-异常
- 十二、Object类
- CRT中的sftp上传文件出现中文路乱码
- 阶段3 1.Mybatis_09.Mybatis的多表操作_4 完成account一对一操作-建立实体类关系的方式...
- 阶段1 语言基础+高级_1-3-Java语言高级_08-JDK8新特性_第3节 两种获取Stream流的方式_5_Stream流中的常用方法_map...
- 编程之美 1.4买书问题常数时间空间解法