Ajax prototype.js 非同期通信を行う その

-


Topページ  >  お勉強  >  Ajax  >  非同期通信を行う その 

非同期通信を行う その

Ajaxを使用してサーバに非同期通信し、画面リフレッシュ(画面遷移)無しで画面の切り替えを行います。




prototype.js


使用バージョン:1.5.1 公式サイト





1. ダウンロードしたprototype.jsを読み込みます。

<script type="text/javascript"
    src="prototype.js"></script>


2. Ajax.Requestメソッドを実行します。

new Ajax.Request(
     "test.txt",
     { method: 'get',  onComplete: displayData });


3. リクエストが完了すると、onCompleteで指定されたメソッドが実行されます。

function displayData(responseHttpObj) {
  $("targetString").innerHTML = responseHttpObj.responseText;
}




Ajax.Request( url, { option } )


url 実行するURL
option 実行時のオプション(全て省略可能)
method:
  実行時のメソッド
  "get"、"post"、"put"、"propfind"
  指定例) method:"get"
parameters:
  パラメータ
postBody:
  メソッドで"post"が指定された場合の送信データ
requestHeaders:
  HTTPヘッダー配列
asynchronous:
  非同期通信を行うかどうか
  true … 非同期通信を行う
  false … 非同期通信は行わない
  指定例) asynchronous:true
onLoading:
  読み込み開始時に実行されるメソッド
  指定例) onLoading:displayData
onLoaded:
  読み込み終了時に実行されるメソッド
  指定例) onLoaded:displayData
onSuccess:
  読み込み成功時に実行されるメソッド
  指定例) onSuccess:displayData
onFailure:
  通信失敗時に実行されるメソッド
  指定例) onFailure:displayData
onComplete:
  通信完了時に実行されるメソッド
  指定例) onComplete:displayData
onException:
  例外発生時に実行されるメソッド
  指定例) onException:displayData



↓インラインフレーム内でサンプルが動作しています。





[Ajax - prototype.js - 通信]


非同期通信を行う その  【Ajax.Updater】



Topページ  >  お勉強  >  Ajax  >  非同期通信を行う その 






-