angularJS与服务器端的交互

与服务器端的交互

        在开发中与服务器的交互是必不可少的，如果所使用原生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文件

<?php
echo $_POST['name'];

$http 发送jsonp 请求

   $http.jsonp('jsonpFlile.php',{
             jsonpCallbackParam: 'jsonCallback'
     }).then(
         function (res) {
             console.log(res.data);
     })

原理：   

1. JSONP的原理是通过 <script>标签发起一个GET请求来取代XHR请求。 
2. JSONP生成一个 <script> 标签并插到DOM中，然后浏览器会接管并向src属性所指向的地址发送请求。
3. 当服务器返回请求时，响应结果会被包装成一个JavaScript函数，并由该请求所对应的回调函数调用。
4.  AngularJS在$http服务中提供了一个JSONP辅助函数 。当支持JSONP的服务器返回数据时，数据会被包装在由AngularJS生成的具名函数 angular.callbacks._0中。

跨域请求是需要服务器端配合的，如果只是一端是完不成跨域的。

jsonpFile.php文件

<?php
$fn=$_GET['jsonCallback'];
echo $fn.'(2222)';

跨域的原理，以及为什么要跨域，在我的 跨域请求 一文中有详细介绍。