In this article, we will learn how to call Web-API service using jQuery AJAX method.
GET method to call Web-API
using JQuery AJAX
In this article we will
understand how to call Web-API using JQuery AJAX function. We know that Web-API is
new version of Microsoft’s service oriented application. It comes associated
with MVC-4 template. Web-API has built on top of MVC architecture, so we can
think that it is sub set of MVC architecture. It’s fully RESTful service which can
consume by HTTP verb. If you are not aware about HTTP verb then this small
discussion is for you.
- GET:- when we click one
any link generally we make GET request to server. To get GET any resource we
have to make GET request.
- POST:- When we want to
POST data to server we have to make POST request.
- PUT:- This request is
needed when we want to make update operation to server.
- DELETE:- We can perform
delete operation when we want to delete
any resource.
As we have now understood the
basic idea about RESTful service now we will understand how to make AJAX call
with Web-API.
Create client application
to AJAX call
In this example we will
create JQuery ajax() function to call Web-API. We know that to make AJAX call we
have to include JQuery library and in this example we have loaded this library
from our local system. Here is code implementation of ajax() function.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JSON.aspx.cs" Inherits="MvcApplication1.JSON" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.7.1.js"></script>
<script>
$(document).ready(function () {
$.ajax({
url: 'http://localhost:3002/api/values',
type: 'GET',
dataType: 'json',
success: function (data, textStatus, xhr) {
console.log(data);
},
error: function (xhr, textStatus, errorThrown) {
console.log('Error in Database');
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
In URL parameter we have specified the actual URL of RESTful
service and we are making GET call to API. The data type is specified as “JSON”
means when data will send from server, it will send as JSON format. We have
specified two callback functions into ajax method. The success callback will
get fire if the call completes successfully otherwise error function will get
execute.
Create Web-API in MVC
Now we will create Web-API in MVC project template. So, open
one MVC-4 web application and choose Web-API template from that. We will find
that the few default dummy controllers are present in application. In this example
we have modified the Values controller and kept GET method into it.
The GET method will return array of string in JSON format.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
namespace MvcApplication1.Controllers
{
public class ValuesController : ApiController
{
// GET api/values
public IEnumerable<string> Get()
{
return new string[] { "value1", "value2" };
}
}
}
Point to be noted in Web-API is that it serializes data
automatically no explicit serialization is needed to send data through HTTP
response. Web-API returns message in JSON format so that the return data is
very less. But in case of SOAP based service there is lot of data overhead in
message.
Here is output of above example.
Conclusion:-
In this article we have learned to call Web-API using GET
method. Hope you have understood the concept of both ajax() function and Web-API.
In coming article we will explore more about Web-API and AJAX call.