Ajaxでテスト01

[ JQuery ] [ Ajaxでテスト02 ] [ Ajaxでテスト03 ]

2013-11-23 〜

※ jquery.jsを利用する設定がスクリプトのサンプルに記載されていませんが、省略してあり、実際は必要です。

はじめに

　jQuery UIのダイアログは、ページ内のDIVタグで囲まれたブロックをポップアップウィンドウで表示するものです。JavaScriptで良く使っていた別の窓を開く方法は、窓の位置などを管理する際に、ブラウザの種類、OSやUbuntuなどではWindowマネージャー、更にはアプリケーションランチャーなどによる違いから座標体系が統一されておらず、その違いを吸収して同一の操作（表示）になるようにスクリプトを作成するのは難しいのです。ページ内のブロックであれば、ブラウザの種類が一番の違いであり、管理が大きく軽減される事が想像されます。ただし、別に窓(タブ)を開くの場合には、それがメインをそのままにして、サブウィンドウとして開くのであれば、その間のオブジェクトのコントロールさえ理解してしまえば、メインウィンドウはサブウィンドウを開く以外はスクリプトを変更しなくても、サブウィンドウの処理は独立したひとつの窓やスクリプトとして考えてもほぼ良くなり、まだ、JavaScriptに不慣れな者としてはシンプルに感じられます。ただし、別のURLを開かない為に、Ajaxを利用してファイルを読み書きする事になります。

　という事で前置きが長くなりましたが、ダイアログを最大限に利用するためにも、簡単にAjaxの利用方法を学習しておきます。

参考URL

http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/

参考URLの後半に掲載されているサンプル。次から、urlで指定したスクリプトがcsv形式のデータを返すようにしておく事で、それが代入された後に、行に分割、列に分割してHTMLを組み立てたり、予め表示しておいたテキストボックスに値を代入する事で、様々な用途に使うことが出来ると想像できると思います。

var html = $.ajax({
  url: "some.php",
  async: false
 }).responseText;

まずは、ボタンを押したら、簡単なCSVファイルをアクセスしそれをTEXTAREAかPREタグを利用して表示するサンプルを作成してみます。
サンプルでは、urlで指定されるファイルがcsvデータそのものすれば良いのです。もう少しそれらしくしたいのであれば、PHPのスクリプトにしてそのスクリプトがHTMLではなく、CSVを出力するようにします。条件を指定して出力するCSVを選択するのは、もう少し後でやります。

テストサンプル01

実行結果

ソース

<script>
$(function() {
  var csv = $.ajax({
    url: "sample_data/testcsv001.csv",
    async: false
   }).responseText;
 
  $("#sample01").text(csv);
 
});
</script>
 
 
<textarea id="sample01" cols="80" rows="10"></textarea>

データ

sample_data/testcsv001.csv

001,abcdef,123456
002,aaaaaa,222222
003,ababab,333333
004,bbbccc,444444
005,ccddee,555555

※ Ajaxを使うとローカルというか、全ファイルをデスクトップに置いてテスト出来なくなります。（のはず）

テストサンプル02

色々と出来るように、testcsv001.csvをPHPのスクリプトにします。といっても同様のデータを出力するだけのスクリプトです。

sample_data/testcsv002.php

<?php
print <<<eocsv
001,abcdef,123456
002,aaaaaa,222222
003,ababab,333333
004,bbbccc,444444
005,ccddee,555555
eocsv;
 
?>

ソース

<script>
$(function() {
  var csv = $.ajax({
    url: "sample_data/testcsv002.php",
    async: false
   }).responseText;
 
  $("#sample02").text(csv);
 
});
</script>
 
 
<textarea id="sample02" cols="80" rows="10"></textarea>

実行結果

テストサンプル03

データを返すPHPをもう少し変更して、URLでnoというパラメータをGETで渡し、CSVデータの一列目が一致する行のみをデータとして返すようにしてみます。
ここまで出来れば、イントラ内で使うちょっとしたシステムで使えると思います。

ソース

<script>
$(function() {
  var csv = $.ajax({
    url: "sample_data/testcsv003.php?no=002",
    async: false
   }).responseText;
 
  $("#sample03").text(csv);
 
});
</script>
 
 
<textarea id="sample03" cols="80" rows="10"></textarea>

実行結果

エラー等の処理は後回しにして、次に伝票の明細欄の様な雰囲気のサンプルを考えてみます。

→Ajaxでテスト02

QHMの新タイプHAIKの活用と実験、オープンソースの活用