JavaScriptでサーバーにあるphpを実行させて結果を受け取る方法

JavaScriptにはサーバーにあるphpに処理をさせて、その結果を受け取らせる事が可能です。

この機能を使えばボタンを押してPHPの処理を行ってもページの更新やページの位置などの変更をしなくても実行できるようにします。

別のPHPファイルにデータを送る

まずデータを受信し加工し返信するphpを準備します。

・test_java.php

<?php
error_reporting(0);
mb_language("ja");
mb_internal_encoding('UTF-8');

$url=$_POST["data"];
print $_POST["data"].strval(rand());
?>

$_POST[“data”]でデータを受け取り、ランダムの数値を追加して返すという内容です。
これを中身としたファイルを作成しサーバーへアップロードします。

そして次にJavaScriptを持つページを用意します。

function createXmlHttpRequest()
{
	var xmlhttp=null;
	if(window.ActiveXObject)
	{
		try
		{
			xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch(e)
		{
			try
			{
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e2)
			{
			}
		}
	}
	else if(window.XMLHttpRequest)
	{
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}

JavaScript側では、まずサーバー側とデータを通信するための機能を持つAPIを取得します。

function sendRequest()
{
	var moji="あいうえお";
	var xmlhttp=createXmlHttpRequest();
	if(xmlhttp!=null)
	{
		xmlhttp.open("POST", "../test_java.php", false);
		xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		var data="data="+moji;
		xmlhttp.send(data);
		var res=xmlhttp.responseText;
		document.getElementById( "textareas" ).value = res;
	}
}

次にJavaScriptで”あいうえお”という文字をＰＯＳＴで送信する関数を設定します。
受信したらdocument.getElementById( “textareas” ).value = res;にテキストエリアにＰＨＰから取得したデータを入れます。

そして、フォームを設定します。

<form>
<input type="button" name="botan" id="button01" onClick="sendRequest();" value="ボタン">
<TEXTAREA id="textareas" style="width:100%;height:160px;" wrap="off"></TEXTAREA>
</form>

ボタンを押すとデータが送信され、ここのtextareaに加工されたデータが挿入されます。