back
Ajaxによる非同期サーバー通信 (4/4)
■Ajax通信の実際
では、基本がわかったところで、実際にAjaxを利用するサンプルを作ってみましょう。Ajax通信は、サーバーとの通信ですから、このサンプルは実際にサーバーにアップロードして動かさないと使えません。ファイルをそのままブラウザで開いてもだめですよ。
まず、サンプルデータを用意しておきましょう。テキストファイルに、UTF-8のエンコードで適当にテキストを書いて、HTMLファイルと同じ場所にアップロードしてください。そしてサンプルのWebページにアクセスし、入力フィールドにファイル名を書いてボタンを押すと、サーバーからそのファイルの内容を取得し表示します。
今回のサンプルは、AjaxObjectというオブジェクトとしてAjax通信の機能を用意しました。doActionから、このAjaxObjectを作成すると、Ajax通信を開始します。AjaxObjectでは、今までのオブジェクト指向の知識を総動員して作ってますので、それぞれで働きを考えてみましょう。
まず、サンプルデータを用意しておきましょう。テキストファイルに、UTF-8のエンコードで適当にテキストを書いて、HTMLファイルと同じ場所にアップロードしてください。そしてサンプルのWebページにアクセスし、入力フィールドにファイル名を書いてボタンを押すと、サーバーからそのファイルの内容を取得し表示します。
今回のサンプルは、AjaxObjectというオブジェクトとしてAjax通信の機能を用意しました。doActionから、このAjaxObjectを作成すると、Ajax通信を開始します。AjaxObjectでは、今までのオブジェクト指向の知識を総動員して作ってますので、それぞれで働きを考えてみましょう。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<script type="text/javascript">
<!--
var ajax = null;;
function doAction(){
var txt = document.getElementById("url");
var callback = function(){
var target = document.getElementById("message");
target.innerHTML = ajax.getResponse();
}
ajax = new AjaxObject(txt.value,callback);
}
function AjaxObject(url,callback){
var response = null;
var callback = callback;
ajaxStart(url);
this.getResponse = function(){
return response;
}
function ajaxStart(url){
var req = createRequest();
if (req == null){
alert("実行できません！");
return;
}
req.open("GET",url);
req.setRequestHeader("User-Agent","XMLHttpRequest");
req.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
precallback(this);
}
}
req.send();
}
function createRequest(){
var httplist = [
function(){ return new XMLHttpRequest(); },
function(){ return new ActiveXObjct("Msxml2.XMLHTTP"); },
function(){ return new ActiveXObject("Microsoft.XMLHTTP"); }
];
for(var i = 0;i < httplist.length;i++){
try {
var http = httplist[i]();
if (http != null) return http;
} catch(e){
continue;
}
}
return null;
}
function precallback(request){
response = request.responseText;
callback();
}
}
//-->
</script>
</head>
<body>
<H1>TEST.</H1>
<div id="message">URLを入力：</div>
<input type="text" id="url">
<input type="button" onclick="doAction();" value="Ajax">
</body>
</html>
| << 前へ |