Web Coding in Ajax with JSON
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 JSON 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 data
Sending the data as JSON instead of full HTML results in much less data transfer. Here are some examples, and links to actual webservice data.
| Ajax full HTML | Size | JSON data only | Size | Savings |
|---|---|---|---|---|
| Multiplication Table | 2200 | Multiplication Table | 550 | 75% |
| States Table | 4600 | States Table | 2200 | 52% |
| Images | 2550 | Images | 600 | 75% |
| File data | 2000 | File data | 550 | 72% |
| MySQL data | 3000 | MySQL data | 670 | 78% |
Note that the tables with high information to markup ratio (for example, the states) do not have as great a reduction in size, because most of the information in the full HTML version is the raw data anyway.
There are tradeoffs: the client must have JavaScript code that assembles the JSON data into the final HTML. This code makes the HTML and JavaScript files larger than they would have to be otherwise, and executing the JavaScript can cost extra time.
Useful Links
JSON: 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
JSON: Edit the data file
| Field | Old data | New data |
|---|---|---|
| College | ||
| Department | ||
| Course # | ||
| Course name |
JSON: Form Handling and Write to File
The following data was added to the data file:
| College | |
| Department | |
| Course # | |
| Course name |
JSON: Edit the MySQL Database
| Field | Old data | New data |
|---|---|---|
| Park | ||
| City | ||
| State | ||
| Latitude | ||
| Longitude |
JSON: Write to MySQL Database
The following data was added to the data file:
| Park | |
| City | |
| State | |
| Latitude | |
| Longitude |
JSON 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