}
});
});
Because
refreshServerInfo
is a function, we can call it at any time. In particular, we
may wish to update the server info periodically (which is one reason we added the
uptime
field). For example, if we want to update the server five times a second (every
200 milliseconds), we can add the following code:
setInterval
(
refreshServerInfo
,
200
);
By doing this, we will see the server uptime increase live in the browser!
In this example, when the page initially loads, <div class=".serv
erInfo">
contains placeholder text with question marks in it. On a
slow Internet connection, the user may see those question marks
for an instant before they’re replaced with the information from the
server. This is a variation of the “flash of unstyled content” (FOUC)
problem. One solution is to have the server render the initial page
with the correct values. Another solution is to hide the entire ele‐
ment until its contents have been updated; it could still be a jarring
effect, but might be more acceptable than meaningless question
marks.
This covers only the basic concepts involved in making Ajax requests; to learn more,
see the MDN article
.
Conclusion
As you can see from this chapter, web development introduces a lot of concepts and
complexities in addition to the JavaScript language itself. We’ve only scratched the
surface here, and if you are a web developer, I recommend Semmy Purewal’s
. If you’d like to learn more about CSS, any of Eric A. Meyer’s
books are excellent.
274 | Chapter 18: JavaScript in the Browser
