Ajaxサンプル

Ajaxで作ったいろいろな無料サンプルプログラムを紹介しています。

Ajaxとは?から始まり、Ajaxの使用方法などなど。まずはここからご覧下さい。

そもそも、Ajaxってなん読むの?
Ajaxは、アジャックスではなく、エイジャックスと読みます。...「そもそも、Ajaxってなん読むの?」の続きを見る
Ajaxってなんの略?
ネットを検索すると、いろいろと書かれていますが、Async + JavaScript + XML ってのが一般的でしょうかね?Async + JavaScript + XMLHttpRequestってのもあります。もっと長いとDOMとか、JSONとか、だんだんAjaxのアルファベットのつづりとは関係なくなってきます。...「Ajaxってなんの略?」の続きを見る
Ajaxってどこがすごいの?
Ajaxは、XMLHttpRequestを使って非同期でホームページをアップデートすることができるところが、すごいのではっと思います。しかし、JavaScriptのXMLHttpRequest関数は、以前から存在するもので、けして、新しいテクノロジーではありません。Ajaxは新たなテクノロジーではなく、新しいコンテンツの形というのが一般的な考え方ではないでしょうかテクノロジーの進化ではなくて...「Ajaxってどこがすごいの?」の続きを見る
Ajaxはどんなところに使われているの?
Google Map で使われてから、その存在が注目されるようになりました。どんなサイトかと言えば、地図なんです。それだけだと今までと同じっと思われるかも知れませんが、従来の地図は、横や縦に移動すると、ページ全体を再読み込みしていましたが、Google Map では、地図をドラッグすると、必要な個所だけが読み込まれ、ページ全体そのままです。文章ではわかり難いの...「Ajaxはどんなところに使われているの?」の続きを見る
Ajaxはいろいろ難しいのでは?
必要な知識は、JavaScriptとHTMLがあれば最小限のものは作れます。もっと面白いページを作りたければ、いろいろな知識が必要になりますが、このサイトで紹介しているものは、XMLHttpRequest の呼び出し部分を外部ファイルにして共通化しているので、作成は簡単です。先ほども書きましたが、技術的には簡単です。でもそれを使って何を作るのかが難しいと思います。...「Ajaxはいろいろ難しいのでは?」の続きを見る
いろいろ制限がありそうですが・・・
Ajaxは、制限の宝庫です。しかし、セキュリティや、文字コードなどは、Ajaxに限らず出てくる話ですので、ネットに情報は出ています。むしろ間違った使い方をしている(無駄にAjaxを使用している)ケースが多くあるように思われます。ちなみに制限ですが、・他ドメインの呼び出すことはできません。・文字コードはUTF8が良いようです。・検索エンジンのロボットには...「いろいろ制限がありそうですが・・・」の続きを見る
このページは、何が書いてあるの?
基本的には、Ajaxのサンプルプログラムを簡単な入門編から、上級編(?)まで作る予定です。(現在作成中)しかし、これはあくまで使い方の一例であって、全てではありません。何度も書きますが、Ajaxを使って、どんなコンテンツを作るのか、作者の皆さんが考えて、そして、楽しいページを作っていただければと思います。ご意見ご感想は、掲示板にお願いします。...「このページは、何が書いてあるの?」の続きを見る

入門編のサンプルです。簡単なところからはじめています。

Ajaxのライブラリ定義
Ajaxのライブラリを定義しています。<script type="text/javascript" src="./lib/ajax050.js"></script>...「Ajaxのライブラリ定義」の続きを見る
非同期でテキストファイルを読み込みます。
# スクリプトを定義します<script type="text/javascript">function on_loaded_test1_1(oj) {# 読み込まれた情報をidがtest1_1に入れますdocument.getElementById("test1_1").innerHTML=unescape(oj.responseText);}</script># 呼び出しボタンです<input type=button value="test1_1" onclick="sendRequest(on_loaded_test1_1,'','GET','test1.txt',true)"><br># 結果を出力する場所です<span id="test1_1"></span># test1_1.txtの中身=======...「非同期でテキストファイルを読み込みます。」の続きを見る
同期でテキストファイルを読み込みます。
# スクリプトを定義します<script type="text/javascript">function on_loaded_test1_2(oj) {# 読み込まれた情報をidがtest1_2に入れますdocument.getElementById("test1_2").innerHTML=unescape(oj.responseText);}</script># 呼び出しボタンです<input type=button value="test1_2" onclick="sendRequest(on_loaded_test1_2,'','GET','test1.txt',false)"><br># 結果を出力する場所です<span id="test1_2"></span># test1.txtの中身========...「同期でテキストファイルを読み込みます。」の続きを見る
同期と非同期の違いを明確にします。
CGIとの連携は後で書きますが、同期と非同期の違いを分かりやすくするために、Perlスクリプトで1秒間止めてから、返事を返すようにしてあります。# スクリプトを定義します<script type="text/javascript">function on_loaded_test2(oj) {# 読み込まれた情報をidがtest2に入れますdocument.getElementById("test2").innerHTML=unescape(oj.responseText);}</script># 同期の呼び出しボタンです<input type=button valu...「同期と非同期の違いを明確にします。」の続きを見る
Ajaxってこんな感じのもの?
同期と非同期の違いを見てみると、Ajaxとはこんな感じのものかと分かっていただけたかと思います。次の章からは、この非同期をうまく使って行きます。...「Ajaxってこんな感じのもの?」の続きを見る

同期と非同期を理解するためのサンプルです。

入門編サンプル2では
入門編サンプル2では、非同期通信の間に悪さをされないようにしてみます。...「入門編サンプル2では」の続きを見る
非同期通信中に別の文字を出す
Ajaxの欠点は、通信していることが分からないことです。逆を言えば、それがメリットでもあります。しかし、分からないと何度もボタンを押してしまい、サーバーにはバンバンアクセスが行ってしまいます。そこで、アクセス中は、「Loading...」の文字を出すようにします。呼び出すファイルは、先ほどの1秒止めて返事を返す「test2.cgi」です。# 実行結果はこちらfunction o...「非同期通信中に別の文字を出す」の続きを見る
非同期通信中にボタンを押しても無視する
'Loading...'と出していても、バンバンボタンを押してしまう人がいるので、読み込み中にボタンを押すと「NG」と表示されるようにして、再読み込みはしないようにしました。# 実行結果はこちらvar run=0;function start_ajax2_2() {if(run == 0){ document.getElementById('test2_2').innerHTML='Loading...'; sendRequest(on_loaded_test2_2,'','GET','/ajax/test2.cgi',true); run=1;}else{ document.getElementById('test2_2').innerHTM...「非同期通信中にボタンを押しても無視する」の続きを見る

XMLHttpRequestを使わないAjaxをご存知ですか?Ajaxという語源からはちょっと違った形のAjaxをご紹介します。

最新Ajaxとは?
従来のXMLHttpRequestを使ったAjaxには、ドメイン間通信ができないという大きな欠点があります。例えば、http://hogehoge.com/ のデータをhttp://ageage.com/ では、XMLHttpRequestを使って読むことはできません。いわいるSame-Originポリシーというやつです。これはJavaScriptが持つセキュリティのため、ドメイン間でのデータを読み取ることができないのです。つまり、XMLHttpRequestの読み込み...「最新Ajaxとは?」の続きを見る
Ajaxを実現する別の方法
XMLHttpRequestを使ったAjaxでは、ドメインを超えてデータを読み込めないため、完全に別の方法を考える必要があります。それは、scriptタグを使った外部読み出しです。scriptタグを通常使う場合は、ページのヘッダ部に >script type=xxxxx src=xxxxx< という表記をしますが、Ajaxとして使用する場合は、それを動的に行います。手順としては、1.スクリプトエレメントを作...「Ajaxを実現する別の方法」の続きを見る
JSONPとは?
JSONPの前に、JSONを説明します。JSONとは、JavaScript Object Notation の略で、JavaScriptで使いやすいデータ形式のことです。一般的にXMLよりも軽量で、JavaScriptから使いやすいデータ形式です。簡単な例はこいうったデータ形式です。{"name":"ダイエット商品","discription":"10日で10キロやせる脅威のダイエット","price":980}直接JavaScriptのデータ構造体に入れることができるので、処理が...「JSONPとは?」の続きを見る
appendChildとJSONPを使ったAjax
先ほどのJSONPは、そのまま関数の呼び出しとして使えます。つまり、JSONPで作成された関数呼び出しのスクリプトをappendChildによって動的にロードすることによって、Ajaxを実現するのです。手順をまとめるとこういうことになります。1.Ajaxの起動アクションが発生2.スクリプトエレメントを作成3.エレメントのsrcにJSONPのファイルを指定4.エレメントを追加(appendC...「appendChildとJSONPを使ったAjax」の続きを見る
コールバック関数とJSONP
appendChildとJSONPを使ったAjaxのポイントは、コールバック関数を使用して、取得したデータをコールバック関数に呼び戻すことにあります。そのため、JSONPの作成方法をいろいろ変えるだけで、関数を呼び出すだけでなく、その他の処理を読み込んだスクリプトエレメントに足すこともできます。例えば、JSONPのファイル中にこんなことを書いてみましょう==========================...「コールバック関数とJSONP」の続きを見る
注意事項
覚書程度の注意事項です。ほかにもいろいろとあるかも知れません。・srcに設定するファイル名は、.cgiでもなんでも大丈夫・srcのリクエストURLのパラメタはエンコードする必要あり・srcのcharsetも設定・appendChildは、settimeoutを使って呼んだ方が良い・appendしたchildをすぐに消すとIEが落ちる・コールバック関数が間違っていると何も起こらない・JavaScriptのデバッグは、外部...「注意事項」の続きを見る

appendChildやコールバックをいちいち設定するのは面倒なので、ライブラリにしました。コピー&ペーストで外部ファイルにして頂ければ、そのまま使うことができるはずです。

Ajaxライブラリの本体、その名もSajax
=====================================================function Sajax() { return this; };Sajax.prototype = {HttpRequest: function (url,arg,callback_func) {var code = 'sajax';for( i=0;ivar qs = '';for( i in arg ){qs += encodeURIComponent(i) +'='+ encodeURIComponent(arg[i]) +'&';}qs += 'callBack=Sajax.callback._'+ code;Sajax.callback["_"+code] = function( ){callback_func.apply(null, arguments);};// document.getElementById('stat').innerHTML = url +''+ qs +'';var scriptTag = document.createElement...「Ajaxライブラリの本体、その名もSajax」の続きを見る
Sajax.jsの使い方
>script type="text/javascript" src="./sajax.js" charset="utf-8"<>/script<// 上のファイルをコピーして、sajax.jsで保存してくださいfunction webobj_start_ajax( type, opt ) {var sajax = new Sajax();var d=[];d['key'] = 'キーワードとか';sajax.HttpRequest('呼び出しURL', d, on_loaded);return true;}function on_loaded(table) {document.getElementById('out').innerHTML = table.name;return true;}呼び出しのスクリプトはこんな感じです...「Sajax.jsの使い方」の続きを見る


ブックマークに追加する