0

我正在尝试构建一个页面，当用户单击按钮时，该页面将显示 PHP 数组中的下一项。我是 Ajax 的新手，我正在使用“Head First Ajax”一书作为指南。我的代码（如下）不起作用，我不明白为什么。坦率地说，我什至不知道如何调试 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);
?>

当我单击按钮时，会发生以下情况：

我收到两次Request.readystate not 4警报，然后是一次，Request.readyState is 4然后是一次Request.status is 200，然后是textarea填充，然后是一次 Request.readystate not 4。毕竟textarea包含我的整个代码，然后是：

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事件内联定义函数。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 回答