Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

RESTful API's, AJAX, and Json

No description
by

Grenard Madrigal

on 11 June 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of RESTful API's, AJAX, and Json

NO!
The state of current API's
API Developers have created all kinds of ways to send and receive messages, many of which are
bloated, inefficient, and just plain weird!
Say you want to
send a message to a friend
What's an API?

RESTful API's, AJAX, and Json
a way for
PEOPLE
to communicate
with
computers
?
It's actually...
a way for
COMPUTERS
to talk to
other
computers
Is it...
That's exactly what an API is for, R2!
A server sends a
request to another server
and receives a response back
For instance...
"Let's invent a new way to do this"
1) Get myself a sled dog

2) Type up the message on my ipad

3) Wrap duct tape around the sled dog,
attaching the ipad to him

4) Send the dog to go find my friend

Or how about I...
1) Tag my message in graffiti
on the side of a building

2) Take a polaroid picture of the
graffiti

3) FedEx the polaroid to my friend
Actual zany
API examples
POST
ing a form to
get
data (overloading POST)
Using an entire 10-line
XML
file to get 4 words (instead of using something more lightweight like JSON)
Using URLS with arbritary method names like
www.example.com/api/getAllOfTheData
RPC (remote procedure calls)
Those are some zany ways to send messages!
There's a
better way
And it simply revolves around
http://
http://
already
...
C
REATE data using POST requests
R
EAD data using GET requests
U
PDATE data using PUT requests
D
ELETE data using DELETE requests
and a

RESTful architechture
Has an established, efficient system of requests that can:
REST establishes...
Easy addressability
with no funky URLs to
look up

The functionality for CRUD is already there!
Instead of sifting through the API documentation to find the right URL to get the data you want, REST uses an easily predictable
resource-based or noun-based URLs
for its endpoints
For example, you can get a list of spaceships from
www.starwars.com/api/spaceships
instead of using an RPC-style API call to
www.starwars.com/api/grabAllTheSpaceshipsNow
It's 100 times more intuitive!
REST
is
Better!
So how do we
use a RESTful API?
When you make an http request to a RESTful API, you get a
response back
(usually some data)

From there, you can
manipulate the response
however you like (such as updating the currently opened webpage)
A typical REST example
REQUEST
>
RESPONSE
>
DISPLAY
REQUEST
A browser can make a
behind the scenes
http request using
AJAX

(XMLHttpRequest Object)
AJAX Request (using jquery)

$.ajax({
url: 'starwars.com/api/droids',
type: 'get',
success: function(data){

doStuff(data);

}
});
RESPONSE
[{"id":"1","name":"C3PO"},
{"id": "2","name":"R2D2"}]
This response is a JSON
object -- super lightweight,
super easy to manipulate
compared to XML.
arf?
The server receiving the request sends a response back.
JSON response
DISPLAY
Using jquery's
success
callback doStuff(data)
we can display the data
from the json object any
way we want on the webpage
javascript callback (using jquery)
function doStuff(responseData){

var droids = JSON.parse(responseData);
for(var i in droids){
var droid = droids[i];

var html = "<li id=\""+droid.id+"\">";
var html += droid.name;
var html += "</li>";

$('ul#list_droids').append(html);

}

}
Review
1) user action
2) ajax request
3) JSON response
4) javascript callback
first, a user hits a button...
AJAX JSON Javascript
Other Tips
and Extras
The JSON response
is basically javascript
you are running
on the client (browser).
Be careful with
remote API's!
Aggregate Data

Jquery's $.ajax() anatomy
url:
'www.starwars.com/api/
droids/329',
type:
'get',
success:
function(responseData){
doStuff(responseData);
}
Basic Settings
Settings for POST and PUT
data:
{
name:
'c3po',

color:
myColor,

buddies:
{'r2','luke','chewy'},

nickname:

$('#nickname_field').val();
}

Handy Other Settings
dataType:
'json',
cache:
false,
username:
'myUsername',
password:
'myPassword',
error:
function(message){

alert(message)
},
headers:
{custom:'headers'}

Dashboards and Homepages
single RESTful API Request
instead of multiple!!
url: 'www.starwars.com/api/
dashboard
'
Malicious Javascript
Sorting and Filtering
GET requests with options
url: 'www.starwars.com/api/dashboard/
?limit=100&start=06102014
'
type
can be '
get
', '
post
','
put
', or '
delete
'
background background foreground
AJAX applications,
statelessness, addressability
HTML5's
history.pushState()
Recreate the functionality
of bookmarking and the back button within your
application!
You can use strings, variables, arrays, or even jquery's
.val()
function for data values
Full transcript