AJAX, JSON, and Client-Side Templates

AJAX, JSON, AND CLIENT SIDE TEMPLATES

AJAX• Asynchronous Javascript And XML

• HTML and CSS• Document Object Model• XML and XSLT• XMLHttpRequest• JavaScript

Web 1.0

Example: www.ebay.ca

Web 2.0!

Example: dhtmlxScheduler

JSON• JavaScript Object Notation

• Lightweight data-interchange format• Easy for humans to read and write• Easy for machines to parse and generate

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] } ]

JSON vs XML

JSON vs XML

Old HTML WayPage, ViewPerPage, ID Search,Name Search, SKU Search, Price From,Price To, Position From, Position To

AJAX Partial Rendering Way

ID Search,Name Search, SKU Search, Price From,Price To, Position From, Position To

Client Side Templates

[ {Product}, {Product}, {Product} ]

GET /Products?Page=2

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

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

Example!

http://localhost:8080/Playlists

Questions!?