angularJS与服务器端的交互
来源:互联网 发布:成龙女儿知乎 编辑:程序博客网 时间:2024/06/04 23:24
与服务器端的交互
在开发中与服务器的交互是必不可少的,如果所使用原生JavaScript,我们一般会使用AJAX的方式,初始化XHR对象,调用对象的send方法发送请求,并以异步的方式获取返回的内容,我在 ajax发送异步请求从入门到精通 一文中有详细的讲解怎么使用ajax来发送请求,这里着重分析一下angualrJS的请求方式。
对angualrJS来说,他封装了许多的服务模块,供开发者与服务器端交互时调用,如 $http 和 $resource 等
内置服务 $http
使用内置的 $http 服务直接同外部进行通信。$http 其实只是简单的封装了浏览器原生的 XMLHttpRequest 对象。
$http 只能接收一个参数,这个参数是一个对象,包括了用来生成 http请求的配置内容。这个函数返回一个promise对象,具有success 和error两个方法
注意点:
① 在1.6版本中,已经取消了 $http的 success() 和 error()方法,改用then() 和 catch()代替。
② $http发送post 和 get请求的不同点:请求头和请求参数格式
③$http 的 jsonp 跨域 不是ajax。
④ jsonp 是利用 script标签的 src属性来发送请求,不是 利用 XHR对象。
利用 $http 服务发送一个 GET请求
var app = angular.module("send",[]); app.controller("ajaxController",['$scope','$http',function ($scope,$http) { $http({ url:'sendGet.php', method:'get', params:{ name:"zhang", age:12 } }).then(function (res) { console.log(res); }).catch(function (e) { console.log(e); }) }])
sendGet.php文件:
<?php$name = $_GET['name']; //获取发送的name$age = $_GET['age']; //获取发送的age$arr = array($name);array_push($arr,$age); //添加到数组中$str = json_encode($arr);echo $str; //输出 这个json串
在上面的例子中,采用$http服务发送了一个get请求,由于$http返回一个promise对象,我们可以在响应时用then方法来处理回调,这里我们要注意then()会接收到完整的响应对象,但是而success()和error()则会对响应对象进行析构。
打印出来的res 为:
angularJS传递给 then() 方法的响应对象包含四个属性:
- data:代表转换后的响应体
- status:响应的HTTP状态码
- headers:头信息的getter函数,可以接受一个参数,用来获取对应名字的值。
- cofig:用来生成原始请求的完整设置对象
- statusText:响应的HTTP状态文本
即如果我们需要取到返回的数据,采用 res.data 来获取。
当在1.6以下版本,使用success() 和 error()来处理响应
$http({ url:'sendGet.php', method:'get', params:{ name:"zhang", age:12 } }).success(function (res) { console.log(res); }).error(function (e) { console.log(e); })
$http发送 post请求
var app = angular.module("send",[]); app.controller("ajaxController",['$scope','$http',function ($scope,$http) { $http({ url:'sendPost.php', method:'post', headers:{ 'Content-type':'application/x-www-form-urlencoded' }, data:'name=zhang', }).then(function (res) { console.log(res.data); $scope.result =res.data }) }])注意点:发送post请求和发送get请求有两个主要的不同点:
① 默认情况下,服务器的请求头是Content-Type': 'application/x-www-form-urlencoded',也就是数据传递的形式类似这样:name=a&id=1。但是,在AngularJS中默认的请求头是:“Content-Type":"application/json",也就是说传递参数是使用的就是json格式({"id":"1","name":"a"})。 所以,在这样的情况 下服务器接收到的数据就会是空的 。 解决方法就是设置请求头: headers:{ 'Content-type' : ' application /x-www-form-urlencoded'} ,
② 发送数据格式不同,data :‘name = zhang’
sendPost.php文件
<?phpecho $_POST['name'];
$http 发送jsonp 请求
$http.jsonp('jsonpFlile.php',{ jsonpCallbackParam: 'jsonCallback' }).then( function (res) { console.log(res.data); })
原理:
- JSONP的原理是通过 <script>标签发起一个GET请求来取代XHR请求。
- JSONP生成一个 <script> 标签并插到DOM中,然后浏览器会接管并向src属性所指向的地址发送请求。
- 当服务器返回请求时,响应结果会被包装成一个JavaScript函数,并由该请求所对应的回调函数调用。
- AngularJS在$http服务中提供了一个JSONP辅助函数 。当支持JSONP的服务器返回数据时,数据会被包装在由AngularJS生成的具名函数 angular.callbacks._0中。
跨域请求是需要服务器端配合的,如果只是一端是完不成跨域的。
jsonpFile.php文件
<?php$fn=$_GET['jsonCallback'];echo $fn.'(2222)';
- angularJS与服务器端的交互
- AngularJS与服务端的交互
- DWR之与服务器端的DWR交互
- android端与服务器端的通信交互
- 手机App客户端与服务器端的交互
- UIWebView 与服务器端的JS交互
- 关于服务器端与客户端的交互
- android客户端与服务器端的简单交互
- Http客户端与服务器端的交互
- android与服务器端交互
- android与服务器端交互
- angularjs与PHP的交互通信问题
- AngularJS与后端php的数据交互
- angularjs与服务器交互
- AngularJS与服务器交互
- AngularJS与服务器端MVC比较
- 客户端与服务器端交互原理
- Android与服务器端数据交互
- PHP命名空间详解。
- 【Java】【内部类】Java 内部类简介
- 常用的正则表达式
- eclipse项目有小红叉,但是找不到在哪里
- 二叉树 逐层遍历
- angularJS与服务器端的交互
- 11个重要的数据库设计原则
- java opencv 获取视频变换矩阵
- 60. Permutation Sequence
- Spring Boot 启动流程详解(一)
- Vim复制粘贴命令
- [一天几个linux命令] whereis
- “玲珑杯”线上赛 Round #15 河南专场 F -- 咸鱼文章
- jQuery操作DOM