りーんが思う。あれそれ。　 [AJAX] prototype.jsのAjax.Requestで非同期通信をClass化してみる

Ads by Google

--.--.--(--) --:--

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[AJAX] prototype.jsのAjax.Requestで非同期通信をClass化してみる

2008.09.22(月) 05:40

前回書いた記事が何故か好評なので、続きを書いてみる。

今度は、prototype.jsのAjax.Requestを使って非同期通信を行う処理をClassにて作成。
元々、postデータを動的に作成しようと思い立った元ネタでもある。

そもそもは<.a href="" ・・・にid名をつけずにonclickイベントを取得したいと思い立ったのが発端。
lightbox.jsを参考に作成。

AjaxOptions = Object.extend({

_object: new Array(),

_values: new Array(),

}, window.AjaxOptions || {});

/**
 * Ajax Class
 *
 * Ajax処理関連のクラスです。
 *
 */
var Ajax = Class.create();
Ajax.prototype = {

initialize: function() {

AjaxOptions._object['href.1']  = 'index.php';
        AjaxOptions._object['form.1']  = 'postForm';
        AjaxOptions._object['input.1'] = 'id';
        AjaxOptions._object['input.2'] = 'name';

this.creatClickList();

},

creatClickList: function() {
        this.creatClickList = Prototype.emptyFunction;

document.observe('keyup', (function(event) {
            var target  = event.findElement('input[name^=id]');
            if (target) {
                event.stop();
                this.action(target);
            }
        }).bind(this));

},

action: function(targetObject) {
        this.getData();
        return true;

},

getData: function() {

AjaxOptions._values[AjaxOptions._object['input.1']] = Form.Element.getValue(AjaxOptions._object['input.1']);

var frm = new postSubmit(AjaxOptions._object['href.1'], AjaxOptions._object['form.1']);
        frm.add('action', 'getData');
        frm.add('mode', '1');
        frm.add('id', AjaxOptions._values[AjaxOptions._object['input.1']]);
        frm.submit(false);

new Ajax.Request(AjaxOptions._object['href.1'], {
            method: 'post',
            postBody: Form.serialize(AjaxOptions._object['form.1']),
            onSuccess: function(request) {
                var data = eval('(' + request.responseText + ')');

if (data.code == 1) {
                    $(AjaxOptions._object['input.2']).value = data.name;

} else {
                    $(AjaxOptions._object['input.2']).value = '';

}

},

});

frm.drop();

},

}

/**
 * postSubmit Class
 *
 * postデータ処理関連のクラスです。
 *
 */
postSubmit = Class.create();
postSubmit.prototype = {

_form: {},

initialize: function(url, id) {
        this._form = document.createElement('form');
        this._form.method = 'get';

try {
            if (id) { this._form.id = id; }
            if (url) { this._form.action = url; }
        } catch (e) { throw e; }

},

add: function(elementName, elementValue) {
        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = elementName;
        input.value = elementValue;
        this._form.appendChild(input);
        this._form.method = 'post';

},

submit: function(submitMode) {
        submitMode = submitMode == undefined ? true : submitMode;
        try {
            $$('body')[0].appendChild(this._form);
            if (submitMode) { this._form.submit(); }
        } catch (e) { throw e; }

},

drop: function() {
        try {
            $$('body')[0].removeChild(this._form);
        } catch (e) { throw e; }

},

}

document.observe('dom:loaded', function() { new Ajax(); });

実際に使ってるコードに手を入れて載せているので、書き間違い等あればご容赦を。

何気に、onclickイベントじゃなくて、onkeyupイベントなのは内緒。
こっちのコードのが短かったからと言う。
テキストに文字を入力するたびに非同期通信を発生させるという処理。
いわゆる、会員コードを入力すると該当の名前を別の要素に表示しているもの。

サーバー側はPHPを使用。

名前があるかないかを判断して、リターン用コードを送信。
ただのprint関数なんだけれども。
jsonにて返却。

コード間違い等あるかもしれませんので、ご利用は自己責任にてお願いします。

Page Top ▲

コメントの投稿

トラックバック

この記事にトラックバックする(FC2ブログユーザー)

Page Top ▲

日	月	火	水	木	金	土
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	-	-	-	-	-