AnglarJSとサーバが相互作用する（4）

7216 ワード

回転:http://itindex.net/detail/50919-angularjs-%E6%9C%8D%E5%8A%A1%E5%99%A8-%E 4%BA%A 4%E 4%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();

簡単で、よく使われていて、いつも繰り返している仕事にとっては、煩雑な仕事です。以上のプロセスを多重化したいなら、パッケージまたはコードライブラリを使うべきです。
AnglarJS XHR APIは、一般的にPromiseと呼ばれるインターフェースを遵守する。XHRは非同期的に呼び出される方法であるため、サービス端末の応答は将来の不確定な時点で返ってきます。Promiseインターフェースはこのような応答を処理する方法を定めており、Promiseの利用者は予測可能な方法でそれを使用することができる。
例えば、サービス端末からユーザの情報を取得し、要求を受けるためのバックグラウンドインターフェースが／appi／userパス上にあると仮定して、このインターフェースは、ID属性をURLパラメータとして受け入れることができる。Anglarのコアであるhttpサービスを使用してXHR要求を開始する方法の例は以下の通りである。

$http.get('api/user', {params: {id:'5'}
}).success(function(data, status, headers, config) {
    //          
}).error(function(data, status, headers, config) {
    //    
});

jQueryの利用者なら、AnglarJSとjQueryは非同期要求の処理に非常に似ていることが分かります。
上記の例で使用されるhttp.get方法はAnglarJSの中核サービスであるhttpが提供する多くのショートカット方法の一つである。同様に、AnglarJSを使用して同じ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：文字列またはオブジェクトは、要求データとして送信されます。
タイムアウトを要求する前に待つミリ秒数。

二.HTTPヘッダの設定
AnglarJSはいくつかのデフォルトの要求ヘッダを持ち、Anglarからのすべての要求にはこれらのデフォルトの要求ヘッダ情報が含まれています。デフォルトの要求ヘッダには、以下の2つが含まれています。
1.Accept：appection/json、text/pain、/
2.X-requested-With：XMLHttpRequest
特殊な要求ヘッドを設定したいなら、次の2つの方法で実現できます。
最初の方法は、要求ヘッダを各送信要求に設定したい場合、使用する必要がある特殊要求ヘッダをAnglarJSのデフォルト値に設定することができる。これらの値は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';
});

いくつかの特定の要求に対してのみ要求ヘッダを設定したい場合、それらをデフォルトとして設定しない場合、設定対象の一部としてヘッド情報を送ることができます。同様に、カスタムヘッダ情報は、第二のパラメータの一部としてGET要求にも伝えられます。第二のパラメータは、URLパラメータを同時に受け取ることもできます。

$http.get('api/user', {
     //  Authorization(  ) 。       ，             auth  
     headers: {'Authorization': 'Basic Qzsda231231'},
     params: {id:5}
}).success(function() {//        });

三.キャッシュ応答
HTTP GET要求に対して、AnglarJSはオープン・アンド・キャッシュ・メカニズムを提供しています。デフォルトでは、すべての要求タイプが利用できません。キャッシュを有効にするために、いくつかの設定が必要です。

$http.get('http://server/myapi', {
    cache: true
}).success(function() {//       });

このようにキャッシュを有効にして、AnglarJSはサーバからの応答をキャッシュします。次は同じURLに要求を送信すると、AnglarJSはキャッシュの応答内容に戻ります。キャッシュもスマートですので、同じURLに複数のシミュレーションの要求を送信しても、キャッシュはサーバに一つの要求だけを送信します。そして、サービス端末の応答を受信します。その後、応答の内容はすべての要求に配信される。
しかし、このようにするのはあまり実用的ではないです。ユーザーはキャッシュの古い結果を先に見てから、新しい結果が突然現れます。例えば、ユーザがデータをクリックしようとすると、突然変化する可能性があります。
なお、応答は本質的には（キャッシュから読み取られても）非同期であり、言い換えれば、最初に要求されたときには、非同期要求を処理する方法を用いて符号化されるべきである。

四.変換要求と応答
AnglarJSは、httpサービスを通じて発行されるすべての要求と受信された応答に対して、以下のような基本的な変換を行う。
1.変換要求
要求された配置オブジェクト属性にJSオブジェクトが含まれている場合、このオブジェクトをJSON形式に順序付けます。
2.変換応答
XSRF（Cross Site Request Forgeryの略語が検出された場合、スパン間のシナリオ攻撃の一種の方式である）プレフィクスが検出されたらそのまま廃棄します。JSON応答が検出されたら、JSON解析器を使用してそれを逆序列化します。
いくつかの変換が必要でない場合、または自分で変換したい場合は、設定項目に関数が入ってきます。これらの関数は、HTTPのrequest/reponseとプロトコルヘッダ情報を取得して、プログレッシブ、修正したバージョンを出力します。これらの変換関数は、tranformLrequestとtranformResonsposineをkeyとして構成します。この2つの関数は、モジュールのconfig関数は$httpProviderサービスで構成されています。
私たちはいつこれらのものを使う必要がありますか？もし私たちがサービスを持っているとしたら、jQuery方式で操作するのにもっと適しています。POSTデータはkey 1=val 1&key 2=val 2（つまり文字列）形式を使っています。JSON形式です。このような変換は各要求に加えられます。また、独立したトランスフォームRequestを追加して呼び出すこともできます。この例では、一般的なトランスフォームRequestを追加したいです。このようにすべての要求はJSONから文字列に変換されます。以下のように実現されます。

var module = angular.module('myApp');

module.config(function($httpProvider) {
    $httpProvider.defaults.transformRequest = function(data) {
          //  jQuery param   JSON          
          return $.param(data);
     };
});

Windows 2003/2000の大メモリサポート-ZTをPAEで開く

【Pppetを教えてください】1.7 mcoセットamqのクラスタ