Your SlideShare is downloading. ×
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
JSON Part 2: Working with Ajax
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JSON Part 2: Working with Ajax

426

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.

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
426
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. BUILT IN FAIRFIELD COUNT Y:FRONT END DEVELOPERS MEETUPTUES. JUNE 11, 2013JSON 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 andAjax for data workflow Not to be confused with the former Connecticut Newsweatherman (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 aremote data source Language independent Based on a subset of the JavaScript ProgrammingLanguage 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 usingJSON.parse() Supported by (most) major browsers and JavaScriptframeworks 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 andreturning 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 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. 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. 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 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. 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 confusingor 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/

×