How to consume a RESTful service using jQuery. Introduction  In this post we see how to consume the RESTful service described in the post Design a RESTful.

Slides:



Advertisements
Similar presentations
JavaScript and AJAX Jonathan Foss University of Warwick
Advertisements

JQUERY/AJAX ALIREZA KHATAMIAN DELARAM YAZDANSEPAS.
With jQuery and AJAX Doncho Minkov Telerik Corporation Technical Trainer.
9. AJAX & RIA. 2 Motto: O! call back yesterday, bid time return. — William Shakespeare.
IS 360 Course Introduction. Slide 2 What you will Learn (1) The role of Web servers and clients How to create HTML, XHTML, and HTML 5 pages suitable for.
CS 415 N-Tier Application Development By Umair Ashraf July 6,2013 National University of Computer and Emerging Sciences Lecture # 9 Introduction to Web.
Web Services 101 James Payne Managing Director for New Media / Advancement July 30, 2013.
JQuery. What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library that simplifies HTML document traversing and manipulation event handling.
Chapter 6 DOJO TOOLKITS. Objectives Discuss XML DOM Discuss JSON Discuss Ajax Response in XML, HTML, JSON, and Other Data Type.
Agenda What is AJAX? What is jQuery? Demonstration/Tutorial Resources Q&A.
NextGen Technology upgrade – Synerizip - Sandeep Kamble.
User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1.
Interactive Web Application with AJAX
Ajax (Asynchronous JavaScript and XML). AJAX  Enable asynchronous communication between a web client and a server.  A client is not blocked when an.
@ScotHillier (function () { }());
JavaScript & jQuery the missing manual Chapter 11
Databases.  Multi-table queries  Join ▪ An SQL JOIN clause is used to combine rows from two or more tables, based on a common field between them. 
SUNY Polytechnic Institute CS 490 – Web Design, AJAX, jQuery Web Services A web service is a software system that supports interaction (requesting data,
JavaScript, Fourth Edition Chapter 12 Updating Web Pages with AJAX.
REST.  REST is an acronym standing for Representational State Transfer  A software architecture style for building scalable web services  Typically,
Visual Studio Online Load Testing Git / Version Control Testing Build and release Analytics Team Collab Agile Planning / Work items Test Mgmt.
Rich Internet Applications 4. Ajax. What is Ajax? Asynchronous JavaScript and XML Term coined in 2005 by Jesse James Garrett
Phonegap Bridge – File System CIS 136 Building Mobile Apps 1.
INTEGRATION OF BACKBONE.JS WITH SPRING 3.1. Agenda New Features and Enhancements in Spring 3.1 What is Backbone.js and why I should use it Spring 3.1.
Asynchronous Javascript And XML AJAX : an introduction UFCEUS-20-2 : Web Programming.
Web Technology Introduction AJAXAJAX. AJAX Outline  What is AJAX?  Benefits  Real world examples  How it works  Code review  Samples.
JQuery JavaScript is a powerful language but it is not always easy to work with. jQuery is a JavaScript library that helps with: – HTML document traversal.
AJAX Asynchronous JavaScript & XML A short introduction.
The Basics of HTTP Jason Dean
1 © Donald F. Ferguson, All rights reserved.Modern Internet Service Oriented Application Development – Lecture 2: REST Details and Patterns Some.
WStore Programmer Guide Offering management integration.
AJAX Asynchronous JavaScript and XML 1. AJAX Outline What is AJAX? Benefits Real world examples How it works 2.
ICM – API Server & Forms Gary Ratcliffe.
RESTful Web Services What is RESTful?
JQuery and AJAX WEB Technologies : PHP Programming Language.
Lecture IV: REST Web Service
AJAX. Ajax  $.get  $.post  $.getJSON  $.ajax  json and xml  Looping over data results, success and error callbacks.
CHAPTER 8 AJAX & JSON WHAT IS AJAX? Ajax lets you…
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.
Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad.
AJAX CS456 Fall Examples Where is AJAX used? Why do we care?
1 AJAX. AJAX – Whatzit? Asynchronous (content loading)‏ Javascript (logic & control)‏ And XML (request handling)‏
JavaScript, Sixth Edition Chapter 11 Updating Web Pages with Ajax.
JavaScript and Ajax Week 10 Web site:
Web Services Essentials. What is a web service? web service: software functionality that can be invoked through the internet using common protocols like.
JQuery form submission CIS 136 Building Mobile Apps 1.
JQuery, JSON, AJAX. AJAX: Async JavaScript & XML In traditional Web coding, to get information from a database or a file on the server –make an HTML form.
11 jQuery Web Service Client. 22 Objectives You will be able to Use JSON (JavaScript Object Notation) for communcations between browser and server methods.
Redmond Protocols Plugfest 2016 Tarun Chopra Accessing APIs through Add-Ins Sr. Escalation Engineer.
National College of Science & Information Technology.
Web API - Introduction AJAX, Spring Data REST SoftUni Team Web API
CSE 154 Lecture 11: AJAx.
Data Virtualization Tutorial… CORS and CIS
AJAX and REST.
CSE 154 Lecture 11: AJAx.
Session V HTML5 APIs - AJAX & JSON
IS 360 Course Introduction
CSE 154 Lecture 22: AJAX.
jQuery form submission
HTML Level II (CyberAdvantage)
HTML5 AJAX & JSON APIs
JavaScript & jQuery AJAX.
MIS JavaScript and API Workshop (Part 3)
Introduction to AJAX and JSON
Chengyu Sun California State University, Los Angeles
Web API with Angular 2 Front End
Chengyu Sun California State University, Los Angeles
Ajax and JSON Jeremy Shafer Department of MIS Fox School of Business
Chengyu Sun California State University, Los Angeles
Ajax and JSON Jeremy Shafer Department of MIS Fox School of Business
Presentation transcript:

How to consume a RESTful service using jQuery

Introduction  In this post we see how to consume the RESTful service described in the post Design a RESTful service with.NET framework 4.0 using the Ajax functionality provided by jQuery.RESTfulDesign a RESTful service with.NET framework 4.0jQuery  jQuery includes some utilities to simplify the Ajax call. In our example we will use the jQuery.ajax() function to do them. jQuery.ajax() accepts just a single argument: an options object whose properties specify many details about how to perform the Ajax request.

Introduction jQuery.ajax({ type: "GET|POST|DELETE|PUT", url: url, data: data, dataType:"text|html|json|jsonp|script|xml" success: success_callback, error: error_callback });

Common Options The most commonly used jQuery.ajax() options are the following, for a complete list see thejQuery API reference:jQuery API reference type Specify the request method. It can be one of the "GET", "POST", "DELETE", "PUT" values. url Url of the resource on the web. data Data to be sent in the body of the request. dataType Specifies the type of data expected in the response and how that data should be processed by jQuery. Legal values are "text", "html", "script", "json", "jsonp", and "xml".

Common Options success Callback function to be invoked when the request is completed. function(data, textStatus, jqXHR) This function accepts three arguments: the first is the data sent by the server, the sencond is the jQuery status code (normally the string"success") and the third is the XMLHttpRequest object that was used to make the request. error Callback function to be invoked if the request fails: function(jqXHR, textStatus, errorThrown). This function accepts three arguments: the first is the XMLHttpRequest object that was used to make the request, the second is the jQuery status code (possible values are "timeout", "error", "abort", and "parsererror") and a third is an optional exception object.

Consuming the service The following code snippets shows some example of service invocation. The examples assumes to invoke the service described in the post "Design a RESTful service with.NET framework 4.0". The object data exchanged with the service is the Contact object defined as follow:Design a RESTful service with.NET framework 4.0 // contact function Contact(fName, lName, , id) { this.fName = fName; this.lName = lName; this. = ; this.ContactId = id; this.toJsonString = function () { return JSON.stringify(this); }; };

ADD function addContact (contact) { jQuery.ajax({ type: "ADD", url: " data: contact.toJsonString(), contentType: "application/json; charset=utf-8", dataType: "json", success: function (data, status, jqXHR) { // do something }, error: function (jqXHR, status) { // error handler } }); }

PUT function updateContact (contact) { jQuery.ajax({ type: "PUT", url: " contentType: "application/json; charset=utf-8", data: contact.toJsonString(), dataType: "json", success: function (data, status, jqXHR) { // do something }, error: function (jqXHR, status) { // error handler } }); }

DELETE function deleteContact (contactId) { jQuery.ajax({ type: "DELETE", url: " contentType: "application/json; charset=utf-8", data: JSON.stringify(contactId), dataType: "json", success: function (data, status, jqXHR) { // do something }, error: function (jqXHR, status) { // error handler } }); }

GET function getContacts () { jQuery.ajax({ type: "GET", url: " contentType: "application/json; charset=utf-8", dataType: "json", success: function (data, status, jqXHR) { // do something }, error: function (jqXHR, status) { // error handler } });

Example Now let’s see how to create jQuery Ajax Client to consume web service XML response. Before proceeding I recommend you to go through my previous post about XML response. So taking previous example as a Web service lets write Ajax client to consume it. Create a HTML page and use html select to select specific car name, jQuery selector will get the value and create a URL, that URL then pass to Ajax call to web service and get response in XML format. Following jQuery shows that Ajax Call…

Example $(document).ready(function(){ $('select').change(function(){ $.ajax( { url: 'rest/xml/car/'+this.value, complete: function ( jsXHR, textStatus ) { var xmlResponse = $.parseXML(jsXHR.responseText), $xml = $(xmlResponse), $make = $xml.find('make'), $price = $xml.find('price'), $carName = $xml.find('car-name'); $('h3#carMake').html("Manufacture: "+$make.text()); $('h3#carPrice').html("Price: "+$price.text()); $('h3#carName').html("Car Name: "+$carName.text()); } ); }); })

Exemple Call to web service return response in XML format. You can see that response in FireBug.

Exemple Output will look similar to following screenshot in your browser.