So-net無料ブログ作成
ジオプラス ブログトップ

ジオプラスでAjaxできた [ジオプラス]

前回述べたようにジオプラスではコンテンツとCGIのURLのドメインが異なるため、通常でクロスドメイン問題が発生しています。

●コンテンツ(HTML)
 http://www.skillworker.net/

●CGI(Perl、PHP)
 http://cgi.skillworker.net/


そのため、通常ではAjaxを用いてサーバ側のCGIを動かすことが出来ません。ところが、CGI用のドメインを用いてもコンテンツを表示させることが出来ます。そうするとドメインが同じcgi~になるので、クロスドメインとならないのです。

現在のところは、この方法しかないですね。

Ajax(prototype.js)-PHP-SQliteを使用したサンプルです。ラジオボタンとリストボックスがまだうまく動きませんね。

http://cgi.skillworker.net/test/sqlite/umesyu.html

 





nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:日記・雑感

ジオプラスでAjaxは鬼門 [ジオプラス]

こんにちわ。ジオプラスでAjaxサンプル作成中にハマっています。prototype.jsを使用するとブラウザを意識せずにHTTPリクエストを送信できるのですが、そのHTTPリクエストが送信されません。

 Prototype.jsは、Sam Stephenson氏を中心とするチームによって開発されているAjax対応JavaScriptライブラリです。

調べてみたところ、IEではAjaxを用いた通信を行うと、GETメソッドの場合一度実行されるとデータがキャッシュされて、2回目以降の通信はそのキャッシュされたデータを読みに行くようになってしまいます。

この回避方法ですが、HTTPレスポンスに対してブラウザがキャッシュしないよう以下のようなレスポンスヘッダを返してあげなければいけません。
header("Cache-Control:no-cache, no-store");
header("Pragma:no-cache");

しかし、これだけでもまだHTTPリクエストが送信されません。HTTPリクエスト側で何か対応しなければいけないようです。対応方法は2つあります。

①HTTPリクエストヘッダに'If-Modified-Since'を付加する。
②GETメソッドで取得する先のURLにユニークIDを付加する。

実際のソースコードは以下になります。
function sendRequest(url){
    var paramList = "time=" + (new Date().getTime());

    new Ajax.Request(url, {
        method:"get",
        requestHeaders: ['If-Modified-Since', '01 Jan 1970 00:00:00 GMT'],
        parameters: paramList,
        onSuccess: function(xmlhttp) {
        notes = eval('('+xmlhttp.responseText+')');
        refreshListBox(notes);
        }
    });
}

しかし、まだまだダメです。FireFoxではOPTIONリクエストが送信されますが、IEはウンともスンとも言いません。
なぜFireFoxではOPTIONメソッドが送信されるのでしょうか?本来はGETメソッドのはずです。FireFoxでは、仕様で一旦HTTPメソッドOPTIONSでApacheに問い合わせ、クロスドメイン通信が許可されているかを確認してからGETメソッド等で実際の通信を行なうようになっているようです。しかし、その後GETメソッドが送信されていませんのでAjaxができません。

そう、ジオプラスではコンテンツとCGIのURLのドメインが異なるため、クロスドメイン問題が発生しているのです。

●コンテンツ(HTML)
 http://www.skillworker.net/

●CGI(Perl、PHP)
 http://cgi.skillworker.net/

ちなみにJSONPを使ってみましたが、同じ結果です。最近のブラウザではセキュリティが強化されているようです。セキュリティの設定を変えればよいのかもしれませんが、サイトに来てくれるユーザに設定変更させるわけにはいきません。というよりしてくれません。
JSON with paddingの略

Javascriptの非同期通信でよく使われるXMLHttpRequestオブジェクトにはSame-Originポリシー存在し、クロスドメインアクセスができない。

一方,scriptタグを用いると,ドメインの異なるサーバに置いているスクリプトファイルを読み込むことができる。この仕組みを利用し、scriptタグのsrcに、データを取得できるAPIURLを指定し,ドメインの異なるサーバからデータを取得する仕組みの総称として、JSOPという言葉が使われる。JSONP用のAPIでは、関数名+取得データをjson形式で表記して引数とした形式(例.callbackFunc({id:1000,name:aaa}))のレスポンスが一般的で、APIから返されるコールバック関数と同じ名前の関数(callbackFunc(jsonData))をクライアント側で定義しておけば、データを読み込んだ際にそのコールバック関数が実行される。動的にscriptのDOMを生成することで、非同期でデータが取得できるようになる。


とりあえず、ジオプラス内でもAjaxが動くように対応中です。次回には対策を紹介したいと思います。あー大変。

ジオプラスでJSON [ジオプラス]

Yahoo! UI LibraryやScript.aculo.usの使用法を勉強し紹介してきました。
そろそろ本格的にAjaxに入ろうとしていたところ、またまた問題発生です。

現在以下の書籍で勉強中です。
10日でおぼえるAjax 入門教室
Ajaxでサーバと通信するためJSON形式でデータを扱いたいのですが、json_encode()はPHP5.2から標準になったそうです。
私の使っているジオプラスはPHP5.1.4なのです。

どうりで、JavaScriptからAjaxが出来ないわけです。

そこで、またまた調べてみました。

●PEAR::Services_JSON
ダウンロード(http://mike.teczno.com/JSON.tar.gz)

ジオプラスの場合は、
/geo_cgi_private/JSON.php
に配置します。

使い方は簡単です。
 <?php
define( 'MYSMARTY_DIR', '/geo_cgi_private/' );
require_once ( MYSMARTY_DIR .'JSON.php' );

$arr = array(
    array(
        
"name" => "データ1",
        
"url"  => "URL1"
    
),
    array(
        
"name" => "データ2",
        
"url"  => "URL2"
    
)
);

$json = new Services_JSON;
$encode $json->encode($arr);
header("Content-Type: text/javascript; charset=utf-8");
echo 
$encode;
?>



ジオプラスでXML [ジオプラス]

コンビニWORKERS ~無料求人サイト~でフロムエーから求人情報を取得するためにはXMLを解析する必要があります。

XMLデータ自体はHTTPで取得すればいいので、LWP::Simpleを使用すれば簡単に出来ます。

LWP::Simpleは標準で使用できます。

しかし、XML解析に必要なXML::SimpleやXML::LibXMLはインストールされていないのです。しかもこれらは、Pure PerlではないためサーバにFTPでアップロードするだけでは動かないのです。

XML::LibXMLに関しては動作しそうですが、ライブラリlibxml2を使用するためか起動でエラーになりました。

そこで100%Pure PerlであるXML::TreePPを使用することにしました。

こちらはTreePP.pmをサーバにコピーするだけで使用できるのです。使用方法も日本語で書かれているので親切ですね。

PHPだともっと簡単にXMLを解析できるのでが、Perlを書き直すのは大変なのでPerl派にはお勧めです。


ジオプラス ブログトップ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。