とあるプログラマーの平凡な日記

過去にメモ書きした「Shift_JISのサイトでGoogleMapsを使用したい」の話。

これそのままうまくいった。
でも今回はGoogleMapsじゃない。

普通のHTMLが"Shift-JIS"なんだけどAjaxを利用したいって言うパターン。

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script src="ajax.js" type="text/javascript" charset="utf-8"></script>

　 　 これで動く。 ASPで確認できた。

共通関数とかをインクルードしているんだけど、
そのインクルードファイルがShift-JISなのに
一部でAjaxを利用しなくちゃ・・・というときに使えると思う。

・・・っていうかそうする必要があったのだ(^^;

さて、先ほどの「ASPでAjaxを使った即時検索」で自分なりに書いたコード。

検索フォームというかメインのページ

function GetAddress(y){

    var url = encodeURI("get_user.asp?search_add=" + y);
    req = getXMLHttpRequest();
    req.onreadystatechange = GetAddressCallBack;
    req.open("GET", url, true);
    req.send();
    return true;
}
// DBとのやり取り結果を取得(XMLの要素を返す)
function GetAddressCallBack(){
    if (req.readyState == 4) {
      if (req.status == 200) {
       try {
        var response = req.responseXML.documentElement;
        var rc = response.getElementsByTagName("address")[0].firstChild.data;
        if (rc != null) {
         document.getElementById("addresslist").value = "";
         document.getElementById("addresslist").value = rc;
        }else{
         document.getElementById("addresslist").value = "";
            }
       } catch (e) {
         document.getElementById("addresslist").value = "";
       }
      }
    }
}

// XMLからのリクエストを返す
function getXMLHttpRequest() {
var x = null;
if (typeof XMLHttpRequest != "undefined") {
  x = new XMLHttpRequest();
} else {
  try {
   x = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
   try {
    x = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (e) {
        alert("err");
   }
  }
}
return x;
}

あとはテキストボックスとして["search_add"]　イベントは[onKeyUp="GetAddress(this.value);"]
それとテキストエリアを用意["addresslist"]これは候補一覧を表示するもの
本来ならリストなどにしたほうがいいのだけどね。

で、
get_user.asp(実際にDBとやり取りする部分)

    Dim strSQL
    Dim strRet
    If Request.QueryString("search_add") <> "" Then

        '--SQLでデータを取得

            strRet = "取得した値をセット"

      Response.ContentType = "text/xml"
      Response.write("<?xml version=""1.0"" encoding=""UTF-8"" standalone=""yes""?>")
      Response.write("<POST_DATA>")
      Response.write("<address>" & strRet & "</address>")
      Response.write("</POST_DATA>")

    End If

これで動くはず・・・。
いや、動くんだけどDB部分とかを削ったのでちょっとだけ自信がない(^^;

ASPで即時検索を求められてしまった。

ユーザー側からはJavaScriptファイルにデータを書き込んで
それを使った案でと依頼されたけれども、
ファイル作成のタイミングがDBに登録されたときや任意のとき。

それってWebシステムとしてはものすごく怖いもの
（同時アクセスがないとは言い切れない)
それにデータを2箇所にて管理するってのも変な話。

即時検索ということはクライアント側からのアクションにすぐに対応すること(だよね？)
ASPは何かトリガーがないとダメなもの。
で、ユーザー側が言っていたJSファイルならクライアント側処理なので即時検索にはもってこい！

･･･なのだけれども制限があって、セキュリティからの問題から別ファイルに、って。
JSファイルの性質上、セキュリティには優れていないわけで
右クリック禁止も提案したけれどもNG。
そんなもので良いのか･･･と思いながら
JSファイルを使わずに即時検索できないものか･･･と考える。

すぐに思い浮かんだのはAjax。あれはそもそもJavaScript。
ページ遷移をしないでDBなどからデータのやり取りができるからセキュリティも問題なし。
データの二重化も防げる。

でもPHPには利用できるというかサンプルはたくさんあるけれどもASPってどうなの？
ASP.NETならできそうな気はするけれども･･･。

そんなわけで困ったときのGoogle検索。
色々キーワードを変えながら検索すること1時間弱。

見つけました！

「使えないプログラマー: ASP　ASPからAJAXを使う」。

サンプルコードつきで、まさに求めていたもの！

Ajax自体は以前のGoogle Mapsでちょっとは知っているので読めば大体何をやっているかわかる。
わからないところは調べたり。

しかし相変わらずの文字コードミスをやらかしたり色々あったけれども、
そこはalertを入れまくっておかしいところを特定して、
原因を考えてどうにか動作することに成功！

ASP+SQLServer+AjaxでDBからの即時検索･･･なんだか色々重宝しそうですな。
ほんと、コードまで公開してくれて感謝です。

本日中に私なりのコードを公開したいと思う。
本日中は無理でも週末までには･･･(^^;