prototype.jsのサンプル

JavaScript

ちょっとprototype.jsを使う機会があったので、忘れないように使い方を書いておこう。

<!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-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<script type="text/javascript" src="/javascript/prototype.js"></script>
<script type="text/javascript">

var numCount = 0;
var isRequestSend = false;

function request() {
  if(!isRequestSend) {
    isRequestSend = true;
    var data = {q: 'パラメータ', a: numCount};
    var req = new Ajax.Request(
      'test.php',
      {
        method : 'get',
        parameters: $H(data).toQueryString(),
        onSuccess : onSuccessHandler,
        onFailure : onFailureHandler
      }
    );
  }
}

function onSuccessHandler(res) {
  var data = eval( "(" + res.responseText+ ")" );
  insertResult(data);
  numCount++;
  isRequestSend = false;
}


function onFailureHandler() {
  isRequestSend = false;
}

function insertResult(data){
  for(var i=0; i<data.length; i++) {
    var node = document.createElement("a");
    node.href = 'index.html';
    var d = data[i];
    node.innerHTML = "param1:"+ d['param1']+"param2:"+ d['param2'];
    var parent = $("result");
    parent.insertBefore(node, $("point"));
  }
}

</script>
</head>
<body>
<form>
<a onclick="request();">test</a>
</form>
<div id="result">
  <div>element1</div>
  <div id="point">element2</div>
</div>

</body>
</html>