Consuming web service in HTML - javascript

I have created a web service and saved its .wsdl file. I want to consume this service in my HTML file by providing its URL.
Can anybody tell me how to call the URL in HTML and use it?
Like its done here.
http://www.codeproject.com/Articles/14610/Calling-Web-Services-from-HTML-Pages-using-JavaScr/
The only difference is my web service does not have an extention like "asmx?wsdl".
Does that makes any difference.
I followed that tutorial too but it does not produce any output.
Thank You////

You definitly should get familiar with AJAX.
You could use the ajax functionalities provided by jQuery. That's the easiest way, I assume. Take a look at http://api.jquery.com/jQuery.ajax/
You can use this like
$.ajax({
url: "urltoyourservice.xml"
dataType: "xml",
}).done(function(data) {
console.log(data);
});
HTML itself cannot consume a webservice. Javascript ist definitely needed.
The existence of your WSDL File looks like you are probably using a XML format as the return of the web service. You have to deal with XML in javascript. Therefore take a look at Tim Downs explanation.
But keep in mind, that your web service URL must be available under the same domain as your consumption HTML-File. Otherwise you'll receive a cross-site-scripting error.

yes you can use ajax but keep in mind you wont be able to make a request across domains. Consuming web services should be done in server side.
To further gain more knowledge about this, read How do I call a web service from javascript

function submit_form(){
var username=$("#username").val();
var password=$("#password").val();
var data = { loginName: username, password:password };
$.ajax( {
type: "POST",
url:"Paste ur service address here",
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: function(data){
var value = data.d;
if(value.UserID != 0){
alert.html('success');
}
},
error: function (e) {
}
});
}
Try this it will help

Related

Retrieve value from open external API - visual studio - javascript - AJAX

I would really appreciate some advice, I'm trying to retrieve information from an open API for the first time.
The API details are here,
https://data.police.uk/docs/method/neighbourhood-locate/
I want to retrieve the 'force' and 'neighbourhood' values and save them into variables, I want to save them as variables as I'm then calling googlemaps to display the KML map. I managed to get quite far on other sections of my code, such as geocoding a user inputted address and retrieving the Long/Lat, but I am now struggling to send the long/lat to the external API and save the response.
I've hardcoded the long/lat into the below URL for this advice request, I think I'm getting a response from the API but failing to capture the values into my variables. The debugger shows the following response, {"force":"metropolitan","neighbourhood":"00BK17N"}, below is my code,
var ForceId; //returned from the API
var Neighbourhood; //returned from the API
accessURL = "https://data.police.uk/api/locate-neighbourhood?q=51.500617,-0.124629"
//Use the zip code and return all market ids in area.
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: accessURL,
dataType: 'jsonp',
success: function (data) {
ForceId.push(val.force);
Neighbourhood.push(val.Neighbourhood)
console.log(ForceId);
console.log(Neighbourhood);
}})
I made a few mistakes, after seeing the responses were coming back as errors for its syntax, I adjusted some settings, I removed contenttype as 'application/JSON' and the response could be seen in the consolelog to contain the needed parameters. I'm not sure of the implications of doing this or if its bad practice as I'm extremely new at this, its my first attempt at working with API's. So other may advise better.
function GetPolice(){
$.ajax({
type: "GET",
// contentType: "application/json; charset=utf-8",
url: accessURL,
dataType: 'json',
success: function(data) {
ForceId = data.force;
Neighbourhood = data.neighbourhood;
},
})
}
If your new at this, then my suggestion is to tinker with 'success, error, complete' to see what responses are being returned to consolelog. Have a look at what your 'datatype' should be from the external API. Again, i'm not best placed to give advice but hope other new people find this helpful.
I now need to make the above a callback response, as it completes the function before the responsehas been recieved, I wish to use the response in another fucntion elsewhere, but thats a different challenge :)

jquery mobile web application developement( need help)

Can any one please tell me how to send data to web service using jquery and receive data from web service?
If we are using web service should we need to use url to get records?
$j.ajax({
type: "GET",
url: "testing.json",
dataType :'json',
contentType:'application/json; charset =utf-8',
success:function(data)
{
$j.each(data, function(index,element){
$j('#json').append("<li class='ui-li ui-li-static ui-btn-up-c ui-corner-top ui-corner-bottom ui-li-last'>"+element+"</li>");
});
}
})
});
I am developing web application using jQuery mobile.
Can any one please tell me how to send data to web service using jquery
Put it in a data property on the object you pass as the first argument to ajax().
How you format the data will depend on the particular web service.
Your existing code claims that it will be JSON so the data you pass to data should be a string representation of a JSON Text.
You will need to change the type to POST in order to do this though. The content-type request header describes the request body and you don't get one of those with a GET request.
(If the web service does not expect to receive JSON data then you will need to change the code to represent whatever it does expect).
and receive data from web service?
Read it from the first argument to the callback function you pass to the success function.
If it is in a known data format (XML, HTML or JSON), then jQuery should automatically parse it. Note that you have dataType: 'json' which will override whatever the server says it is sending back and try to parse it as JSON data regardless.
If we are using web service should we need to use url to get records?
Yes. URLs are how web server end points are identified.
a liitle example to get data from a web service using jquery ajax call
function GetData() {
$.ajax({
type: "POST",
url: "Members.asmx/GetMemberDetails",//your webservice call
data: "{'MemberNumber': '" + $("#txt_id").val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnGetMemberSuccess,
error: OnGetMemberError
});
}
function OnGetMemberSuccess(data, status) {
//jQuery code will go here...
}
function OnGetMemberError(request, status, error) {
//jQuery code will go here...
}
Example: Introduction to using jQuery with Web Services

How do I do an ajax call to a database using Javascript, a URL and a key

I have been given a url of type xxxx.xxxxx.com as well as a key of type FGHyehgvc787vbhj
in order to gain read-only access to an sql database and retrieve data from it using javascript.
I have no prior experience with databases and maybe my question will sound completely stupid but I was wondering how can I combine the above information in order to get access to the database (e.g. do an ajax call and retrieve data from it..)
I'm familiar with doing ajax calls to a webpage and getting data from it using jQuery, as in :
$.ajax(/*url of website*/, function (data)
{
var dataRetrieved = $(data);
// do something with the data retrieved...
});
so I was wondering whether there is something equivalent to the above when it comes to making an ajax call to a database, using however a key.
Thank you for any help, and please delete this post if you find it completely pointless and excuse me in advance for that by the way.
It is usually very bad design to allow client side code to interact with your database in any way. This can be a huge security issue. Generally you will want your server side code to do this (e.g PHP, node, etc.). You would send a request to your server with client side code, and the server side code would do the actual work of updating the database.
you can create a wcf service and call that service through ajax, that wont be huge security issue.
try this
$.ajax({
cache: false,
type: "GET",
async: false,
data: {},
url: http:xxxxxxxxxxxx.svc/webBinding/Result?metaTag=" + meta,
contentType: "application/json; charset=utf-8",
dataType: "json",
crossDomain: true,
success:function(result){},
error: function(){alert(err);}
});
Use this
$.ajax({
url: 'path/to/server-side/script.php', /*url*/
data: '', /* post data e.g name=christian&hobbie=loving */
type: '', /* POST|GET */
complete: function(d) {
var data= d.responseTXT;
/* Here you can use the data as you like */
$('#elementid').html(data);
}
});
Hope this helps...

How to process TFL news feeds?

Can anyone suggest an idea of accessing tfl traffic news feeds?. The following is the link to get the url for the data feed.
http://www.tfl.gov.uk/businessandpartners/syndication/16492.aspx
The code I tried is as follows:
Code Sample:
$jq.ajax({
type: 'GET',
url: 'http://www.tfl.gov.uk/tfl/businessandpartners/syndication/feed.aspx?email=***********#****.com&feedId=13',
dataType: "xml",
async: "false",
success: function(xml) {
$jq(xml).find('rr_event').each(function() {
//var title=$jq(this).find('title').text();
alert("success!");
});
}
});​
It looks like the link requires you to have valid credentials to access what I expect to be some sort of xml feed? Also, if you are trying to access this url from a different domain other than www.tfl.gov.uk, you will need to use JSONP to fetch the data otherwise you will run into a security exception (cross-domain error).

Ajax get request to wsdl web-service

i have wsdl file and i need get data from. How i can do this ? i'm trying do this with ajax
like this:
jq.ajax({
url: 'http://url.wsdl',
type: 'get',
success: function(data){
alert("OK " + data);
},
error: function (x, y, z) {
alert("ERROR");
}
});
what i do wrong ?
Any other way to get data from wsdl web service using javascript, jquery and etc. is?
I think what you are missing is a data: {}
I read that there was some sort of bug if you did not include that when using $.ajax
Oh, and most likely you are going to need dataType: "json" or whatever datatype the service is using.
Here is an example i am using against an online webservice:
jQuery.support.cors = true; //enables cross domain queries for Ajax
$('#jqueryBtn').click
(function ()
{
$.ajax
(
{
type: "GET",
url: "http://www.webservicemart.com//uszip.asmx/ValidateZip",
data: { 'ZipCode': '22553' },
dataType: 'html',
success: jqSuccess,
error: jqError
}
);
}
Hopefully you can use this example to fix your own code
http://forum.jquery.com/topic/jquery-ajax-to-call-a-wsdl-web-service
The following link should explain why you cannot use AJAX for cross domain queries:
http://www.w3schools.com/xmL/xml_parser.asp:
Access Across Domains
For security reasons, modern browsers do not allow access across
domains.
This means, that both the web page and the file it tries to load,
must be located on the same server.
The examples on W3Schools all open XML files located on the W3Schools
domain.
If you want to use the example above on one of your web pages, the file you load must be located on your own server.
You can create a proxy web page in your web server to access to WSDL web service and return result to the AJAX request

Categories

Resources