住所検索システムを作ろう！その２

JavaScript

Javascriptから呼び出す、PHPのプログラム。
まぁ〜危険といえば危険。PHPにはうといから、文字コードは、すべてUTF-8。
変換の必要もないし、今のレベルじゃ〜こんなもの。
文字の区切りもこんなのでいいのか？

ファイル名は sql.php

<?php
define( '_RS', chr(30));
define( '_US', chr(31));
define( '_HOST', 'localhost' );
define( '_USER', 'root' );
define( '_PASS', '' );
define( '_REFERER','http://');

$pos = strpos( $_SERVER[ HTTP_REFERER ], _REFERER);

if( false === $pos || 0 < $pos )
 exit( "Error!!"._RS."Intercepted access.");//呼び出し本
 
if( !$d = mysql_connect( _HOST, _USER, _PASS ) ) 
  exit( "Error!!"._RS." No connect." );

$cmnd = $_POST[ 'cmnd' ];
if( !$cmnd ) exit( 'Connected MySQL' );
$sqls = split( _US, $cmnd );

for( $c = 0 ; $sql = $sqls[ $c++ ]; )
  if(! $r = mysql_query( $sql, $d ) )
    exit( "Error!! SQLが実行できません。"._RS.$sql._RS.mysql_error( $d ) );

while( $row = mysql_fetch_array( $r, MYSQL_NUM ) )
  $b[ ] = join( _US, $row );

echo $b ? join( _RS, $b ): '';

以下、利用する画像。
ajax.gif
bar.gif

japan.gif

で、こんなにして、絵に描いた餅になるんじゃねぇ〜？


ここまでしか、書けなかった。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="ja">

<head>

<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>住所検索システム</title>

<style type="text/css">
  
body {
  background      : #fff url(./japan.gif) repeat-y top left;
  margin          : 0;
}

#header {
  color           : #448;
  font            : normal 14px/100% 'Arial';
  background      : #eee url(./bar.gif);
  height          : 28px;
  padding         : 4px 0 0 8px;
  border-bottom   : 2px #999 solid;
}

#list {
  list-style-type : none;
  margin          : 10px;
  padding         : 0;
}

#list li {
  color           : #004;
  line-height     : 2;
  border-bottom   : 1px #888 dotted;
}

#list li:hover {
  background-color: #ddf;
}

#key {
  ime-mode        : disabled;
  background      : #fff url(./search.gif) no-repeat left center;
  margin          : 0;
}

.TargetColor {
  background-color: #ccf !important;
}

</style>
</head>

<body>
  <div id="header">
    住所検索：
    <input type="text" size="50" id="key" title="郵便番号や地名の一部を空白で区切って入力します"> /
    表示
    <select id="SearchMax" name="SearchMax" title="一度に表示する行数を指定します">
      <option value="5">  5</option>
      <option value="10"> 10</option>
      <option value="15"> 15</option>
      <option value="20" selected="selected"> 20</option>
      <option value="30"> 30</option>
      <option value="50"> 50</option>
      <option value="100">100</option>
      <option value="500">500</option>
    </select>件 /
    ［
    <input type="radio" name="ziportel" value="PostCode" checked="checked" id="rd0"><label for="rd0">〒</label>
    <input type="radio" name="ziportel" value="Telphone" id="rd1"><label for="rd1">TEL</label>
     を優先］
  </div>
  <ul id="list">
    <li>検索された住所が表示されます</li>
  </ul>

<script type="text/javascript">

//@cc_on
(function ( ) {

if(! /^http:/.test( location.href ) ) {
  alert( 'ローカルファイルからの利用はできません' );
  return;
}

//_基本定数____________________________________________________________
//
var _SAVE_SPAN = 100; //day
var _WAIT_TIME = 350; //mille second
var _SQL_CALL  = 'sql.php';

//_汎用関数

var ClassList = {
 
 'contains' : (function ( ) {
    return function ( node, css ) {
      var str = ' ' + node.className + ' ';
      if ( -1 < str.indexOf( ' ' + css + ' ' ) ) return true;

      var i = 0, k, keys = css.split( / +/ );
      while( k = keys[ i++ ] ) if( -1 == str.indexOf( ' ' + k + ' ' ) ) return false;
      return true;
    };
  })(),
  
  'add' : (function ( ) {
    return function ( node, css ) {
      var i = 0, k, keys = css.split( / +/ ), buf = [ ], str = ' ' + node.className + ' ';
      while( k = keys[ i++ ] ) if( 0 > str.indexOf( ' ' + k + ' ' ) ) buf.push( k );
      node.className += ' ' + buf.join( ' ' );
      return buf;
    };
  })(),

  'item' : (function ( ) {
    return function ( node, n ) { return node.className.split( / +/ )[n]; };
  })(),
  
  'remove' : (function ( ) {
    return function ( node, css ) {
      var i = 0, k, keys = node.className.split( / +/ ), buf = [ ], str = ' ' + css + ' ';

      while( k = keys[ i++ ] ) if( 0 > str.indexOf( ' ' + k + ' ' ) ) buf.push( k );
      node.className = buf.join( ' ' );
      return buf;
    };
  })(),
  
  'toggle' : (function ( ) {
    return function ( node, css ) {
      var i = 0, k, keys = css.split( / +/ ), buf = [ ], str = ' ' + node.className + ' ';

      while( k = keys[ i++ ] ) 0 > str.indexOf(' '+ k +' ') ? str += k + ' ': buf.push( k );
      node.className = str;
      if( buf.length ) this.remove( node, buf.join( ' ' ) );
      return node.className;
    };
  })()
};

  

})();


//_Ajax___________

var sendRequest = (function( create, setEncHeader, uriEncode ) {
  return function (callback, data, method, url, async, sload, user, password) {
    var oj = create( );
    if(! oj) return null;
    if( sload ) url += ((url.indexOf('?') == -1) ? '?': '&') + 't=' + (new Date).getTime();

    var f = 'object' === typeof callback;
    var callback_onload = f ? callback.onload: callback;
    var callback_onbeforsetheader = f ? callback.onbeforsetheader: null;

    /*@if( @_jscript )
      oj.onreadystatechange = function () { if( 4 == oj.readyState ) callback_onload( oj ), oj.abort()}
    @else@*/
      oj.onload = function () { callback_onload(oj); oj.abort() } /*@end@*/;

    data = uriEncode( data, url );
    if( 'GET' == method.toUpperCase() ) url += (url.indexOf('?')==-1 ? '?': data=='' ? '': '&') + data;
    oj.open ( method, url, async, user, password );
    if( callback_onbeforsetheader ) callback_onbeforsetheader( oj );

    setEncHeader( oj );
    oj.send( data );
    return oj;
  };
})(
    function ( ) {
      try { return new XMLHttpRequest } catch(e1) {
        try { return new ActiveXObject( 'Msxml2.XMLHTTP.6.0' ) } catch(e2) { /*
          try { return new ActiveXObject( 'Msxml2.XMLHTTP.3.0' ) } catch(e3) { */
            return null; } } // }
    },
    
   function ( o ) {
     if( !window.opera || 'function' === typeof o.setRequestHeader )
       o.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8' );
     return o;
   },
    
   function ( data, url ) {
     var d = [ ], i, enc = encodeURIComponent;

     switch( typeof data ) {
       case 'object': for( i in data ) d.push( enc(i) + '=' + enc(data[i]) ); break;
       case 'string':
         if( '' == data ) return '';
         if( data.charAt(0) == '&' ) data = data.substring( 1, data.length );
         var datas = data.split( '&' );
         for( i = 0; i < datas.length; i++ ) {
           var dataq = datas[i].split( '=' );
           d.push( enc( dataq[0] ) + '=' + enc( dataq[1] ) );
         }
       default:
     }
     return d.join( '&' );
   }
);

var Zip = {
  'search': (function ( ) {
    return function ( ) {
      ;
    };
  })(),

  'list': (function ( ) {
    return function ( ) {
      ;
    };
  })()
  
};

var FormKeeper = (function ( getCookie, setValue ) {
  return function ( ) {
    var cnt = 0, o, es, e, v;

    while( o = arguments[ cnt++ ] ) {
      if( v = getCookie( o ) ) setValue( o, v );
      es = document.getElementsByName( o ) || [ document.getElementById( o ) ];
      for( var i = 0; e = es[ i ]; i++ ) {
        e./*@if( @_jscript ) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/
          'change', (function ( setCookie ) {
            return function ( evt ) {
              var e  = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/;
              var nm = e.name || e.id;
              if( nm ) setCookie( nm, e.value, 100);
            };
          })(
            function ( name, value, day, path, domain ) {
              return document.cookie = encodeURIComponent( name ) + '=' + encodeURIComponent( value ) +
                '; ' + 'expires=' + new Date( ( new Date ) - 86400000 * -day ).toUTCString( ) +
                '; ' + ( path ? 'path=' + encodeURI( path ) + '; ': '' ) +
                (domain ? 'domain=' + encodeURI ( domain ) + '; ': '' );
            }
          ), false );
      }
    }
  };
})(
  function ( name ) {
    name = encodeURIComponent( name ).replace( /([.*()]) /g, '\\$1' );
    var value = document.cookie.match( RegExp( name + '\\s*=\\s*(.*?)(?:[\\s;,]|$)' ) );
    return value ? decodeURIComponent( value[1] ): '';
  },

  function ( n, v ) {
    var objs = document.getElementsByName( n );
    var i, j, o, p;
    
    if( 0 === objs.length ) objs = [ document.getElementById( n ) ];
    for (i = 0; p = objs[ i++ ];) {
      switch( p.type ) {
        case 'text' : case 'textarea': case 'button':
        case 'reset' : case 'submit': case 'hidden': p.value = v; break;
        case 'checkbox': p.checked = v; break;
        case 'radio' : p.checked = p.value == v; break;
        case 'select-one': case 'select-multiple':
          for( j = 0; o = p.options[ j++ ]; ) o.selected = o.value == v; break;
      }
    }
  }
);

FormKeeper( 'SearchMax', 'ziportel' );

var AutoFocus = (function (createListener) {
  return function (target, css_on, css_out) {
    var listener = createListener(css_on, css_out);
  
  target./*@if (@_jscript) attachEvent('on' + @else@*/ addEventListener(/*@end@*/
    /*@if (@_jscript) 'focusin' @else@*/ 'focus' /*@end@*/, listener, true);
    
  target./*@if (@_jscript) attachEvent('on' + @else@*/ addEventListener(/*@end@*/
    /*@if (@_jscript) 'focusout' @else@*/ 'blur' /*@end@*/, listener, true);
  };
})(
  function (css_on, css_out) {
    return function (evt) {
      var e  = evt./*@if (@_jscript) srcElement @else@*/ target /*@end@*/;
      if ( /INPUT|TEXTAREA/.test(e.nodeName) && ! /checkbox|radio/.test(e.type) ) {
        e.style.cssText = 'focusin' === evt.type ? css_on: css_out;
      }
    };
  });

AutoFocus( document, 'background-color: #fdd', '' );

//_汎用関数____________________________________________________________
//
}

function setClipboard ( str ) {
    /*@ clipboardData.setData('Text' , str); return str; @*/ return null;
}

function getParent ( node, type, val ) {
  return node ? ( val == node[type] ) ? node: arguments.callee( node.parentNode, type, val): null;
}


function getLocation () {
  var par = location.search.substring(1).split( '&' );
  var cnt = 0, pac, nv, ret = [ ];

  while( pac = par[ cnt++ ] ) {
    nv = pac.split( '=' );
    ret[ decodeURIComponent( nv[0] ) ] = decodeURIComponent( nv[1] );
  }
  return ret;
}

</script>

</body>
</html>