Beginner AJAX lessons - why do I have to wrap request.readyState in a function?

Question

Here's some code from my Lynda.com ajax lessons.

var request = new XMLHttpRequest();

request.open('GET', 'data.txt');
request.onreadystatechange = function()
{
    if (request.readyState===4)
    {
        console.log(request);
        document.writeln(request.responseText);
    }
}
request.send();

In the previous lesson we checked the value of request.status, which was not wrapped in a function, and it worked fine. But now, with no explanation, the request.readyState check has to be wrapped in the function you see above else it won't work. What's going on?

It doesn't really need an explanation. request.onreadystatechange is a property of an object (request) that is being assigned as a function containing conditionals. In short, it is defining a listener that evaluates on the change of ready state. Have you read the docs on XMLHttpRequest? https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest — Kai Qing, Oct 01 '13 at 03:25
The function is called a "handler." It executes whenever the onreadystatechange event is triggered. — Matthew Blancarte, Oct 01 '13 at 03:44
@MatthewBlancarte The correct term for the `Function` instance referred by the property value is _event listener_. The event *handler* is the internal code that calls event listeners; sometimes this term is used as synonym for the event-handler property. — PointedEars, Oct 01 '13 at 03:45

score 1 · Accepted Answer · answered Oct 01 '13 at 03:36

1

The function you assign to onreadystatechange is an event handler. You assign it before calling send() so that you don't miss when the event is raised by the request. If you didn't check request.readyState in the event handler, how would you know when the request state has actually changed? The send() method is non-blocking by default.

The alternative would have to be to check the readyState by polling at some arbitrary interval which is definitely not desired.

Like the above commenter suggested, the MDN doc is pretty good.

answered Oct 01 '13 at 03:36

nloko

686
4
11

1

The `send()` method call is blocking in most, if not all cases, because of single-threadedness of the ECMAScript implementation. You are confusing this with the fact that the *request* is handled *asynchronously* ("non-blocking") by default, which is why the `send()` method call quickly returns then. – PointedEars Oct 01 '13 at 03:43
Yes it is more correct to say that the operation is asynchronous. This allows the send call return without blocking the UI. – nloko Oct 01 '13 at 05:00

score 1 · Answer 2 · edited May 23 '17 at 12:21

1

It will work, just prematurely. When I was learning about this, I found it helpful to alert the value of readyState so I can watch what's happening:

request.onreadystatechange = function()
{
    alert(request.readyState);
    ...

Here's a list of the states, courtesy of What do the different readystates in XMLHttpRequest mean, and how can I use them?

State  Description 0      
The request is not initialized 1     
The request has been set up 2   
The request has been sent 3    
The request is in process 4   
The request is complete

edited May 23 '17 at 12:21

Community

1
1

answered Oct 01 '13 at 03:44

Ben

47,286
44
159
208

thanks sirs - will try all this out - nowhere in the lesson was I told this was an event handler, and 2 days of codeschool and codeacademy never broke it down like this either! – dwilbank Oct 01 '13 at 04:26
Right but as you may come to see, the naming convention of certain things may indicate what sort of object property this is. onreadystatechange suggests listener, and the example usage of it pretty much verifies this, whether or not it is ever clearly stated. Glad we could help though. – Kai Qing Oct 01 '13 at 18:26

Beginner AJAX lessons - why do I have to wrap request.readyState in a function?

2 Answers2