WEBサイト制作サービスWEBsite Design service

WEBサイト制作のAjaxによるサンプルプログラム

Ajaxによるファイル読込みのサンプルプログラムと文字化け調査

◇　Ajaxとは　◇

  • Asynchronous Javascript + XMLの略
  • クライアント側でフォーム入力した内容をサーバーで処理してその結果をクライアント側に表示するような同期した処理とは違い、クライアントとサーバーとの非同期通信を利用したもので、データ入力中に該当データ検索表示のようなインターラクティブな操作が実現できます。
  • クライアント側（ブラウザ）のDHTML(JavaScript+CSS)とXML HttpRequestに、サーバー側のWEBアプリケーションを加えあわせた処理をいう。

◇ Ajaxの利用可能な環境と文字化け状況（調査結果）◇(2007.3.14に追加確認)

  • テスト環境・条件
  • 調査環境（サーバー側）：windows2000server+IIS5.0+Active Perl5.6.1
  • 調査環境（クライアント側）：Windows-xp sp2 と Macintosh(OS9.2.2 及び OS-X.3.9)
  • Windowsブラウザ：Internet Explorer6.0 /7.0, Netscape Navigater7.1
  • Macintoshブラウザ(OS9/OS-x)：Internet Explorer5.1/5.2（注.1), Netscape Navigater7.0/7.1 , OS-XのみSafariを追加
  • テキスト形式：Shift-JISコードで作成し、各アイテムをTAB区切りで、１データは改行で区切ったもの
  • 調査結果
データタイプ ブラウザ利用環境 I.E.（注.1） N.N. 7.0x/7.1 Opera 9.0x Firefox 1.5 Safari
プレーンテキスト
Sfift-JISコード→UTF-8変換		 Windows-xp ◎ ◎ ◎ ◎ -
Macintosh OS9 ×
動作せず		 ×
文字化け		 (未テスト) (未テスト) -
Macintosh OS-X ×
動作せず		 ◎ ◎ ◎ ×
文字化け
XMLデータ形式
Sfift-JISコードで変換無し		 Windows-xp ◎ ◎ ◎ ◎ -
Macintosh OS9 ×
動作せず		 ◎ (未テスト) (未テスト) -
Macintosh OS-X ×
動作せず		 ◎ ◎
 ◎ ◎
（注.2 △）
  • 1.Ajaxが利用できる環境は、Windows,Macintoshの両方で正常に動作するのは、Netscape Navigater7.x のみ。
  • 2.Internet Explorerの場合は、Windowsのみ正常動作（I.E.6.0）、Macintoshは、全く動作せず（I.E.5.x）
  • 3.Safari（OS-X）の場合は、UTF-8にコード変換したプレーンテキストでは文字化けする。
  • XMLでは文字化けしないがJavaScriptの<ａ href="javascript:xxx"...>のFuction動作しない。（（注.2）ver. 1.3.1以前のもの）
  • safari 1.3.1のバージョンアップしたものは、正常に動作するようになった。（2005.9.5に確認）
  • 4.プレーンテキストをUTF-8にコード変換してもN.N.のMacintoshでは文字化けするので、XMLデータ形式での通信がよい。
  • 5.クライアント側とサーバー側の両方とも「UTF-8」エンコードの場合も、文字化け等の動作結果は、変わらない。

ページのトップへ戻る

Ajaxのプレーンテキストを読み込むサンプル

  • プログラム
  • サーバー側にあるプレーンテキスト(Shift-JIS)を読み込んで、UTF-8にコード変換したデータをクライアント側で表示するもの。
  • JavaScriptで「xmlhttp.responseText」を利用


<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
		<title>Ajax File-read Sample</title>
	<link rel="stylesheet" href="ajaxnews.css" />
		<script type="text/javascript">
/*----2005.6.22 作成　Ajaxによるファイル読込と表示サンプル--CXMedia Inc.------*/
   var stLine = '';
   var idName = '';
function readFile(xName,xFile,xLine) {
   idName = xName;
   stLine = xLine.split("-");
   if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();}
   else if (window.ActiveXObject) {xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");}
   if (xmlhttp) {
	xmlhttp.onreadystatechange = xcheck;
	xmlhttp.open('GET', 'webnews.cgi?fid=' + escape(xFile), true);
	xmlhttp.send(null);
   }
}
function xcheck() {
   if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
	wkText = xmlhttp.responseText;
	arrayText = wkText.split("\n");
	var outText = "";
	for (var i=stLine[0] - 1;i < arrayText.length; i++){
		if(i > stLine[1] - 1){break;}
		if(!arrayText[i]){continue;}
		wkText = arrayText[i].split("\t");
		outText += "<font size=\"-2\" color=\"#8f8f8f\">◆</font><font size=\"-2\" color=\"#f5542e\">"
		 + wkText[0] + "　</font><img src='../../i_line/dotline_s.gif'><br>"
		 + '<font size="-1"><a href="' + wkText[1] + '">' + wkText[2] + '</font></a><br>';
	}
	document.getElementById(idName).innerHTML = outText;
   }
}
</script>
</head>
<body onLoad="readFile('disp','site_new.txt','1-3')">
◆ Ajaxによるテキストファイル読み込み（utf-8コード変換して、表示する例） ◆<br />
<hr>
<div id="disp"></div>
<hr>
<a href="javascript:readFile('next','site_new.txt','4-20')"><font size="-1">⇒以前のニュース読込</font></a>
<div id="next"></div>
<hr><br>
</body>
</html>
  • サーバー側：Perl/CGI例：webnews.cgi


#!/usr/local/bin/perl
#------------------------------------------------------------------------------------#
#    2005.6.24 CXMedia Inc.作成　Ajaxによるファイル読込：utf-8コード変換付き
#------------------------------------------------------------------------------------#
#use strict;
use Jcode;
use CGI qw(:standard);

$fid = param('fid');	#$fid = "site_new.txt";
$file_id = 'news/'.$fid;
&read_file();
exit;
#----------------------------------#
#         ファイル読込 
#----------------------------------#
sub read_file{

	open(AJAX,"<$file_id");
	@logs = <AJAX>;
	close(AJAX);
	print "Content-Type: text/html\n\n";

	foreach $news(@logs){
		$news = jcode($news)->utf8;	#アイテムをutf-8に変換する
		print $news;
	}
}

ページのトップへ戻る

AjaxのXMLテキストを読み込むサンプルプログラム

  • サーバー側にあるプレーンテキスト(Shift-JIS)を読み込んで、XML形式にしたデータをクライアント側で表示するもの。
  • JavaScriptで「xmlhttp.responseXML」を利用
  • プログラムリンクのパラメータを追加する場合、"&"を利用するが、XMLデータではエラーとなるので、サーバー側で文字列表現の"＆ａｍｐ；"に変換して、送信することが必要。（<,>も同様）


<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" >
<head>
		<title>Ajax File-read XML Sample</title>
	<link rel="stylesheet" href="ajaxnews.css" />
		<script type="text/javascript">
/*----2005.7.7 作成　AjaxによるXMLファイル読込と表示サンプル--CXMedia Inc.------*/
   var stLine = '';
   var idName = '';
function readFile(xName,xFile,xLine) {
   idName = xName;
   stLine = xLine.split("-");
   if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest();}
   else if (window.ActiveXObject) {xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");}
   if (xmlhttp) {
	xmlhttp.onreadystatechange = xcheck;
	xmlhttp.open('GET', 'webnews_xml.cgi?fid=' + escape(xFile), true);
	xmlhttp.send(null);
   }
}
function xcheck() {
   if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
	var docText = xmlhttp.responseXML;
	var arrayText = docText.getElementsByTagName('news');
	var outText = '';
	if(!arrayText.length){alert("err-news:["+arrayText.length+"]データがありません。");}
	for (var i=stLine[0] - 1;i < arrayText.length; i++){
		if(i > stLine[1] - 1){break;}
		var itemText = arrayText[i].getElementsByTagName('string').item(0).firstChild;
		var itText = itemText.data;
		var wkText = itText.split("\t");
		outText += "<font size=\"-2\" color=\"#8f8f8f\">◆</font><font size=\"-2\" color=\"#f5542e\">"
		 + wkText[0] + "　</font><img src='../../i_line/dotline_s.gif' /><br />"
		 + '<font size="-1"><a href="' + wkText[1] + '">' + wkText[2] + '</font></a><br />';
	}
	document.getElementById(idName).innerHTML = outText;
   }
}
</script>
</head>
<body onLoad="readFile('disp','site_new.txt','1-3')">
◆ Ajaxによるテキストファイル読み込み（xml形式にして、表示する例） ◆<br />
<hr />
<div id="disp"></div>
<hr />
<a href="javascript:readFile('next','site_new.txt','4-20')"><font size="-1">⇒以前のニュース読込</font></a>
<div id="next"></div>
<hr /><br />
</body>
</html>
  • サーバー側：Perl/CGI例：webnews_xml.cgi


#!/usr/local/bin/perl
#----------------------------------------------------------------------------#
#    2005.6.24 CXMedia Inc.作成　Ajaxによるファイル読込：XMLデータの生成  
#----------------------------------------------------------------------------#
#use strict;
use CGI qw(:standard);

$fid = param('fid');	#$fid = 'site_new.txt';
$file_id = 'news/'.$fid;

&read_file();
exit;

#-------------------------------------------#
#   Textファイル読込して、xmlデータ作成   
#-------------------------------------------#
sub read_file{

	open(AJAX,"<$file_id");
	@logs = <AJAX>;
	close(AJAX);

	print "Content-Type: text/xml\n\n";
       print "<?xml version=\"1.0\" encoding=\"Shift_JIS\" ?>\n";
	print "<body>\n";
	foreach $news(@logs){
		#--xmlでは"<,>,&"があるとエラーとなるため文字列表現に置換--#
		$news =~ s/</&lt;/g;
		$news =~ s/>/&gt;/g;
		$news =~ s/&/&amp;/g;
        	printf('<news><string>%s</string></news>',$news);

	}
	print "</body>\n";
}
  • クライアント側（UTF-8）+ サーバー側（UTF-8）：JavaScript例：サンプル実行（XML）
    （注：HTMLを「UTF-8」で記述したもので、サーバー側で「Shift-JIS」のファイルを「UTF-8」にコード変換して表示するもの。動作結果は、「Shift-JIS」のものと同じ。　2007.2.1追加）

ページのトップへ戻る