Simple AJAX Problem

[NeoGeo]

I'm using the basic AJAX setup that I've seen on most tutorials (with minor variations):

function createRequestObject() {
    var tmpXmlHttpObject;

//depending on what the browser supports, use the right way to create the XMLHttpRequest object
if (window.XMLHttpRequest) { 
    // Mozilla, Safari would use this method ...
    tmpXmlHttpObject = new XMLHttpRequest();

} else if (window.ActiveXObject) { 
    // IE would use this method ...
    tmpXmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");
}

return tmpXmlHttpObject;
}

//call the above function to create the XMLHttpRequest object
var http = createRequestObject();

function makeGetRequest(phpfile) {
    //make a connection to the server ... specifying that you intend to make a GET request 
    //to the server. Specifiy the page name and the URL parameters to send
    http.open('get', phpfile);

//assign a handler for the response
http.onreadystatechange = processResponse;

//actually send the request to the server
http.send(null);
}

function processResponse() {
    //check if the response has been received from the server
    if(http.readyState == 4){
        //read and assign the response from the server
        var response = http.responseText;

    //do additional parsing of the response, if needed
    //in this case simply assign the response to the contents of the <div> on the page. 
    document.getElementById('container').innerHTML = response;

    //If the server returned an error message like a 404 error, that message would be shown within the div tag!!. 
    //So it may be worth doing some basic error before setting the contents of the <div>
}
}

Then I'm making the request here:

<a href="javascript:makeGetRequest('call.php')">Click here</a>

This code works just fine.

But my problem is that with the current code any response has to be put in a div with id='container'.

To be more flexible I wanted to have the processResponse function take a parameter (divname) that I could replace with the hard coded 'container' div name.

But when I try and do that simply making this change to the JS:

function makeGetRequest(divname,phpfile) {
    //make a connection to the server ... specifying that you intend to make a GET request 
    //to the server. Specifiy the page name and the URL parameters to send
    http.open('get', phpfile);

//assign a handler for the response
http.onreadystatechange = processResponse(divname);

//actually send the request to the server
http.send(null);
}

function processResponse(divname) {
    //check if the response has been received from the server
    if(http.readyState == 4){
        //read and assign the response from the server
        var response = http.responseText;

    //do additional parsing of the response, if needed
    //in this case simply assign the response to the contents of the <div> on the page. 
    document.getElementById(divname).innerHTML = response;

    //If the server returned an error message like a 404 error, that message would be shown within the div tag!!. 
    //So it may be worth doing some basic error before setting the contents of the <div>
}
}

And this change to HTML:

<a href="javascript:makeGetRequest('container', 'call.php')">Click here</a>

This does not work at all, the http.onreadystatechange is stuck at 1. This seems unbelievable to me I almost couldn't believe my eyes as I removed the variable to make it work again and then added it back to break it again.

In fact I noticed that even if I add parenthesis to the function call (NOT touching the definition OR adding paramenters) it would break:

function makeGetRequest(phpfile) {
    //make a connection to the server ... specifying that you intend to make a GET request 
    //to the server. Specifiy the page name and the URL parameters to send
    http.open('get', phpfile);

//assign a handler for the response
http.onreadystatechange = processResponse();

//actually send the request to the server
http.send(null);
}

The only difference in the original working code was adding the () to processResponse call!!

Anyways, this seems like I must be making some basic mistake as I am not that familiar with JS or AJAX (but respectable at HTML and PHP).

Any help is appreciated - thanks.

[sneakyimp]

I don't think the modified approach you are trying is going to work because I don't think you are permitted to assign a parameter to the onreadystatechange assignment. I would switch back to your original code and do the following.

1) add the name of the div to be populated as a query string argument to your php script. for instance, my div's name is 'myDiv'

<a href="javascript:makeGetRequest('call.php?divName=myDiv')">Click here</a>

2) Set up your PHP script to send that div name back to the processResponse function. This is pretty easy to do if your PHP install supports [man]json_encode[/man]. Your PHP script might look something like this:

$result = array();
$result['html'] = "Your AJAX was <b>successful</b>!";
$result['divName'] = $_GET['divName'];
echo json_encode($result);

3) alter your processResponse function to parse the JSON response into a javascript object. In order to do that, you'll probably need a JSON parser. There's one here. There's another one here.

If you <link> that first json parser script in your page, your processResponse function might look like this:

function processResponse() {
    //check if the response has been received from the server
    if(http.readyState == 4){
        //read and assign the response from the server
        var response = http.responseText;

    //do additional parsing of the response, if needed
    var obj = JSON.parse(response);
    // NOTE: you should probably validate obj here...make sure it's got valid content

    //in this case simply assign the response to the contents of the <div> on the page. 
    document.getElementById(obj['divName']).innerHTML = obj['html'];

    //If the server returned an error message like a 404 error, that message would be shown within the div tag!!. 
    //So it may be worth doing some basic error before setting the contents of the <div>
}
}

Hope that helps.

[cahva]

..or change your function to this:

function makeGetRequest(myDiv,phpfile) 
{
	http.abort();
	http.open("GET", phpfile, true);
	http.onreadystatechange=function()
	{
		if(http.readyState == 4)
		{
			document.getElementById(myDiv).innerHTML = http.responseText;
		}
	}
	http.send(null);
}

🙂

[NeoGeo]

Thanks cahva that worked wonderfully!!

I can't believe JS wouldn't let you add a parameter, but your solution works great luckily!

[Weedpacket]

Incidentally, the reason for

NeoGeo wrote:

The only difference in the original working code was adding the () to processResponse call!!

is that

    http.onreadystatechange = processResponse;

just assigns the processResponse function to http.onreadystatechange, while

    http.onreadystatechange = processResponse();

calls the processResponse function and assigns the return value.

So what you could have done was write a processResponseGenerator function that took a parameter and returned a function, and then call that with your argument and assign its return value to the http.onreadystatechange property.

function processResponseGenerator(divname) {
    return function() {
        // blah blah blah basically what's in
        // processResponse now, but also using divname.
    };
}

To use:

http.onreadystatechange = processResponseGenerator("foobar");