あまりキレイなソースでなくて恥ずかしいんですが、Ajaxでフォームで指定したidから当ブログのタイトルを引いてくるサンプルです。
さらに恥ずかしいことに、もともとはJSONのサンプルを作ろうとして、途中で断念してしまったものです。
ついでにFireFoxでしか動作しません。IEはNGです。(これは引用したjsに問題があるみたいです)
サンプルはブログエントリとしての稼動は不可だったため、別途用意してあります。
→ こちら
◆ファイルの説明
getBlogTitle.html・・・Ajaxで当ブログのタイトルをid検索するためのフォーム
getBlogTitle.php・・・idから実際にDB(MySQL)を検索するプログラム
getBlogIDMax.php・・・現在idのMAXを取得するプログラム
js/jslb_ajax02.js・・・Ajaxのフォームとプログラムを仲介するJavaScript
◆ソース
getBlogTitle.html
<html>
<!-- 暫定ライブラリ jslb_ajax02.js -->
<script language = "JavaScript"
charset = "utf-8"
src = "http://typista.dip.jp/test/json/001/js/jslb_ajax02.js">
</script>
<script language = "JavaScript" charset = "utf-8">
<!--
//起動
function queryTitle( callback, obj, method, fileURL, async ) {
fileURL = fileURL + "?id=" + obj.value;
sendData( callback, method, fileURL, async );
}
function sendData( callback, method, fileURL, async ) {
//送信データをエンコード
var encfileURL = encodeURI( fileURL );
//送信
requestFile( callback, '', method, encfileURL, async );//出力
//outputMsg( "ちなみにこんなエンコードで送出しました: <br />"+encfileURL + "<br /><br />" );
}//コールバック関数
// 受信時に起動するスクリプト
function onloaded(oj) {
decdata = recieveData(oj);
//出力
//outputMsg( "【検索結果】" + res.GET + "<br /><br />" );
outputMsg( "out1", "【検索結果】" + decdata + "<br /><br />", false );
}
function onloaded_getIdMax(oj) {
decdata = recieveData(oj);
outputMsg( "id_max", decdata, true );
}
function recieveData(oj) {
//受信データをデコード
var decdata = decodeURI( oj.responseText );//受信データをJavaScriptとして実行(JSON化)
//eval("var res =" + decdata );//出力
//outputMsg( "【検索結果】" + res.GET + "<br /><br />" );
return decdata;
}function outputMsg(target, msg, overwrite) {
//出力
if( overwrite == true ) {
document.getElementById(target).innerHTML = msg;
} else {
document.getElementById(target).innerHTML += msg;
}
}//-->
</script>
<body onload="sendData( onloaded_getIdMax,
'GET',
'http://typista.dip.jp/test/json/001/getBlogIDMax.php',
true )">
<br />
idを入力するとタイトルを検索します。
<form>
<input type="text" name="query_id" />
<input type="button" onclick="queryTitle(onloaded,
query_id,
'GET',
'http://typista.dip.jp/test/json/001/getBlogTitle.php',
true)" value="検索" />
</form>
<table border="0">
<tr>
<td>※記事の関係で2~</td>
<td><div id="id_max"></div></td>
<td>(idの最大値もJSON取得しています)までが検索対象です。</td>
</tr>
</table>
<hr />
<!-- 出力用DIV -->
<div id="out1"></div>
</body>
</html>
getBlogTitle.php
< ?php //GETを取得 $get = addslashes($_GET['id']); if( mbereg("[^0-9]+", $get) ) { echo "ERROR! [" . $get . "]"; exit; } $conn=mysql_connect('localhost','MYSQL_ID','MYSQL_PASSWORD'); mysql_select_db('wordpress'); $sql = "select post_title from wp_posts where id=" . $get; //$sql = "select title from em_weblog where blog_id=11"; $result=mysql_query($sql,$conn); if($result){ $row=mysql_fetch_array($result); } mb_language('Japanese'); mb_internal_encoding('utf-8'); //charsetをut-8に mb_http_output ( 'UTF-8' ); //出力 echo $row[0]; ?>
getBlogIDMax.php
< ?php $conn=mysql_connect('localhost','MYSQL_ID','MYSQL_PASSWORD'); mysql_select_db('wordpress'); $sql = "select max(id) from wp_posts"; $result=mysql_query($sql,$conn); if($result){ $row=mysql_fetch_array($result); } mb_language('Japanese'); mb_internal_encoding('utf-8'); //charsetをut-8に mb_http_output ( 'UTF-8' ); //出力 echo $row[0]; ?>
js/jslb_ajax02.js
//XMLHttpRequestオブジェクト生成
//createHttpRequest()
//
// @returns XMLHttpRequestオブジェクト またはnull
//
function createHttpRequest()
{
if(window.ActiveXObject) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
return null;
}
}
} else if(window.XMLHttpRequest) {
return new XMLHttpRequest();
} else {
return null;
}
}// requestFile( callback , data , method , fileURL , async )
//
// @param callback 受信時に起動する関数名
// @param data 送信するデータ
// @param method "POST" or "GET"
// @param fileURLリクエストするファイルのURL
// @param async Asyncならtrue Syncならfalse
// --@param user A username for authentication if necessary.
// --@param password A password for authentication if necessary.
// パスワード等はとりあえず省略
//
function requestFile( callback , data , method , fileURL , async )
{
//XMLHttpRequestオブジェクト生成
var oj = createHttpRequest()
if( oj == null ) return null;//ブラウザ判定-->別関数にした方がすっきりする?
var ua = navigator.userAgent;
var safari = ua.indexOf("Safari")!=-1;
var konqueror = ua.indexOf("Konqueror")!=-1;
var mozes = ((a=navigator.userAgent.split("Gecko/")[1] )?a.split(" ")[0]:0) >= 20011128 ;//Konquerorはonloadが不安定http://jsgt.org/ajax/ref/test/response/responsetext/try1.php
if(window.opera || safari || mozes) {
oj.onload = function () { callback(oj); }
} else {
oj.onreadystatechange =function () {
if ( oj.readyState == 4 ) {
callback(oj);
}
}
}
oj.open( method , fileURL , async );if(method == 'POST') {
//このメソッドがWin Opera8でエラーになったので、とりあえず分岐2005.5.20
if(!window.opera) {
oj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
}
//send メソッド
oj.send(data);
}
No comments yet. You should be kind and add one!
By submitting a comment you grant typista a perpetual license to reproduce your words and name/web site in attribution. Inappropriate and irrelevant comments will be removed at an admin’s discretion. Your email is used for verification purposes only, it will never be shared.