AJAX, JSON, and Client-Side Templates
•Download as PPTX, PDF•
1 like•1,614 views
AJAX, JSON, and client-side templates allow for asynchronous and partial page updates without reloading the entire web page. AJAX uses XMLHttpRequest and JavaScript to make asynchronous requests in the background. JSON is a lightweight data format that is easy for humans and machines to parse. Client-side templates separate data and layout so that only small amounts of data need to be transferred, improving page load times and reducing network traffic compared to traditional full-page reloads.
More Related Content
What's hot
What's hot (19)
Similar to AJAX, JSON, and Client-Side Templates
Similar to AJAX, JSON, and Client-Side Templates (20)
More from RTigger
More from RTigger (20)
Recently uploaded
Recently uploaded (20)
AJAX, JSON, and Client-Side Templates
- 1. AJAX, JSON, AND CLIENT SIDE TEMPLATES
- 2. AJAX • Asynchronous Javascript And XML • HTML and CSS • Document Object Model • XML and XSLT • XMLHttpRequest • JavaScript
- 3. Web 1.0 Example: www.ebay.ca
- 4. Web 2.0! Example: dhtmlxScheduler
- 5. JSON • JavaScript Object Notation • Lightweight data-interchange format • Easy for humans to read and write • Easy for machines to parse and generate
- 6. JSON • Built on two structures: • Name value pairs (aka object) { Name: “Value”, Name2: 2, Name3: true } • Ordered list of values (aka array) [ “value”, 2, true ] • Combination thereof [ { Name: “Object 1”, Numbers: [1,2,3] }, { Name: “Object 2”, Numbers: [4,5,6] } ] • Virtually all languages support these structures
- 7. JSON vs XML
- 8. JSON vs XML
- 9. Old HTML Way Page, ViewPerPage, ID Search, Name Search, SKU Search, Price From, Price To, Position From, Position To
- 10. AJAX Partial Rendering Way ID Search, Name Search, SKU Search, Price From, Price To, Position From, Position To
- 11. Client Side Templates GET /Products?Page=2 [ {Product}, {Product}, {Product} ]
- 12. 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
- 13. 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
- 14. Example! http://localhost:8080/Playlists
- 15. Questions!?
Editor's Notes
- DOM – represents the document as an object,used to create and manipulate elements on a webpageXML – initial standard for transmitting data to and from a web serviceXMLHttpRequest – component that allows a browser to send a web request independent of a page request
- The blanks on the client side represent page loading, waiting on the server, and a locked UISystem processing includes processing the request input (viewstate, cookies, authentication, get & post vars), any database or other resource calls necessary to create the page, and the actual generation of the HTML to send to the client
- Ajax allows a consistent and responsive user experienceAjax engine runs on a separate thread from the UI and sends and receives data in the backgroundServer is now only responsible for processing input, making any resource calls it needs, and sending data as output
- Example result from twitter search APIExtra “fat” in XML:Schema definitionsTag syntaxEscaped XML characters
- Same result from twitter search APIMorereadable, no unnecessary content
- The entire form’s content is transmitted every request, and the entire page’s content is rendered on the server and transmitted every response
- Only the required fields (or at least a subset of all the fields) is sent in the request, and only the affected area(s) of the page are rendered and sent in the response
- Initially, the server only sends you the static controls for a page, as well as templates for how to represent the data it’s about to receiveThe browser, once loaded, makes a request for the data to displayThe server processes the request and sends back only the data requestedThe browser combines the data from the server with the client-side template to build the rest of the webpage
- Client Side Templates is a good idea for dynamic, task-driven web applications. It’s not a good idea for blogs, corporate websites, or anything that is mostly static content that needs to be indexed.
- Start website with debug attached to slow down requestsPoint out how fast initial page loaded (net panel)Show how we’re making three API calls after the page loadsDemonstrate client side template (view source), and then data received from API (catalog call), and finally how it looks on pageShow how categories works now that products are loaded locallyShow how loading a playlist worksShow how an add operation works (drag product to playlist)Show how a bulk operation might work