Ext JS/Sencha Touch入門40 Ajaxリクエスト処理
今回はExt JS,Sencha Touchのどちらでも非常によく使うAjaxの処理を紹介します。
サンプルコードはSencha Touchですが、Ajaxリクエストの処理はExt JSでもほぼ同じです。
Ajax サンプル
まずAjaxでリクエストする先を用意する必要があります。
今回はPHPで作成しました。
・PHP
<?php
//サンプル
//3秒待つ
sleep(3);
//POST値の処理
$param = $_POST['id'];
$res['id'] = $param;
if ($param) {
$res['success'] = true;
}else {
$res['success'] = false;
}
//JSONで返す
header('Content-Type: application/json');
echo json_encode($res);
die();
?>
3秒処理を遅らせています。
レスポンスにはJSON形式でPOSTされた情報とサーバーサイドでの処理が正しく終わったらsuccessにtrueを返すようにしています。
HTMLファイルはSencha Touchの基本形のものでよいです。
・HTML
<!DOCTYPE html>
<html manifest="index.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax Sample</title>
<link rel="stylesheet" href="../../st/resources/css/ext-touch.css" type="text/css">
<script type="text/javascript" src="../../st/ext-touch-debug.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body></body>
</html>
今回のサンプルではパネルをひとつ作ってツールバー上に、Ajaxリクエストをキックするボタンを配置します。このボタンをタップするとAjax リクエストが実行されるようにします。
・Javascript
Ext.setup({
onReady: function() {
//リクエスト処理
var ajax = function(callback) {
//ローディングマスク
panel.el.mask(
false,
' <div style="margin:50% auto; text-align:center;color:#EEE;"><img src="loader.gif"/> <br />お待ちください...</div>');
//Ajax リクエスト
Ext.Ajax.request({
url:'post.php',
params:{
id:'test'
},
success:function(result,opt){
//マスクを外す
panel.el.unmask();
var res = Ext.decode(result.responseText);
if (res.success) {
window.alert('Success');
if (Ext.isFunction(callback)) {callback()};
}
},
failure:function(result,opt){
window.alert('リクエスト失敗。ネットワーク接続を確認してください。');
}
});
};
//パネルの生成
var panel = new Ext.Panel({
fullscreen: true,
styleHtmlContent:true,
dockedItems:[
{
xtype:'toolbar',
dock:'top',
items:[
{
ui:'mask',
iconCls:'action',
handler:function(){
//コールバック関数
var callback = function(){
panel.update('Success!');
};
//Ajax処理実行
ajax(callback);
}
}
]
}
],
html:'Ajax Request Sample'
});
}
});
前回のHello, World + Tbarのサンプルによく似ていますが、今回はxtypeでツールバーを作成しています。
xtypeについてはコチラ
ボタンのコンフィグオプションで
ui:’mask’,
iconCls:’action’
が設定されています。iconClsではボタンに配置する画像をCSSで設定できますが、今回はSencha Touchに予め用意されているactionクラスをそのまま使います。
Sencha Touchのパッケージ内のexamplesのiconsサンプルをみるとどんなアイコンがあるのかが分かります。
Ajax リクエスト処理
Ext JSおよびSencha TouchではExt.Ajaxクラスを使用してAjax処理を行ないます。このクラスはシングルトンですので、Ajax処理を呼びたい箇所でExt.Ajaxのrequestメソッドを呼び出します。パラメーターはURLなので設定はオブジェクトで渡します。
・Ext.Ajax.request
Ext.Ajax.requestの引数に渡しているもの
- url:(String)リクエスト先のURL
- params:(Object) パラメータ
- success:(Function) Ajaxリクエスト成功時のコールバック関数
- failure:(Function) Ajaxリクエスト失敗時のコールバック関数
最も単純なAjaxリクエストへ渡す設定は上の4つのものになります。
paramsに設定されているパラメータをurlの先にPOSTして,正しいレスポンスが返ってきたときにsuccessに設定されているコールバック関数が実行されます。リクエスト自体が失敗した場合(404などが返ってきた場合。)にfailureに設定されているコールバックが実行されます。
サンプルではajaxという関数にAjaxの処理をまとめています。
Ext.Ajax.request()の部分で実際にAjaxを実行します。
ajax関数の中では、リクエスト中に画面全体にマスクを掛ける処理を、行っています。
・ローディングマスク
ローディングマスクを表示
panel.el.mask(
false,
' <div style="margin:50% auto; text-align:center;color:#EEE;"><img src="loader.gif"/> <br />お待ちください...</div>');
Ext.Elementのmaskメソッドでそのエレメントにマスクをかける処理を実行します。Ext JSとSencha Touchでは引数が違うので注意が必要です。
Sencha Touchのマスク処理はスタイルがあんまり良くないので、独自で設定する必要があります。ローディング用の画像もないので適当なものを用意する必要があります。今回はこんなのGifアニメを作って設定しています。
ローディング用Gifアニメ
マスクを外すときは同様にExt.Elementのunmaskメソッドで行ないます。サンプルでは
successのコールバックの中でpanel.elをunmaskを実行しています。
success:function(result,opt){
//マスクを外す
panel.el.unmask();
・
・
・
}
・コールバック処理
success:function(result,opt){
//マスクを外す
panel.el.unmask();
var res = Ext.decode(result.responseText);
if (res.success) {
window.alert('Success');
if (Ext.isFunction(callback)) {callback()};
}
},
failure:function(result,opt){
window.alert('リクエスト失敗。ネットワーク接続を確認してください。');
}
リクエスト成功/失敗時はwindow.alertを使って結果を表示してます。
また今回のサンプルではsuccess時にさらに呼び出し元でコールバックを設定して、パネル内の要素を”Success”に書き換えています。
・レスポンスボディーの取り出し
successのコールバックの第一引数にレスポンスがオブジェクトとして渡されます。
サンプルではresultという名前に設定しています。resultの中のresponseTextにレスポンスのボディーが格納されています。
サンプルのPHPの場合ではJSONの文字列を返しています。レスポンスボディーはそのままではただのテキストです、そのため文字列からJSONに変換する必要があります。
Sencha TouchでもExt JSと同じようにExt.util.JSONクラスを使ってJSONの変換を行います。
今回は文字列からオブジェクトへの変換(JSON.decode)処理を使います。
success:function(result,opt){
//文字列からオブジェクトに変換する
var res = Ext.decode(result.responseText);
//resはオブジェクトとして扱えるようになる。
if (res.success) {
window.alert('Success');
・
・
・
}
}
Ext.decodeはExt.util.JSON.decodeへのエイリアスです。Ext.decodeで呼び出した方が簡素なのでこちらを使っています。
このExt.decodeを使ってレスポンスボディの文字列をJavascriptのオブジェクトとして扱えるように変換します。
変換されたレスポンスボディはオブジェクトとして扱えるので、res.successのようにドットシンタックスで任意のプロパティ値を取得できるようになります。
以上、Ext.Ajax.requestの簡単な使い方です。詳しくはAPIリファレンスをご覧ください。
Sencha Touch API Documentation
http://www.sencha.com/deploy/touch/docs/?class=Ext.Ajax
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
