making multiple ajax request on one page

[wizkid]

i was trying to make two separate ajax request on one page
www.phoenix.exofire.net/events.php

i have two js written for it. when only one of the js are inserted it works fine , however when i insert both th js into my code one of the request doesnt take place.

//login.js

var xmlHttp;

var status;

status=check_status();


function check_status()
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 }
var url="check_status.php";

var param="";
//url=url+"&sid="+Math.random();
//alert("THIS IS THE REQ URL :\n"+url);
xmlHttp.onreadystatechange=stateChanged1;
xmlHttp.open('POST',url,true);
//xmlhttp.setRequestHeader("POST /"+url+"HTTP/1.1");
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.setRequestHeader("Content-Length" , param.length);
xmlHttp.setRequestHeader("connection", "close");
//xmlHttp.setRequestHeader("\r\n\r\n");
xmlHttp.send(param);



}
function stateChanged1() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
// document.getElementById("showstatus").innerHTML=xmlHttp.responseText ;

status=xmlHttp.responseText;
//alert(status);
select_content(status);
}

<script type="text/javascript">
var xmlHttp1;
function load_event (event_name)
{

xmlHttp1=GetXmlHttpObject();
if (xmlHttp1==null)
 {
 alert ("Browser does not support HTTP Request");
 return;
 }
var url="event_details.php";

//var username=document.getElementById("login").username.value;
//var pass=document.getElementById("login").pass.value;
//var param="username="+username+"&pass="+pass;
var param="eventname="+event_name;
//url=url+"&sid="+Math.random();
alert("THIS IS THE REQ url : \n "+url);
xmlHttp1.onreadystatechange=stateChanged1;
xmlHttp1.open('POST',url,true);
//xmlhttp1.setRequestHeader("POST /"+url+"HTTP/1.1");
xmlHttp1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp1.setRequestHeader("Content-Length" , param.length);
xmlHttp1.setRequestHeader("connection", "close");
//xmlHttp1.setRequestHeader("\r\n\r\n");
xmlHttp1.send(param);

}
function stateChanged1() 
{ 
if (xmlHttp1.readyState==4 || xmlHttp1.readyState=="complete")
  
document.getElementById("events").innerHTML=xmlHttp1.responseText;
alert("THIS IS THE response : \n "+xmlHttp1.responseText);


}



function GetXmlHttpObject()
{
var  XmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 XmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  XmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  XmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return XmlHttp;
}

</script>

Note: on clicking on the "pancratium " the second request should take place. however a request is sent to the server but a response is not received

 

[misson]

In the future, please post a complete minimal test case. This will aid those trying to help you by not making them have to perform busywork to answer your questions. Furthermore, in producing a minimal test case you will often discover the error yourself.

i was trying to make two separate ajax request on one page
www.phoenix.exofire.net/events.php

i have two js written for it. when only one of the js are inserted it works fine , however when i insert both th js into my code one of the request doesnt take place.

//login.js

var xmlHttp;

var status;

status=check_status();

Globals are evil. Note how you had to take care when naming the variable (xmlHttp1) holding the response for event_details.php. Use closures and objects. Also, pick more descriptive names, such as "loginResponse". Would you know exactly what the variable "xmlHttp" was supposed to hold without looking at every assignment statement for it?

function stateChanged1() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
// document.getElementById("showstatus").innerHTML=xmlHttp.responseText ;

status=xmlHttp.responseText;
//alert(status);
select_content(status);
}

Function stateChanged1() is missing closing bracket. This will prevent login.js from being properly processed and check_status() from being defined. (moral: check your error console).

<script type="text/javascript">
...
function load_event (event_name)
...
function stateChanged1() 
{ 
if (xmlHttp1.readyState==4 || xmlHttp1.readyState=="complete")
  
document.getElementById("events").innerHTML=xmlHttp1.responseText;
alert("THIS IS THE response : \n "+xmlHttp1.responseText);


}
</script>

login.js also defines stateChanged1(). Whichever definition is evaluated last will override the other. This collision is the same you face with global variables and poor naming. Closures will again solve the problem. Example:

function load_event (event_name) {
    var eventDescriptionResponse=GetXmlHttpObject();
    function stateChanged() { 
        if (eventDescriptionResponse.readyState==4 || eventDescriptionResponse.readyState=="complete")
            document.getElementById("events").innerHTML=eventDescriptionResponse.responseText;
        //alert("THIS IS THE response : \n "+eventDescriptionResponse.responseText);
    }
    if (eventDescriptionResponse==null) {
        alert ("Browser does not support HTTP Request");
        return;
    }
    var url="event_details.php";

    var param="eventname="+event_name;
    eventDescriptionResponse.onreadystatechange=stateChanged;
    eventDescriptionResponse.open('POST',url,true);
    eventDescriptionResponse.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    eventDescriptionResponse.setRequestHeader("Content-Length" , param.length);
    eventDescriptionResponse.setRequestHeader("connection", "close");
    eventDescriptionResponse.send(param);
}

As eventDescriptionResponse is never seen outside of load_event, you could give it a less descriptive name (e.g. "response"). In this case, the scope the variable appears in obviates any ambiguity as to the variable's purpose.

Better example:

function postRequest(url, param, handleResponse) {
    var request = xmlHttp=GetXmlHttpObject();
    if (null != request) {
        request.open('POST',url,true);
        request.onreadystatechange=function() {
        switch (request.readyState) {
        case 1:
        case 2:
        case 3:
            break;
        case 4:
        case "complete":
            handleResponse(request);
            break;
            }
        };

        request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        request.setRequestHeader("Content-Length" , param.length);
        request.setRequestHeader("connection", "close");
        request.send(param);
    }
    return request;
}

function check_status() {
    var param="foo=bar&bam=bug-AWWK!";
    // fill param
    var request = postRequest("check_status.php", param, 
        function (request) {
            select_content(request.responseText);
        }
    );
    if (! request) {
        //alert ("Browser does not support HTTP Request");
    }
}

function load_event (event_name) {
    var param="eventname="+event_name;
    // fill param
    var request = postRequest("event_details.php", param, 
        function (request) {
            document.getElementById("events").innerHTML=eventDescriptionResponse.responseText;
        }
    );
    if (! request) {
        //alert ("Browser does not support HTTP Request");
    }
}

Best example: use a JS lib, such as Prototype, jQuery, MooTools or YUI, which all provide more powerful and more complete handling of cross browser issues and errors than the above code.

 

[wizkid]

thanx.................i think i need more practice at writing better a js