7/25~8/5 までインターンシップに行ったんだけど、HTML5, CSS3, JavaScript を使ってオセロゲームを作った。守秘義務で企業名とか言えないけど。
インターンシップの最後にAjaxで実装しようとしたんだけど、時間なかったらから出来なかった。その続きみたいな感じでAjax使ってみた。
MAMP使ってるけど、windowsの人はXAMPPだっけ？つかったら同じ事できると思う。
サーバ側をphpで実装してjsのXMLHttpRequestで通信するやつ。
フォームに名前を入力すると、こんにちは○○さん って返すプログラム作りました。
MAMP使ってるけど、windowsの人はXAMPPだっけ？つかったら同じ事できると思う。
サーバ側をphpで実装してjsのXMLHttpRequestで通信するやつ。
フォームに名前を入力すると、こんにちは○○さん って返すプログラム作りました。
構造はこう。
クライント側が HTMLとJS
サーバ側が PHP
サーバはapacheって言うの？よくわかんないけど、macにMAMPをインストールしてhtdocsにhtmlとphp入れただけ。
htmlとphpの通信が出来るのか試したかっただけ。
XMLHttpRequestっていうやつを使うタイプのやつ。
ajax, php, javascript, xmlhttprequest...
動いたけど、やり方1から載ってるサイトなかったからやり方紹介。
1.MAMPインストール
ここみてやった。後のほうのポート番号の変更とかしてない。
MAMPインストールして MAMP.app を起動しただけ。
ポート番号は8888のまま。
2.HTMLファイルの作成
HTMLファイルの説明特にないからこれ書いて。
test.html
//ここから
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> </title>
<script>
<!--
var request = new XMLHttpRequest();
function XMLRequestByPost(postData){
request.open("POST","test.php",true);
request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
request.onreadystatechange = processResponse;
request.send("name="+postData);
}
function processResponse(){
if(request.readyState == 4) {
if(request.status == 200 || request.status == 201) {
console.log("receive success");
console.log(request.responseText);
result=document.getElementById("result");
result.innerHTML=request.responseText;
}
}
}
function RequestByPost(){
XMLRequestByPost(document.getElementById("name").value);
}
window.onload = function(){
document.getElementById("submit").addEventListener("click",RequestByPost,false);
}
-->
</script>
</head>
<body>
<input type="text" id="name" width=10>
<input type="submit" id="submit">
<div id="result">a</div>
</body>
</html>
//ここまで
書いたら、
/Applications/MAMP/htdocs/
のフォルダの中に放り込む。
3. phpファイルの作成
phpはそんなに長くない。
test.php
//ここから
<?php
if($_POST['name']){
$post_name = htmlspecialchars($_POST['name'], ENT_QUOTES);
echo "こんにちは、".$post_name." さん ";
//echo 1;
}else{
echo "名前を入力してください";
}
?>
//ここまで
test.htmlと同じく/Applications/MAMP/htdocs/ の中に放り込む。
4. 動作確認
MAMP.app を起動。
http://localhost:8888/test.htmlにアクセス。
こんな感じ。
 |
| http://localhost:8888/test.html アクセス時 |
フォームに適当に入力して送信ボタンをクリックする。
こんな感じになる。
 |
| 送信ボタンクリック結果 |
htmlで XMLHttpRequestでphpと通信して出力された結果画面。
mampを使って一番簡単なajaxは出来た。
サーバ側でデータを保存できるようにしたり、My SQL？よくわかんないけど、DBとか扱えるようにしたら簡単なwebアプリケーション作れると思う。
ajax動いて良かった。
0 件のコメント:
コメントを投稿