ajax and rest
DESCRIPTION
AJAX and REST. What is AJAX?. It’s an acronym for Asynchronous JavaScript and XML Although requests need not be asynchronous It’s not really a single technology but several HTML / CSS / DOM / XML It’s used to dynamically update Web pages or at least parts of them. What is AJAX?. - PowerPoint PPT PresentationTRANSCRIPT
AJAX and REST
Slide 2
What is AJAX? It’s an acronym for Asynchronous
JavaScript and XML Although requests need not be asynchronous
It’s not really a single technology but several HTML / CSS / DOM / XML
It’s used to dynamically update Web pages or at least parts of them
Slide 3
What is AJAX? It uses the HTTPRequest and HTTPResponse objects to Make a server request from client
JavaScript And process the server-side response
Slide 4
AJAX (model)
From W3Schools.com
Slide 5
AJAX Frameworks Most vendors have their own AJAX
abstraction layers ASP has a script manager and an AJAX
toolkit It’s a layer on top of AJAX
There are several for PHP Phery, CJAX, Quicknet
There are frameworks for Python, Perl, Ruby and others
Slide 6
RestFull APIs These are generally available API that
accept and execute AJAX requests Yahoo has YQL
SQL-like queries are built into the URL (GET request)
I’ll show this in class
Slide 7
RestFull APIS Google has a number of APIs
These use JSON typically JSON is an alternative to moving the
responses around as XML
Slide 8
AJAX (The Mechanics) The XMLHttpRequest object is used to create
a request The request gets configured with the open
method The request gets sent with the send method The responseText and responseXML
properties store the returned information Use the onreadystatechange event for
async requests
Slide 9
AJAX XMLHttpRequest The following creates the request
var req = new XMLHttpRequest(); The open method define the type of request
The first argument contains the method to use (GET or POST)
The second argument contains the URL The third argument contains true
(asynchronous) or false (synchronous) The send method sends the request to the
server
Slide 10
AJAX XMLHttpRequest (Example) Create open and send a synchronous
request
Slide 11
AJAX Response (Synchronous) When the request completes, we get at
the response through the following properties of the XMLHttpRequest object responseText – gets the response data as
a string responseXML gets the response data as
XML, which we can then parse using the DOM
This is the same DOM we talked about
Slide 12
AJAX Response (Synchronous)
Slide 13
AJAX Response (Asynchronous) The onreadystatechanged event fires as
the request progresses Initialize Loading Loaded Interactive Completed
Status and status contain the result status information 404 – not found / 200 success
Slide 14
AJAX Response (Asynchronous)
Slide 15
AJAX (jQuery) As usual, jQuery makes the process
simple
Slide 16
A Few Words about XML It’s the extensible markup language
Data is frequently stored and transported as XML
It looks like XHTML 5 Tags, attributes and elements Nesting concepts are the same
However the tag and attribute names can be any valid name
.NET knows about them
Slide 17
A Few Words about XML Sample XML document
Slide 18
REST Acronym for Representational State
Transfer REST (restful Web services) is a way of
exchanging HTTP requests and responses between client and server
It’s an alternative to Web Services and SOAP
It’s an alternative to Remote Procedure Calls (RPC)
Slide 19
REST For read requests we
Send all data to the server via a URL and GET request
URLs are a logical location, rather than a physical resource
Data is typically returned as XML It’s not a standard but a way of doing
things An architecture of style YQL is restful
Slide 20
A Few Words about YQL Yahoo Query Language Implemented as a Web service, they
maintain a number of tables Finance Geography and many more
http://developer.yahoo.com/yql/guide/yql-opentables-chapter.html#
Slide 21
AJAX (References) http://w3schools.com/ajax/default.asp http://msdn.microsoft.com/en-us/
library/bb924552.aspxhttp://developer.yahoo.com/yql/
Slide 22
HTML 5 http://www.ibm.com/developerworks/
library/x-html5/