CS 490 – Web Design, AJAX, jQuery SUNY Polytechnic Institute

Web ServicesWeb ServicesA web service is a software system that supports interaction (requesting

data, sending data) with other software over a network.

A web service hosted at a particular URL can be configured to accept requests from:

Web pages under the same domain Web pages on different domains Android/iOS Windows, UNIX Other software

CS 490 – Web Design, AJAX, jQuery SUNY Polytechnic Institute

Web ServicesWeb ServicesWeb services provide the benefit of multiple software systems being able

to access the same data in the same way.

HTTP Request

ProcessRequest

HTTP Response

CS 490 – Web Design, AJAX, jQuery SUNY Polytechnic Institute

HTTP RequestHTTP Request

Example request header:

GET /apps/blogs/news/category/news HTTP/1.1

Host: sunypoly.edu

Connection: keep-alive

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36

Referer: https://sunypoly.edu/

Accept-Encoding: gzip, deflate, sdch

Accept-Language: en-US,en;q=0.8

See this in Google Chrome's developer tools by clicking the Network tab, selecting a request, then Headers at the bottom

CS 490 – Web Design, AJAX, jQuery SUNY Polytechnic Institute

HTTP RequestHTTP Request

Verb:

Some possible values: GET, PUT, POST, DELETE

URI:

/apps/blogs/news/category/news

HTTP Version:

HTTP/1.1

Host:

Host: sunypoly.edu

CS 490 – Web Design, AJAX, jQuery SUNY Polytechnic Institute

HTTP ResponseHTTP Response

Example request header:

HTTP/1.1 200 OK

Server: nginx

Date: Mon, 30 Mar 2015 15:08:52 GMT

Content-Type: text/html; charset=UTF-8

Transfer-Encoding: chunked

Connection: keep-alive

X-Powered-By: PHP/5.6.3

Expires: Thu, 19 Nov 1981 08:52:00 GMT

Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0

Pragma: no-cache

X-Pingback: https://sunypoly.edu/apps/blogs/news/xmlrpc.php

X-Custom-loc: /root/

Content-Encoding: gzip

CS 490 – Web Design, AJAX, jQuery SUNY Polytechnic Institute

HTTP Status CodesHTTP Status Codes

Full list here: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

2xx – Success200 – OK

3xx – Redirect301 – Moved Permanently302 – Found

4xx – Error403 – Forbidden404 – Not Found408 – Request Timeout

500 – Internal Server Error503 – Service Unavailable

CS 490 – Web Design, AJAX, jQuery SUNY Polytechnic Institute

RESTful ServicesRESTful ServicesOver time there have been different kinds of web services. The current

standard is REST:

REST = Representational State Transfer

REST encourages web services to be designed as scalable, maintainable, and with network performance in mind.

CS 490 – Web Design, AJAX, jQuery SUNY Polytechnic Institute

RESTful ServicesRESTful Services

RESTful services provide access to resources. This could be any kind of information.

These resources can be represented as XML or JSON. When using REST services for web pages, JSON is most commonly used.

JSON Representation of a single object:

{

"ID": "1",

"FirstName": "John",

"LastName": "Smith",

"Birthdate": "10-01-1990"

}

CS 490 – Web Design, AJAX, jQuery SUNY Polytechnic Institute

RESTful ServicesRESTful Services

JSON Representation of a list (array) of objects:

[

{

"ID": "1",

"FirstName": "John",

"LastName": "Smith",

"Birthdate": "10-01-1990"

},

{

"ID": "2",

"FirstName": "Jane",

"LastName": "Doe",

"Birthdate": "02-23-1983"

}

]

CS 490 – Web Design, AJAX, jQuery SUNY Polytechnic Institute

RESTful URIsRESTful URIsPattern:

http://path-to-service/ResourceName/Argument1/Argument2/Argument3

Example – All animals

http://some-service/Animals

Example – Animal by ID

http://some-service/Animals/27

CS 490 – Web Design, AJAX, jQuery SUNY Polytechnic Institute

AJAXAJAX

Use AJAX (Asynchronous JavaScript and XML) to send a request to a web service.

Asynchronous: Do not wait for the service to return results; Continue with the next logical step in the code.

JavaScript: Use JavaScript (or jQuery, since it's really JavaScript) to send the request.

XML: Web services commonly return data as either XML or JSON. Even though JSON is more commonly used now, we're not renaming AJAX.

CS 490 – Web Design, AJAX, jQuery SUNY Polytechnic Institute

jQuery AJAXjQuery AJAX

jQuery provides multiple convenient functions to make AJAX requests. The two we will look at are $.ajax() and $.get()

http://api.jquery.com/jquery.ajax/

http://api.jquery.com/jquery.get/

$.get(“http://some-service”, function (data) { … });

is shorthand for:

$.ajax({

url: http://some-service/,

data: “{JSON formatted arguments go here, if any}”,

success: function (data) { ... },

dataType: dataType

});

CS 490 – Web Design, AJAX, jQuery SUNY Polytechnic Institute

CallbacksCallbacksA callback is a function that is called automatically at a later time.

When making an AJAX request, you usually will setup callback functions for when the request is successful & returns data and for when the request errors. The callback functions will not be called until the AJAX request returns a result.

CS 490 – Web Design, AJAX, jQuery SUNY Polytechnic Institute

AJAX CallbacksAJAX Callbacks

$.get( "URL_To_Service" )

.done(function(data) {

alert( "success" );

})

.fail(function() {

alert( "error" );

})

.always(function() {

alert( "complete" );

});

CS 490 – Web Design, AJAX, jQuery SUNY Polytechnic Institute

Passing Functions as ArgumentsPassing Functions as ArgumentsThis example is from the jQuery documentation:

Wrong

$.get( "myhtmlpage.html", myCallBack( param1, param2 ) );

Right

$.get( "myhtmlpage.html", function() {

myCallBack( param1, param2 );

});