@blog.justoneplanet.info

日々勉強

クロスドメインAjaxサンプルソース

■前提

  • PHPが使えるサーバーであること
  • 下記2ファイルを同じディレクトリにアップして試せること

■test.html

<!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" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" id="cb">
</script>
<script type="text/javascript">
function callback(txt){
    alert(txt);
}
window.onload = function(){
    document.getElementById('button').onclick = function(){
        var originalScriptNode = document.getElementById('cb');
        var newScriptNode = document.createElement('script');
        var query = document.getElementById('text').value;
        newScriptNode.id = 'cb';
        newScriptNode.charset = 'utf-8';
        newScriptNode.src = 'test.php?query=' + query;
        originalScriptNode.parentNode.replaceChild(newScriptNode, originalScriptNode);
    }
}
</script>
</head>
<body>
<form action="#" method="get">
<input type="text" name="text" id="text" size="10" />
<input type="button" name="button" id="button" value="submit" />
</form>
</body>
</html>

■test.php

<?php
print('callback("' . $_GET['query'] . '");');
?>

2 Comments»

button+submit-でつながるブログリング…

button+submitに関するブログをまとめています。…

RSS feed for comments on this post.TrackBack URL

Leave a comment