关于ajax的debug小记一则－－小问题往往容易被忽略

今天写程序的时候遇到一个问题，费了不少功夫才把bug给找出来了。本来其实是很简单的问题，不过一开始的时候还是忽略了。看来低级错误还是一如既往的难以避免，特以此文记之，希望以后不会再犯同类的错误。

问题描述：

主页上定义用来显示数据的div，当页面触发了某个事件（如<select>的onchange()），就从database加载数据在该div内显示出来。而数据是用一个table来显示的，该table有css文件和javascript来设置style。

因为涉及到database的数据加载，我决定用ajax来做。于是，整个流程如下：

触发事件(select.onchange()) --> ajax (XMLHttpRequest) --> set table style(用css和javascript方法来实现)

为了方便代码的重用，把ajax那部分做成了单独的一个loadXMLDoc.js文件，并设定了一些传入参数，使得该部分代码更通用化，代码如下：

 

/*
This function is to load a file by sending xmlhttprequest
When the data is being transferred, show some information to the user (usually, the info would be a loading image)
When the file loaded, display the file in the specified div
@docUrl: the file to be laoded
@docDisDiv: the div to display the file
@infoHtml: the html string, eg: "<img src='image/22-1.gif' alt='loading...'></img>";
@infoDiv: the div to display the waiting info
*/

 

function  loadXMLDoc(docUrl,docDisDiv,infoHtml,infoDiv){
     var  xmlhttp = null ;
     if  (window.XMLHttpRequest){ //  code for Firefox, Opera, IE7, etc.
        xmlhttp = new  XMLHttpRequest();
    } else   if  (window.ActiveXObject){ //  code for IE6, IE5
        xmlhttp = new  ActiveXObject( " Microsoft.XMLHTTP " );
    } if  (xmlhttp != null ){
        xmlhttp.onreadystatechange  =   function (){
             if  (xmlhttp.readyState == 4 ){ //  4 = "loaded"
                 if  (xmlhttp.status == 200 ){ //  200 = "OK"
                    document.getElementById(docDisDiv).innerHTML = xmlhttp.responseText; // load data
                    document.getElementById(infoDiv).innerHTML  =   "" ; // data loaded, clear waiting info
                } else {
                    alert( " Problem retrieving data: "   +  xmlhttp.statusText);
                }
            } else {
                document.getElementById(infoDiv).innerHTML  =  infoHtml; // waiting data transfering, display waiting info...
            }
        }
        xmlhttp.open( " GET " ,docUrl, true );
        xmlhttp.send( null );
    } else {
        alert( " Your browser does not support XMLHTTP. " );
    }
}

熟悉ajax的同志都应该清楚，这是对一个典型的“ajax文件加载请求”代码，只是里面做了作了小小的修改，传入了几个参数而已。

 

好了，下面再来看看op.php内的内容：

< div >
< table id = " listTable " >
< caption > The Latest Purchase Order </ caption >
     < thead >
     < tr  class = " odd " >
         < th scope = " col "  abbr = " ORDER ID " > Order ID </ th >
         < th scope = " col "  abbr = " SELLER ID " > Seller ID </ th >
         < th scope = " col "  abbr = " EMPLOYEE ID " > Employee ID </ th >
         < th scope = " col "  abbr = " DATE " > Date </ th >
         < th scope = " col "  abbr = " STATUS " > Status </ th >
     </ tr >     
     </ thead >    
     < tbody >
<? php
require_once ' lib/ListTableData.php ' ;
$table   =   " order_purchase " ;
$fields   =   array ( " order_id " , " seller_id " , " employee_id " , " date " , " status " );
$sql   =   " SELECT * FROM order_purchase ORDER BY date DESC LIMIT 20 " ;
$dataList   =   new  ListTableData( $table , $fields , $sql );
$dataList -> printData();
?>
</ tbody >
</ table >
</ div >

关于这个文件的代码，其实也不用理会，只要明白，这个table有个id属性，然后外部代码根据这个id就可以将这个table的style按照css和js定义好风格来设置。

 

最后，我们再来看看在index.php中代码是怎么被调用的：

var  docUrl  =   " op.php " ;    
var  docDiv  =   " right_top_itemlist " ;
var  infoHtml  =   " <img src='image/22-1.gif' alt='loading...'></img> " ;
var  infoDiv  =   " loading_info_div " ;

loadXMLDoc(docUrl,docDiv,infoHtml,infoDiv);//load file and construct table

setTableStyle(“listTable”);//set the style of the table

loadXMLDoc(docUrl,docDiv,infoHtml,infoDiv);    这一行就没什么说的了，就是调用那个js文件的方法。

setTableStyle();    这一行目的就是将加载后的table的style设置好，至于当中的style代码跟这个主题无关紧要，因此不用理会，知道它的作用就行了。

简单概括一下就是：发送ajax请求，文件加载的时候显示等候信息，当文件加载完就以table的形式显示数据，然后将table的style设置好。

好了，开始测试。测试结果：在IE下，成功得到了设想当中的效果，可是在Firefox下，只能成功加载数据，但表格的style设置不成功。

于是用firefox的debug工具，在其中一个js语句内：

var  Ptr = document.getElementById(id).getElementsByTagName( ' tr ' );

出现了如下的错误信息：error document.getElementById(id) has no properties(其中的id就是我从外面传进去的一个table的名字，在这里也就是“listTable”了) 。

我一直都很纳闷，不知道为什么会出现这个error，因为我通过alert()方法测试，确定“listTable”已经正确传进去了，但是为什么却又出现了这个错误呢？代码改来改去，不断的测试，可还是百思不得其解。。。

后来，我在设置table的那段代码中加入了一个语句来测试所有"tr”标签的总数量，结果发现，每次alert出来的<tr>标签的数量竟然不是当前加载的table的<tr>的数量，而是上一次加载的table的那个数量，也就是说，这段"setTableStyle" 代码set的根本就不是当前显示数据的那个table，而是上一次加载数据的那个table。（在这里要补充一下：由于加载的那些数据是动态的，因此每次加载的行数，也就是<tr>的数量都不同的）那它的style是当然不可能被正确设置了。可是，为什么会出现这样的问题呢？明明就是在loadXMLDoc()之后setTableStyle()了啊。。。并且，在IE下面也是成功通过的啊。。。到底是哪里出的问题呢？想啊想，debug啊debug。。。几乎抓破头皮了，还是没找出来原因。。。

后来，突然脑海好像闪了一下的样子。。。我想到了些东西。。。

对！问题就在这里，一定是这里：

        xmlhttp.onreadystatechange  =   function (){
             if  (xmlhttp.readyState == 4 ){ //  4 = "loaded"
                 if  (xmlhttp.status == 200 ){ //  200 = "OK"
                     ...

当xmlhttp请求发送出去以后，先从database提取数据，然后数据返回来，然后才去构造那个"listTable”，而并不是马上就将"listTable”构建的，是需要一定时间的，这也是为什么我们很多时候将loading image显示出来的原因！显然，当loadXMLDoc()被执行之后，紧跟着就执行setTableStyle()，从表面上看执行顺序是没错的，然而实际上是，当setTableStyle()开始运行时，xmlhttp还在请求当中，数据还没完全返回来，"listTable” 根本还没有构建起来。。。这也就是为什么，后来我alert()得到的<tr>数目并不是当前显示的table的tr数目，而是上一个table的tr数目－－因为这时候，新的table根本还没构建。。。也就是说，当新的table构建好以后，根本就没有对当前的table进行setTableStyle()，而是对上个table做了。

后来将setTableStyle()的调用放在了xmlhttp的请求完成后，也就是：

xmlhttp.onreadystatechange  =   function (){
      if  (xmlhttp.readyState == 4 ){ //  4 = "loaded"
             if  (xmlhttp.status == 200 ){ //  200 = "OK"
                   document.getElementById(docDisDiv).innerHTML = xmlhttp.responseText; // load data
                   document.getElementById(infoDiv).innerHTML  =   "" ; // data loaded, clear waiting info
                   setTableStyle();
                } else {
                    alert( " Problem retrieving data: "   +  xmlhttp.statusText);
                }

终于，成功了。再debug就没有错了，无论是在ie下还是ff下。。。

其实说了一大堆也就是一言可以蔽之：在使用ajax xmlhttprequest的时候要注意，方法的调用时机要合适，不能想当然。

正如我在文章开头说到的，本来是一个很基本的问题，但是因为没有注意好，结果弄了大半天才高明白，bs一下自己。。。

不过，这里又提出了一个问题，不知道为什么，在ie下面，没有出现这个问题的呢？？？这个问题所反映出的ie和ff两个浏览器的机制的不同点究竟是什么？值得探讨。。。