Introduction: Back-end processing-server-side scripts and programs-does not always work well in an Ajax application. Conversely, careful planning in advance to ensure that data is sent in a proper and efficient format can make the entire application more cohesive and reduce unnecessary complexity. In this article, Brett McLaughlin shows how a good server-side script can complement Ajax behavior.
In the 1th part of this series, we built a visually rich front-end to showcase the picture library based on the Hoverbox Code of Nathan Smith (which links to the initial Hoverbox code can be found in the Resources section). With this process, you learned some basic UI principles: the z-mode of the human eye, how to keep the page consistent, how to reduce the font size of the text in the box from the page slide, and the difference between the readability of the serif and Sans-serif fonts.
After you finish the 1th part, you should have a decent picture library, as shown in Figure 1, which is the Hoverbox UI we finished in part 1th:
Figure 1. Hoverbox UI completed in part 1th
In this article, we will add key backend processing and some Ajax-specific code to connect the picture library to the back end.
Get ready for the Ajax piping process.
As I mentioned earlier, most of the work of Ajax is pipeline processing: Setting up XMLHttpRequest objects, invoking server-side programs, and getting responses. The program may change, and the details of the request may vary, but in any case the basic settings are the same:
Create a new Request object (preferably in a cross-browser manner).
Constructs a request URL and may also POST request data.
Sets a method that uses this method to recall a browser when a response is received from the server.
Send the request.
Constructs a callback that can run and execute any action that the program wants to do with the server data.
More details can be found in other articles (see the Resources section), so we'll just give you a ballpark figure.