Polymer-iron-ajax
提供:Dev Guides
ポリマー-アイアンアヤックス
<iron-ajax>要素は、ajax呼び出しを行うのに役立ちます。
<iron-ajax
auto url = "https://www.googleapis.com/youtube/v3/search"
params = '{"part":"snippet", "q":"polymer", "key": "YOUTUBE_API_KEY", "type": "video"}'
handle-as = "json"
on-response = "handleResponse"
debounce-duration = "500">
</iron-ajax>
*auto* をtrueに設定すると、要素のプロパティ *url、params* 、または *body* が変更されると、要素によって要求が行われます。 ご覧のとおり、コンポーネントにはいくつかの属性があります-
- url -APIエンドポイントへのURLを配置する属性。
- params -JSONをリクエストパラメーターと共に渡すことができる属性。
- handle-as -応答プロパティに保存する必要があるデータを指定します。 デフォルトでは、データはjson形式で保存されます。
- on-response -応答が処理されるメソッドによってiron-ajaxコンポーネントに伝えることができる属性。
複数の属性を順番に変更すると、自動生成されたリクエストのバウンスが解除されます。
要素で generateRequest を呼び出して、明示的にリクエストをトリガーできます。
例
次の例では、CDNから使用される iron-ajax および paper-input コンポーネントへのリンクがあります。
<!DOCTYPE html>
<html>
<head>
<title>iron-ajax</title>
<link rel = "import"
href = "https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/paper-input/paper-inputl">
<link rel = "import"
href = "https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/iron-ajax/iron-ajaxl">
</head>
<body>
<dom-module id = "data-bind">
<template>
<paper-input label = "Write something..." id = "input" value = "{{q::input}}"
autofocus>
</paper-input>
<p>You typed: <b>{{q}}</b></p>
<p>Echo: <b>{{echo}}</b></p>
<iron-ajax auto
url = "http://dict.leo.org/dictQuery/m-query/conf/ende/query.conf/strlist.json"
params = "{'q': q}" handle-as = "json" on-response = "_handleResponse"
debounce-duration = "500">
</iron-ajax>
</template>
<script>
(function () {
Polymer ({
is: 'data-bind', properties: {
echo: {
type: String, value: 'waiting ...', reflectToAttribute: true
}
},
_handleResponse: function(event, request) {
var response = request.response;
this.echo = JSON.stringify(response);
}
});
})();
</script>
</dom-module>
<data-bind></data-bind>
</body>
</html>
出力
アプリケーションを実行するには、プロジェクトディレクトリに移動し、次のコマンドを実行します-
polymer serve
ここでブラウザを開き、 http://127.0.0.1:8081/ に移動します。 出力は次のようになります。