読者です 読者をやめる 読者になる 読者になる

ひとことブログ

短文ブログです。自分のtwitterからの転載もあります。気分で長文になるかもしれません。

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: *'))

 

とりあえず原理はこんな感じ、と。

以上、超個人的メモでした!

広告を非表示にする