Welcome to the "Understand jQuery Ajax Function" article series. This series is targeted to novice developers that want to learn Ajax using the JQuey Ajax function. The previous example explained about calling a code-behind C# method using a jQuery Ajax function. You can read it here.
Understand jQuery Ajax function: Call code-behind C# method using jQuery Ajax method
In this article we will see how to call Web Service methods using a jQuery Ajax function. In a future article we will proceed to a WCF Service and the Web API.
Call Web Service from JQuey Ajax function
We will now call a C# Web Service method using a jQuery Ajax method. Try to understand the following code.
Step 1: Create simple web service
This is the first step, here we will create a simple web service that will be consumed by a JQuey Ajax method. So add one .asmx page to the current solution and modify the code as in the following example.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.Services;
namespace WebApplication
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class DataService : System.Web.Services.WebService
{
[WebMethod]
public string GetData()
{
Dictionary<string, string> name = new Dictionary<string, string>();
name.Add("1", "Sourav Kayal");
name.Add("2", "Ram mishra");
string myJsonString = (new JavaScriptSerializer()).Serialize(name);
return myJsonString;
}
}
}
As in the previous article, the code is very simple . Here are two things we need to keep in mind.
Don't forget to enable the attribute:
[System.Web.Script.Services.ScriptService]
Before the class definition. The second one is to add the "[WebMethod]" attribute before the function definition. So, here we have finished our Service settings. We can run this service to test it in a Web browser. Now we will set up a jQuery Ajax function to call the service.
Step 2: Implement jQuery Ajax function
Here is sample code to call Web Service method. The only changes we made compared to the code-behind fashion (in the previous article) is the URL. Here we specified the service location of the specific C# function.
In this context there is one more point to explain. In the case of the code-behind fashion we declared the C# method as a static method, but for the Web Service, it is not necessary to define the method as a static method.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="WebApplication.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$.ajax({
type: "POST",
url: "DataService.asmx/GetData",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var names = response.d;
alert(names);
},
failure: function (response) {
alert(response.d);
}
});
});
</script>
</head>
<body>
<form id="frm" method="post">
<div id="Content">
</div>
</form>
</body>
</html>
Here is sample output.
![JQuery ajax function]()
Conclusion
In this article we learned how to call a Web Service using a jQuery Ajax method. Hope you have understood the concept. In a future article we will try to consume a few more services using a JQuey Ajax function.