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.
Useful Links
XML: Directory Read
Read the contents of a directory of images. Exclude the non-image directory entries. Create a caption by deleting the file extension and capitalizing the file name.
Choose a directory: Comics • Embroidery • Carving • Tech
We can change the order of the files (for example, birth order instead of alphabetical order) by prepending each file name with a number and removing the number from the caption string.
Images courtesy of:
Stone Paperweight at World of Judaica
Embroidery Designs at 4-Hobby.com
Dumbing of Age
Scary Go Round
Questionable Content
XML: Edit the data file
| Field | Old data | New data |
|---|---|---|
| College | ||
| Department | ||
| Course # | ||
| Course name |
XML: Form Handling and Write to File
The following data was added to the data file:
| College | |
| Department | |
| Course # | |
| Course name |
XML: Edit the MySQL Database
| Field | Old data | New data |
|---|---|---|
| Park | ||
| City | ||
| State | ||
| Latitude | ||
| Longitude |
XML: Write to MySQL Database
The following data was added to the data file:
| Park | |
| City | |
| State | |
| Latitude | |
| Longitude |
XML PHP Source Code - Choose a file to view:
- fread.php
- fwritex.php
- fedit.php
- feditx.php
- images.php
- table.php
- dbread.php
- dbwritex.php
- dbedit.php
- dbeditx.php
- index.php