Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
BUILT IN FAIRFIELD COUNT Y:FRONT END DEVELOPERS MEETUPTUES. JUNE 11, 2013JSON Part 2:Working with Ajax
About Jeff Fox (@jfox015) 16 year web development professional (Almost) entirely self taught Thorough front and back en...
Overview JSON Review What is Ajax? Benefits Drawbacks? Ajax and JQuery Live Demo
JSON Review
JSON Highlights A lightweight text based data interchange format Use it to transfer JavaScript object data to and from a...
Why use it? Straightforward syntax Easy to create and manipulate Can be parsed to a native JavaScript object usingJSON....
Onto AJAX……with a little history for good measure
What is Ajax? Ajax stands for “Asynchronous JavaScript and XML” JavaScript API for exchanging data with a web server and...
Where did Ajax come from? Microsoft first added an XMLHTTP ActiveX control to InternetExplorer 5 in 1999 The Mozilla pro...
First Usages Google wowed everyone when they made email cool in2004 using Ajax in Gmail Then followed up with their equa...
And the crowd went wild!
Benefits of Ajax
Benefits of Ajax Improved user experience (no page refresh) Makes web (and mobile web) applications feel more likenative...
Drawbacks?
Drawbacks Ajax operations can sometimes be difficult to debug That’s why we love Firebug though, right? Poorly designed...
Ajax and JQuery
Typical Ajax Functions in JQuery $.ajax({type: "POST",url: "somescript.php",data: { “name”: “Jeff", “location”: “Norwalk"...
Live Example
Dynamic App Demo JSON Driven App Dashboard All data loaded as JSON via Ajax calls using JQuery Display received data in...
Questions?
Resources Demo source code on Github:https://github.com/jfox015/BIFC-JSON-Dashboard XMLHttpRequest @ Wikipedia:http://en...
JSON Part 2: Working with Ajax
Upcoming SlideShare
Loading in …5
×

JSON Part 2: Working with Ajax

1,160 views

Published on

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.

Published in: Technology
  • Be the first to comment

JSON Part 2: Working with Ajax

  1. 1. BUILT IN FAIRFIELD COUNT Y:FRONT END DEVELOPERS MEETUPTUES. JUNE 11, 2013JSON Part 2:Working with Ajax
  2. 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 andAjax for data workflow Not to be confused with the former Connecticut Newsweatherman (That’s Geoff Fox)
  3. 3. Overview JSON Review What is Ajax? Benefits Drawbacks? Ajax and JQuery Live Demo
  4. 4. JSON Review
  5. 5. JSON Highlights A lightweight text based data interchange format Use it to transfer JavaScript object data to and from aremote data source Language independent Based on a subset of the JavaScript ProgrammingLanguage Easy to understand, manipulate and generate
  6. 6. Why use it? Straightforward syntax Easy to create and manipulate Can be parsed to a native JavaScript object usingJSON.parse() Supported by (most) major browsers and JavaScriptframeworks Built in support in most backend technologies
  7. 7. Onto AJAX……with a little history for good measure
  8. 8. What is Ajax? Ajax stands for “Asynchronous JavaScript and XML” JavaScript API for exchanging data with a web server andreturning the response to JavaScript You’re not stuck with only asynchronous operations You don’t have to use XML to use Ajax
  9. 9. Where did Ajax come from? Microsoft first added an XMLHTTP ActiveX control to InternetExplorer 5 in 1999 The Mozilla project next added the XMLHttpRequest objectwith the same functionality to the Gecko layout engine Safari, Konqueror and Opera all followed suit implementingthe XMLHttpRequest object as well W3C issued a working draft specification for it in 2006 IE 7 added support for XMLHttpRequest
  10. 10. First Usages Google wowed everyone when they made email cool in2004 using Ajax in Gmail Then followed up with their equallyimpressive Maps in 2005
  11. 11. And the crowd went wild!
  12. 12. Benefits of Ajax
  13. 13. Benefits of Ajax Improved user experience (no page refresh) Makes web (and mobile web) applications feel more likenative applications Faster than a full page refresh (targeted content and datavs. complete load of all HTML, JS, CSS and image assets) Developers can write endpoints for specific useroperations instead of heavy, all-inclusive scripts
  14. 14. Drawbacks?
  15. 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 confusingor detrimental user experience Loss of addressability (Everything has the same URL)
  16. 16. Ajax and JQuery
  17. 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. 18. Live Example
  19. 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. 20. Questions?
  21. 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/

×