Ajax功能问题

Question

I wrote an ajax function named getContent() and structured like this

getContent(whichcontent){//code here to get content}

The specific code is here:

function getXmlHttpRequestObject() {
  if (window.XMLHttpRequest) {
    return new XMLHttpRequest(); //Not IE
  } else if(window.ActiveXObject) {
    return new ActiveXObject("Microsoft.XMLHTTP"); //IE
  } else {
    alert("Your browser doesn't support the XmlHttpRequest object.  Better upgrade to Firefox.");
  }
}

var receiveReq = getXmlHttpRequestObject();

var page_id = 1;

function getContent(which_page,append){
  if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {    

    receiveReq.open("GET", 'spt/page_'+which_page, true);//get the text file

    receiveReq.onreadystatechange = function(){
        handleGetContent(which_page,append);
    }
    receiveReq.send(null);
  }     
}

function handleGetContent(which_page,append){
    if (receiveReq.readyState == 4) {        
        if(append == 1){
            $('#container').append("<div class='page' id='page_"+which_page+"'><div class='title'>围城</div><p>" + receiveReq.responseText + "</p><div class='pagenum'>"+which_page+"</div></div>");

        }
        if(append == 0){
          $('#container').prepend("<div class='page' id='page_"+which_page+"'><div class='title'>围城</div><p>" + receiveReq.responseText + "</p><div class='pagenum'>"+which_page+"</div></div>");          
        }
    }
}

And I used the getContent like this

$(document).ready(function (){
    getContent(1,1);
    getContent(2,1);
}

The problem is I only get one ... and the other one with id page_2 doesn't appear. I'm wondering whether the ajax function can be only called once in a js function or I just made the ajax function wrong. Somebody help me!! Thanks in advance.

Answer 1

XMLHttpRequest calls are asyncronous, so if you use only one request object the second call to getContent will be ignored because receiveReq.readyState is neither 0 nor 4.