ajax自分用メモ
<!-- HTML側 -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ajax Test</title>
</head>
<body>
<p>
<input type="text" id="sendData" value="">
<input type="submit" id="ajaxSubmit" value="Data送信">
</p>
<div id="ajaxPreview"></div>
<script>
var sendData = document.getElementById("sendData"),
ajaxSubmit = document.getElementById("ajaxSubmit"),
ajaxPreview = document.getElementById("ajaxPreview"),
sendUrl = "http://○○○.○○○○.○○○";
ajaxSubmit.addEventListener("click",function(){
var xhr = new XMLHttpRequest();
xhr.open("POST",sendUrl);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
ajaxPreview.innerText = xhr.responseText;
}
}
xhr.send("data="+sendData.value);
},false);
</script>
</body>
</html>
/****** PHP側 ***************************************************/
<?php
header('Access-Control-Allow-Origin: *');
if ($_SERVER["REQUEST_METHOD"] !== "POST") exit;
if (!empty($_POST["data"])){
echo "返ってきたデータ:", htmlspecialchars($_POST["data"],ENT_QUOTES);
}
?>
/*******************************************************************/
XMLHttpRequestオブジェクト作って、
POSTメソッドでopenして
setRequestHeaderして
onreadystatechangeに処理に移行する条件と処理内容書いておいて
dataをsendして
PHP側で$_POST["data"]を受け取って処理して
出力結果を返して
XMLHttpRequestのresponseTextに入ったデータを使って色々する
案外色々エラー出て困った。
PHP側で、送り元のドメインが同じでも処理するよ！とかいうのも書かないといけなかったし。（header('Access-Control-Allow-Origin: *')）
とりあえず原理はこんな感じ、と。
以上、超個人的メモでした！
