Hello ,
Although there are lot of ways (like Jquery, etc.) to make Ajax request to access WCF service or any service, I implement a neat and clean way to call WCF service in JSON Format.
var baseUrl = "http://localhost:54976/RestServiceImpl.svc/";
function AjaxRequest(baseurl, type, callbackResponse, parameterString) {
this.BaseURL = baseurl;
this.Type = type;
this.Callback = callbackResponse;
this.createXmlRequestObject();
this.ParemeterString = parameterString;
}
AjaxRequest.prototype.createXmlRequestObject = function() {
if (window.ActiveXObject) {
try {
this.xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
this.xmlHttp = false;
}
}
else {
try {
this.xmlHttp = new XMLHttpRequest()
} catch (f) {
this.xmlHttp = false;
}
}
if (!this.xmlHttp) {
alert('there was an error creating the xmlhttp object');
} else {
}
}
AjaxRequest.prototype.MakeRequest = function() {
try {
if (this.xmlHttp.readyState === 4 || this.xmlHttp.readyState === 0) {
this.xmlHttp.open(this.Type, this.BaseURL, false);
var that = this;
this.xmlHttp.onreadystatechange = function() {
try {
alert(that.xmlHttp.readyState);
if (that.xmlHttp.readyState == 4) {
alert(that.xmlHttp.status);
if (that.xmlHttp.status == 200) {
var xmldoc;
if (window.ActiveXObject) {
xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.async = "false";
that.Callback(that.xmlHttp.responseText);
}
else {
that.Callback(that.xmlHttp.responseText);
}
}
}
}
catch (e)
{ alert(e) }
}
switch (this.Type) {
case "GET":
this.xmlHttp.send(this.BaseURL);
break;
case "POST":
this.xmlHttp.setRequestHeader("Content-type", "application/json");
this.xmlHttp.send(this.ParemeterString)
}
}
else {
setTimeout('GetAllAppsService', 5000);
}
} catch (e) {
alert(e);
}
}
Here
ajaxrequest
is the function where we treated it as a class.
Let me give an overview on parameters of
ajaxrequest
:
BaseURL
: Base url is the service url .
Type
: Which kind of request "
GET
" or "
POST
".
Callbackresponse
: Callback response used as callback function for calling from object and this will hold the response of server after sending the request.
Parameterstring
: Parameter string is the body of the request.
Note: If request is in JSON format, then
ParameterString
should be JSON string (in case of
POST
Request).
Now I will explain how to call it.
AuthenticateLogin.prototype.SendDetailsToServer = function(parameters, localId) {
var url = baseUrl + "SignUpUser";
var parameterString = "{";
for (var i = 0; i < parameters.length; i++) {
parameterString = parameterString + '"'
+ parameters[i][0] + '":"'
+ parameters[i][1] + '" ,';
}
parameterString = parameterString.slice(0, parameterString.length - 1);
parameterString = parameterString + "}";
var ajaxRequestObject = new AjaxRequest(url, "POST", function(responseText) {
var jsonobj = eval('(' + responseText + ')');
var result = jsonobj.SignUpUserResult;
if (result == "Successful") {
alert("SuccessfullyMail sent and you will redirect to login Page");
window.location = "http://localhost:54976/UI/latestLogin.htm";
}
else {
alert("Message sending Fail! Please try again");
window.location.reload(true);
}
}, parameterString);
ajaxRequestObject.MakeRequest();
}
That's it. I hope you will like it.
Rohit started Embedded Programing in his college days and now he is a Software Developer by Profession. Mainly he interested in cutting edge technology offer by Microsoft (i.e Azure,MVC). He Loves coding and his passion is always been towards Microsoft Technologies. Apart from coding his other hobbies include reading books and hang out with friends is his most favorite past time hobby.
1. 20 Apr 2014: Best Mobile Article of March 2014 - First Prize