JavaScript/ajax

Total: 5481 / Today: 1 / Yesterday: 1

Asynchronous JavaScript+ XML

Ajaxは、XMLHttpRequestという命令を利用して、この命令が含まれる関数が実行されたときにデーターを受信するというのが根幹である。これまでの、JavaScriptプログラミングと異なる最大のポイントは、 *XMLHttpRequest命令でサーバー上のデーターを取得できる* という点である。非同期通信という言葉がよく使われるが、DHTMLの延長として考えた方がわかりやすい。

@contents

基本

まず、XMLHttpRequestオブジェクト生成のコードを書く。IE7未満では、ActiveXObjectでこれを実装する。

//XMLHttpRequestオブジェクト生成
var createXMLHttpRequest = function(){
    if(window.XMLHttpRequest){
        //XMLHttpRequestオブジェクト実装ブラウザ用
        return new XMLHttpRequest();

次に、データーを読み込む処理だ

function requestFile( data , method , fileName , async ){
    //XMLHttpRequestオブジェクト生成
    var request = createXMLHttpRequest();
    //open メソッド
    request.open( method , fileName , async );    
    //受信時に起動するイベント
    request.onreadystatechange = function(){ 
      //readyState値は4で受信完了
      if (request.readyState == 4 && request.status == 200){ 
        //コールバック
        callback(request.responseText);

これにより、request変数に、ajaxに必要な関数が入る。で、実際データーをよみこむと、まずreadyStateが変化する。readyStateは、以下のようになっている

0 : 開始前の初期状態
1 : 読み込み中
2 : 読み込み完了
3 : 制御可能
4 : 完了

たとえば、書き換えたい部分を読み込み中の時は、読み込みアイコンにして、完了後内容をgetElementByIdなどで書き換えるといったテクニックも可能である。

ほかにも変数があるが、ここでは省略して、読み込みが完了したら、callback();という関数が実行される。このresponseTextとは、読み込んだデーターを意味する。XMLの場合は、responseXMLとなる。（最近ではJSONなどでデータをやりとりする場合が多いのでresponseTextが使われる場合が多い）

このcallback()関数に、読み込んだデーターをパースしたり表示するなどの処理を入れる。この処理では、だいたいgetElementByIdなどでページの一部分を書き換えて、動的にページが変化しているようにみせることから、もっぱら非同期通信という言葉が使われるというしくみだ。

データーの読み込みに関する注意

よく、ajaxプログラミングにおいて、はまりがちなのが、サブルーチンの外にajaxで読み込んだデーターの結果を出すことができないというところである。

たとえば、Perlではデーターを読み込んだ後で、変数に格納して別のサブルーチンに渡して処理と言うことがよく使われる。

sub open {
	open(IN,"data.txt") || &error("Open Error")
	$data = <IN>;
	close(IN);
	return $data;

この場合、view()関数からopen()関数を呼び出してデーターを取得するという処理を行っているが、ajaxプログラミングにおいて、こういう方法でデーターを取り出すことはできない。

この例で言うと、３行目の$data = <IN>;という部分で、データーのパース、表示などの処理を行わなければならない。従って、

function load(){
    var request = createXMLHttpRequest();
    //open メソッド
    request.open( "GET", "data.txt" , null);    
    request.onreadystatechange = function(){ 
      //readyState値は4で受信完了
      if (request.readyState == 4 && request.status == 200){ 
        return request.responseText;

というような処理はできないので注意。

各フレームワークを使用する場合

prototype.jsの場合

タイムアウト時の処理を別途Ajax.Responders.registerなどで記載しなければならない。

function requestFile( data , method , fileName , async ){
	var myAjax = new Ajax.Request(
		fileName, 
		{
			method: method, 
			parameters: data,
			onSuccess: function(request) {
				// 通信成功時の処理

dojoの場合

別途handleAsで、Jsonとして処理したり、XMLとして処理したりするようにできる。

function requestFile( data , method , fileName , async ){
	dojo.xhr({
		method: method,
		url : fileName,
		content: data,
		timeout : 2000,//タイムアウト（２秒）
		load :  function(data){
			callback(data.responseText);

jQueryの場合

ほぼ、dojoと一緒。

function requestFile( data , method , fileName , async ){
	jQuery.ajax({
		url : fileName,
		type : method,
		timeout : 2000,//タイムアウト（２秒）
		success : function(data){
			alert(data);

uupaa-jsの場合

タイムアウト時の処理は別途uu.request.timeoutで記載。たぶん間違ってるかも。

function requestFile( data , method , fileName , async ){
　uu.ajax(fileName, callback, data)

Last Modified: 2008-11-24 21:10:48