Aaaahhhhh, I see. (Can't tell I'm a n00b at AJAX can ya? Or that I even had anything working at all just by copy/paste from sketchy tutorials?)
We've all been there. With time, all things pass :)
And "function response" can be empty between the {} if I don't have other things to do after that, right?
Alrightey. Buckle down and forget everything you learned about JavaScript. Here we go.
JavaScript is fiercely object-oriented. Just about everything is an object. 2 is an instance of the Number class. 'Hello, World!' is an instance of the String class. And getFunky (in the example above) is an instance of the Function class.
As I noted above, when you type this:
-
function getFunky(mark) { return mark * 5; }
-
JavaScript treats it like this:
-
getFunky = new Function('mark', 'return mark * 5;');
-
The browser creates a new global
variable called 'getFunky', and assigns it an instance of the Function class with one argument ('mark'), and a function body ('return mark * 5;');
The two statements are equivalent, but the browser will automatically use the latter form at runtime.
Remember that.
All functions in JavaScript are actually Function objects.
Ok, so with that in mind, consider this: When you invoke a function, and you pass arguments to that function, sometimes you use 'literals' instead of variables. Here's an example:
-
doSomething(5);
-
-
var mark = 5;
-
doSomething(mark);
-
In both cases, you're passing the number 5 to doSomething. But in the first statement, you use the 'literal' 5, whereas in the second set of instructions, you're passing the variable 'mark', which has a value of 5.
So far so good?
Now, since in JavaScript, the number 5 is actually an instance of the Number class, you could also do this:
-
doSomething(new Number(5));
-
This statement creates a new instance of the Number class, assigns it the value of 5 and passes it to doSomething.
Ok. Now, instead of a Number object, let's use a Function object. We'll start with an easy one:
-
function myFunc(x) { return x * 5; }
-
// Which is the same as:
-
// myFunc = new Function('x', 'return x * 5;');
-
-
alert(myFunc);
-
What happens here, keeping in mind that myFunc is a
variable that
stores a Function object?
The output of the alert statement, btw, is outside the scope of this post, so we'll just move on to the next part:
-
// Remember from before where we passed a literal to a function:
-
alert(10);
-
alert(new Number(10));
-
// Or...
-
alert('Hello, World!');
-
alert(new String('Hello, World!'));
-
-
// We can also pass a Function 'literal':
-
alert(function(x) { return x * 5; });
-
alert(new Function('x', 'return x * 5;'));
-
Note that, just like 10 or 'Hello, World!', there is no variable that stores the function you created in those last two statements; they are called "anonymous functions".
Still with me?
So going back to your code, when you type:
-
initAjax(url, function(response) {
-
});
-
which is identical to this:
-
initAjax(url, new Function('response', ''));
-
You're actually creating a new anonymous function which takes one argument (response, which will store the returned object from your XMLHttpRequest call automatically [and you don't have to worry about it; just assume that it will]).
Now, let's take a look at initAjax:
-
function initAjax(url, callback)
-
Note that url is a String object, and callback is a Function object. callback stores the anonymous function that you created when you invoked initAjax in the last code block.
Likewise, when you do this:
-
http.onreadystatechange = callback;
-
You are copying the function stored in callback to http.onreadysta techange. When http's readystate changes, it will check to see if there is a function stored in its onreadystatecha nge property, which in this case is (technically a copy of) the anonymous function you created when you invoked initAjax.
Hope that answered a few more questions than it generated.
And also, you are correct:
This can't be right:
-
function initAjax(url, callback) {
-
var http = getHTTPObject();
-
var http = new XMLHttpRequest();
-
http.open("GET", url, true);
-
http.onreadystatechange = callback;
-
http.send(null);
-
}
Get rid of this line:
- var http = new XMLHttpRequest();
Since you brought in the getHTTPObject function, you no longer need that line. getHTTPObject will create a new XMLHttpRequest object (or some Microsoft thing if you're using IE) and return it.
In this case, initAjax stores the returned object to the variable http.
-
function initAjax(url, callback) {
-
var http = getHTTPObject();
-
http.open("GET", url, true);
-
http.onreadystatechange = callback;
-
http.send(null);
-
}
14
