This is part 2 of 3 of the BIFC Front End Develoeprs Meetup Deep Dive into JSON. We introduce Ajax and how to utilize JQuery to make JSON data calls to a server.

1. BUILT IN FAIRFIELD COUNT Y:
FRONT END DEVELOPERS MEETUP
TUES. JUNE 11, 2013
JSON Part 2:
Working with Ajax

2. About Jeff Fox (@jfox015)
 16 year web development professional
 (Almost) entirely self taught
 Thorough front and back end experience
 Develops JavaScript based web apps that rely on JSON and
Ajax for data workflow
 Not to be confused with the former Connecticut News
weatherman (That’s Geoff Fox)

3. Overview
 JSON Review
 What is Ajax?
 Benefits
 Drawbacks?
 Ajax and JQuery
 Live Demo

4. JSON Review

5. JSON Highlights
 A lightweight text based data interchange format
 Use it to transfer JavaScript object data to and from a
remote data source
 Language independent
 Based on a subset of the JavaScript Programming
Language
 Easy to understand, manipulate and generate

6. Why use it?
 Straightforward syntax
 Easy to create and manipulate
 Can be parsed to a native JavaScript object using
JSON.parse()
 Supported by (most) major browsers and JavaScript
frameworks
 Built in support in most backend technologies

7. Onto AJAX…
…with a little history for good measure

8. What is Ajax?
 Ajax stands for “Asynchronous JavaScript and XML”
 JavaScript API for exchanging data with a web server and
returning the response to JavaScript
 You’re not stuck with only asynchronous operations
 You don’t have to use XML to use Ajax

9. Where did Ajax come from?
 Microsoft first added an XMLHTTP ActiveX control to Internet
Explorer 5 in 1999
 The Mozilla project next added the XMLHttpRequest object
with the same functionality to the Gecko layout engine
 Safari, Konqueror and Opera all followed suit implementing
the XMLHttpRequest object as well
 W3C issued a working draft specification for it in 2006
 IE 7 added support for XMLHttpRequest

10. First Usages
 Google wowed everyone when they made email cool in
2004 using Ajax in Gmail
 Then followed up with their equally
impressive Maps in 2005

11. And the crowd went wild!

12. Benefits of Ajax

13. Benefits of Ajax
 Improved user experience (no page refresh)
 Makes web (and mobile web) applications feel more like
native applications
 Faster than a full page refresh (targeted content and data
vs. complete load of all HTML, JS, CSS and image assets)
 Developers can write endpoints for specific user
operations instead of heavy, all-inclusive scripts

14. Drawbacks?

15. Drawbacks
 Ajax operations can sometimes be difficult to debug
 That’s why we love Firebug though, right?
 Poorly designed Ajax driven apps can create a confusing
or detrimental user experience
 Loss of addressability (Everything has the same URL)

16. Ajax and JQuery

17. Typical Ajax Functions in JQuery
 $.ajax({
type: "POST",
url: "somescript.php",
data: { “name”: “Jeff", “location”: “Norwalk" }
).done(function() { … });
 $.getJSON("somescript.php").done(function() { … });
 $.post ("somescript.php“, { “key”: “value” }
).done(function() { … });

18. Live Example

19. Dynamic App Demo
 JSON Driven App Dashboard
 All data loaded as JSON via Ajax calls using JQuery
 Display received data in UI
 No page refreshes

20. Questions?

21. Resources
 Demo source code on Github:
https://github.com/jfox015/BIFC-JSON-Dashboard
 XMLHttpRequest @ Wikipedia:
http://en.wikipedia.org/wiki/XMLHttpRequest
 Medialoot HTML 5 Template used in this demo:
http://medialoot.com/item/html5-admin-template/