Web Coding in Ajax with XML
A single-page application has all the HTML code in one file, and does not reload other pages. Instead, the application uses Ajax to download HTML code fragments or data fragments to display as the user navigates from page to page.
The idea behind Ajax is that the page doesn't have to reload, so it is faster. Also, lots of boilerplate like headers, footers, and sidebar don't have to be re-loaded all the time.
This XML implementation employs minimal communication between the client and the server. Instead of transferring the page content DIV, it transfers only the data that actually changes from page to page. This includes:
- The data in the three tables on the Table pages.
- The image links and captions on the Directory page.
- The contents of the table on the File Read and Database Read pages.
- The existing information on the various forms for editing.
- The requested source code.
Compare full data to JSON and XML data
Sending the data as XML instead of HTML or JSON results in more data transfer. Here are some examples, and links to actual webservice data.
| Page | HTML | JSON | Savings | XML | Savings |
|---|---|---|---|---|---|
| Mult. Table | 2200 | 550 | 75% | 3050 | - |
| States Table | 4600 | 2200 | 52% | 7500 | - |
| Images | 2550 | 600 | 75% | 1350 | 47% |
| File data | 2000 | 550 | 72% | 2300 | - |
| MySQL data | 3000 | 670 | 78% | 2950 | 2% |
| Total | 14350 | 4750 | 66% | 17150 | -19% |
Because XML looks a lot like HTML with opening and closing tags, it has more overhead than the more terse JSON format. XML does have some advantages when it comes to data flexibility and security. XML parsing is provided by JavaScript on the client end, so no additional parser needs to be provided. But calling the DOM methods does results in longer JavaScript code, even if you encapsulate and abbreviate some ideas, as I did.
