SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery Web Services A 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

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery Web Services Web services provide the benefit of multiple software systems being able to access the same data in the same way. HTTP Request Process Request HTTP Response

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery HTTP 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/ (KHTML, like Gecko) Chrome/ Safari/ Referer: 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

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery HTTP Request Verb: Some possible values: GET, PUT, POST, DELETE URI: /apps/blogs/news/category/news HTTP Version: HTTP/1.1 Host: Host: sunypoly.edu

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery HTTP Response Example request header: HTTP/ OK Server: nginx Date: Mon, 30 Mar :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 :52:00 GMT Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0 Pragma: no-cache X-Pingback: X-Custom-loc: /root/ Content-Encoding: gzip

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery HTTP Status Codes Full list here: 2xx – Success 200 – OK 3xx – Redirect 301 – Moved Permanently 302 – Found 4xx – Error 403 – Forbidden 404 – Not Found 408 – Request Timeout 500 – Internal Server Error 503 – Service Unavailable

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery RESTful Services Over 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.

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery RESTful 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": " " }

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery RESTful Services JSON Representation of a list (array) of objects: [ { "ID": "1", "FirstName": "John", "LastName": "Smith", "Birthdate": " " }, { "ID": "2", "FirstName": "Jane", "LastName": "Doe", "Birthdate": " " } ]

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery RESTful URIs Pattern: Example – All animals Example – Animal by ID

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryAJAX 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.

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery jQuery AJAX jQuery provides multiple convenient functions to make AJAX requests. The two we will look at are $.ajax() and $.get() $.get(“ function (data) { … }); is shorthand for: $.ajax({ url: data: “{JSON formatted arguments go here, if any}”, success: function (data) {... }, dataType: dataType });

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQueryCallbacks A 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.

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery AJAX Callbacks $.get( "URL_To_Service" ).done(function(data) { alert( "success" ); }).fail(function() { alert( "error" ); }).always(function() { alert( "complete" ); });

SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery Passing Functions as Arguments This example is from the jQuery documentation: Wrong $.get( "myhtmlpage.html", myCallBack( param1, param2 ) ); Right $.get( "myhtmlpage.html", function() { myCallBack( param1, param2 ); });