0

ユーザーがボタンをクリックしたときにPHP配列の次の項目を表示するページを作成しようとしています。私はAjaxの完全な初心者であり、「HeadFirstAjax」の本をガイドとして使用しています。私のコード（下記）が機能せず、その理由がわかりません。率直に言って、Ajaxをデバッグする方法すらわかりません...

コードは。というファイルにありますIndex.php。私はWampServerを使用しています。

ページが正しく読み込まれます。コードは次のとおりです。

<html><head><script type="text/javascript">
  var id=null;
  function getRequest(){
    try {
      request = new XMLHttpRequest();
    }catch (MS){
      try {
        request = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (MoreMS){
        try {
          request = new ActiveXObject("Microsoft.XMLHTTP");
        }catch (failure){
          request = null;
        }
      }
    }
    return request;
  }

  function showNext(itemId){
    request=getRequest();
    if(request==null){
      alert("Request object is null");
      return;
    }
    var url="index.php?itemId="+escape(itemId);
    request.open("GET",url,true);
    request.onreadystatechange=function(){
      if(request.readyState==4){
        alert("Request.readyState is 4");
        if(request.status==200){
          alert("Request.status is 200");
          document.getElementById('article').value=request.responseText;
        }else{
          alert("Request.status not 200");
          return;
        }
      }else{
        alert("Request.readystate not 4");
        return;
      }
    }
    request.send(null);
  }

  function getItemId(){
    if(id==null){
      id=0;
    }else{
      id=id+1;
    }
    return id;
  }

  function doIt(){
    itemId=getItemId();
    showNext(itemId);
  }
</script></head>
<body><p>
  <textarea id='article'>
  </textarea>
</p>  
<p>
  <button type="button" id='showNext1' onclick="doIt()" >Show next</button>
</p></body></html>

<?php
  $array=array(10,21,32,43,54,65,76);
  if(!isset($_GET['itemId'])){
  }else{
    echo $array[$_GET['itemId']];
  }
  var_dump("GET :",$_GET);
?>

ボタンをクリックすると、次のようになります。

アラートを2回、次に1回、次に1回、次にデータが入力され、次にもう一度1回取得します。結局のところ、には私のコード全体が含まれ、その後にこれが続きます：Request.readystate not 4Request.readyState is 4Request.status is 200textarea Request.readystate not 4textarea

10<pre class='xdebug-var-dump' dir='ltr'><small>string</small> <font color='#cc0000'>'GET :'</font> <i>(length=5)</i>
</pre><pre class='xdebug-var-dump' dir='ltr'>
<b>array</b>
  'itemId' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'0'</font> <i>(length=1)</i>
</pre>

次に、もう一度クリックすると、最後にが表示されることを除いて、同じアラートと出力が表示されます21<pre class='xdebug-var-dump'....。32<pre class....次にクリックすると、最後などを除いて同じものが生成されます。

4

1 に答える 1

1

onreadystatechangeイベントインラインの関数を定義してみてください。また、textareaの値にはvalue、ではなく、を使用してアクセスしますinnerHtml。変更さshowNext()れるのは次のとおりです。

function showNext(itemId){
    request=getRequest();
    if(request==null){
        return;
    }
    var url="index.php?itemId="+escape(itemId);
    request.open("GET",url,true);
    request.onreadystatechange= function(){
        if(request.readyState==4){
            if(request.status==200){
            document.getElementById('article').value=request.responseText;
            }
        }   
    }
    request.send(null);
}
于 2012-11-16T00:57:10.317 に答える