AJAX, JSON, and Client-Side Templates
-
Upload
rtigger -
Category
Technology
-
view
2.420 -
download
0
description
Transcript of AJAX, JSON, and Client-Side Templates
![Page 1: AJAX, JSON, and Client-Side Templates](https://reader033.fdocuments.us/reader033/viewer/2022061207/5484fe67b47959140d8b4d8c/html5/thumbnails/1.jpg)
AJAX, JSON, AND CLIENT SIDE TEMPLATES
![Page 2: AJAX, JSON, and Client-Side Templates](https://reader033.fdocuments.us/reader033/viewer/2022061207/5484fe67b47959140d8b4d8c/html5/thumbnails/2.jpg)
AJAX• Asynchronous Javascript And XML
• HTML and CSS• Document Object Model• XML and XSLT• XMLHttpRequest• JavaScript
![Page 5: AJAX, JSON, and Client-Side Templates](https://reader033.fdocuments.us/reader033/viewer/2022061207/5484fe67b47959140d8b4d8c/html5/thumbnails/5.jpg)
JSON• JavaScript Object Notation
• Lightweight data-interchange format• Easy for humans to read and write• Easy for machines to parse and generate
![Page 6: AJAX, JSON, and Client-Side Templates](https://reader033.fdocuments.us/reader033/viewer/2022061207/5484fe67b47959140d8b4d8c/html5/thumbnails/6.jpg)
JSON• Built on two structures:
• Name value pairs (aka object)
• Ordered list of values (aka array)
• Combination thereof
• Virtually all languages support these structures
{ Name: “Value”, Name2: 2, Name3: true }
[ “value”, 2, true ]
[ { Name: “Object 1”, Numbers: [1,2,3] }, { Name: “Object 2”, Numbers: [4,5,6] } ]
![Page 7: AJAX, JSON, and Client-Side Templates](https://reader033.fdocuments.us/reader033/viewer/2022061207/5484fe67b47959140d8b4d8c/html5/thumbnails/7.jpg)
JSON vs XML
![Page 8: AJAX, JSON, and Client-Side Templates](https://reader033.fdocuments.us/reader033/viewer/2022061207/5484fe67b47959140d8b4d8c/html5/thumbnails/8.jpg)
JSON vs XML
![Page 9: AJAX, JSON, and Client-Side Templates](https://reader033.fdocuments.us/reader033/viewer/2022061207/5484fe67b47959140d8b4d8c/html5/thumbnails/9.jpg)
Old HTML WayPage, ViewPerPage, ID Search,Name Search, SKU Search, Price From,Price To, Position From, Position To
![Page 10: AJAX, JSON, and Client-Side Templates](https://reader033.fdocuments.us/reader033/viewer/2022061207/5484fe67b47959140d8b4d8c/html5/thumbnails/10.jpg)
AJAX Partial Rendering Way
ID Search,Name Search, SKU Search, Price From,Price To, Position From, Position To
![Page 11: AJAX, JSON, and Client-Side Templates](https://reader033.fdocuments.us/reader033/viewer/2022061207/5484fe67b47959140d8b4d8c/html5/thumbnails/11.jpg)
Client Side Templates
[ {Product}, {Product}, {Product} ]
GET /Products?Page=2
![Page 12: AJAX, JSON, and Client-Side Templates](https://reader033.fdocuments.us/reader033/viewer/2022061207/5484fe67b47959140d8b4d8c/html5/thumbnails/12.jpg)
Client Side Templates• Pros
• Separation of data and layout• Faster page load
• No wait time on server, simply serving up a HTML document• Less content
• Less network traffic• Smaller requests and responses
• Server doesn’t have to worry about generating HTML• Able to maintain page state in JavaScript if needed• Lots of opportunities to cache
![Page 13: AJAX, JSON, and Client-Side Templates](https://reader033.fdocuments.us/reader033/viewer/2022061207/5484fe67b47959140d8b4d8c/html5/thumbnails/13.jpg)
Client Side Templates• Cons
• Initial page load is essentially empty• Bad idea for pages you want indexed by a search engine
• JavaScript heavy• No canned controls• Async can be tough on groups of objects or sequential operations
![Page 15: AJAX, JSON, and Client-Side Templates](https://reader033.fdocuments.us/reader033/viewer/2022061207/5484fe67b47959140d8b4d8c/html5/thumbnails/15.jpg)
Questions!?