variables and ajax

[Andrew Poulos]

I'm working on a "simple" tracking system for a client that will be
receiving elearning packages from 3rd parties.

I'm intending to do the communication with the database using ajax.

My problem is one of concepts. An elearning package, of which I have no
control over, might have code that looks like this;

1: var val = GetValue("name");
2:
3: if (val) {
4: doThis();
5: } else {
6: doThat();
7: }

Line 1 would trigger an ajax call to the db but as the call is
asynchronous does that mean that at line 3 "val" may be undefined?

I'm still struggling with ajax concepts. I can understand how to, say,
update a database but simple things like getting a value into a variable
is escaping me.

Andrew Poulos

 

[Gregor Kofler]

Andrew Poulos meinte:

I'm working on a "simple" tracking system for a client that will be
receiving elearning packages from 3rd parties.

I'm intending to do the communication with the database using ajax.

My problem is one of concepts. An elearning package, of which I have no
control over, might have code that looks like this;

1: var val = GetValue("name");
2:
3: if (val) {
4: doThis();
5: } else {
6: doThat();
7: }

Line 1 would trigger an ajax call to the db but as the call is
asynchronous does that mean that at line 3 "val" may be undefined?

Yes. GetValue() (BTW: better name it "getValue" - it's no constructor)
sends the request. End of story for this part of the script. Once the
response is being returned a callback function assigned to the
onreadystatechange property of the XHR-Object is triggered. This
callback function can now decide whether val is set and in turn invoke
doThis() or doThat(). It's explained in detail an (in)numerous websites
- here's one:
https://developer.mozilla.org/En/Using_XMLHttpRequest

I'm still struggling with ajax concepts. I can understand how to, say,
update a database but simple things like getting a value into a variable
is escaping me.

In the first case you do not necessarily need a callback function. In
the latter case you do.

Gregor

 

[Andrew Poulos]

Andrew Poulos meinte:

Yes. GetValue() (BTW: better name it "getValue" - it's no constructor)
sends the request. End of story for this part of the script. Once the
response is being returned a callback function assigned to the
onreadystatechange property of the XHR-Object is triggered. This
callback function can now decide whether val is set and in turn invoke
doThis() or doThat(). It's explained in detail an (in)numerous websites
- here's one:
https://developer.mozilla.org/En/Using_XMLHttpRequest

Thanks, I follow what you're saying but I get lost with how the callback
function knows which variable to assign a value to. Would I need to hard
code the variable name into the callback?

Andrew Poulos

 

[Gregor Kofler]

Andrew Poulos meinte:

Thanks, I follow what you're saying but I get lost with how the callback
function knows which variable to assign a value to. Would I need to hard
code the variable name into the callback?

What do you mean by "hard code". A closure is all you need.

var foo;
....

xhr.onreadystatechange = function() {
...
foo = xhr.responseText;
}

....

Gregor

 

[Andrew Poulos]

Andrew Poulos meinte:


What do you mean by "hard code". A closure is all you need.

var foo;
...

xhr.onreadystatechange = function() {
...
foo = xhr.responseText;
}

I don't know what the names of the variable(s) that a 3rd party
elearning package may use. So I can't write
foo = xhr.responseText;
as the variable name could be anything.

Andrew Poulos

 

[Andrew Poulos]

I don't know what the names of the variable(s) that a 3rd party
elearning package may use. So I can't write
foo = xhr.responseText;
as the variable name could be anything.

Would a synchronous call be appropriate in this situation? That is:

var foo = getValue("name");

function getValue(n) {
// ajax stuff here
...
xhr.open("post","test.php", false);
xhr.send(passData);
return xhr.responseText:
...
}

Andrew Poulos

 

[slebetman]

I don't know what the names of the variable(s) that a 3rd party
elearning package may use. So I can't write
foo = xhr.responseText;
as the variable name could be anything.

Specify the API as expecting a callback:

// API will pass value as first parameter of callback:
getValue(identifier,callback);

// call it like:

getValue("name", function (foo) {
// 3rd party developer does what he wants to do with foo in here
});

// alternatively, can also be called like:

function myCallback (x) {
// do stuff with x here
}
getValue("name",myCallback);

/*
A possible implementation of getValue is something like:
*/

function getValue(n,fn) {
xhr = new XMLHttpRequest();
...

xhr.onreadystatechange = function () {
...

fn(xhr.responseText);
}
}

 

[Thomas 'PointedEars' Lahn]

Would a synchronous call be appropriate in this situation? That is:

var foo = getValue("name");

function getValue(n) {
// ajax stuff here
...
xhr.open("post","test.php", false);
xhr.send(passData);
return xhr.responseText:
...
}

Synchronous request-response handling would be the only viable option with
this approach. Whether that approach would be appropriate here is quite a
different matter, though; it would depend on the kind of request, the
responsiveness that can be expected of the server, and the responsiveness
demanded from the application. Synchronous request-response handling has a
strong tendency to suspend all other threads of the user agent while it is
in progress.


HTH

PointedEars