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.
Dev Dives: Streamline document processing with UiPath Studio Web
JSON Part 2: Working with Ajax
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)
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
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
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
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)
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
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/