非同期通信でデータ取得(GET)
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD.xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta HTTP-EQUIVE="Content-Type" CONTENT="text/html;charset=utf-8" />
<title>非同期通信でデータ取得(GET)</title>
<script src="../js/prototype.js" type="text/Javascript"></script>
<script src="../js/funcs.js" type="text/Javascript"></script>
<script src="../js/test1.js" type="text/Javascript"></script>
</head>
<body>
<form id=frm name=frm>
登録ユーザID<input type=text id=userid name=userid value="" style="width:200px;"><br />
登録ユーザ名<input type=text id=usernm name=usernm value="" style="width:200px;"><br />
<input type=button id=btn1 name=btn1 value="検索">
</form>
</body>
</html>
<!--
test1.js
//画面の起動時に呼びだされます
Event.observe( window, 'load', getResultPHP );
//呼び出すJSONデータの登録処理をします
function getResultPHP(){
//画面のボタン処理を実装します
Event.observe(
'btn1',
'click',
function()
{
funcGetData1();
}
);
}
//Clickしたときの動作を定義します
function funcGetData1()
{
var userid = document.getElementById("userid").value;
var xhrObj = getXhrObj();
xhrObj.open("get", "../php/test1.php?userid="+userid);
//送信データのContent-Typeを指定しています
xhrObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
/*
readyState
0:オブジェクトが生成されているが初期化されていない
1:オブジェクトが生成されたがsendメソッドが呼ばれていない
2:sendメソッドがよばれstatusとヘッダが有効になった
3:クライアントは応答テキストを受信中
4:すべての操作が完了しデータをすべて受信完了
status
200:リスクエスト成功
401:許可なし
403:アクセス拒否
404:存在不明
500:サーバ内部エラー
*/
xhrObj.onreadystatechange = function(){
if(xhrObj.readyState == 4){
if(xhrObj.status == 200){
var usernm = xhrObj.responseText;
document.getElementById("usernm").value = usernm;
}
}
}
xhrObj.send("userid="+userid);
}
test1.php
<?php
header("Content-Type:text/html;charset=utf-8;");
$data1=$_GET["userid"];
if($data1=="")
{
print "登録ユーザIDを入力してください。";
return ;
}
print "test user";
?>
--------------------------------------------------
-->
|
|