Use Javascript to connect to WCF Web Service - javascript

Does anyone know how to use Javascript to connect to a WCF Web Service?
All I need at this point is to actually connect to the web service, and be notified that the connection was successful.
Does anyone know how I can do this?

If your WCF service is within the same domain you might use the below function that would perform the call
function TestingWCFRestWithJson() {
$.ajax({
url: "http://localhost/Service/JSONService.svc/GetDate",
dataType: "json",
type: "GET",
success: function (data, textStatus, jqXHR) {
// perform a success processing
},
error: function (jqXHR, textStatus, errorThrown) {
// show error to the user about the failure to invoke the service
},
complete: function (jqXHR, textStatus) {//any process that needs to be done once the service call is compelte
}
});
}
If your WCF service is in some other domain other than your calling applications domain then you would need to perform a JSONP call as shown below:
function TestingWCFRestWithJsonp() {
$.ajax({
url: "http://domain.com/Service/JSONPService.svc/GetDate",
dataType: "jsonp",
type: "GET",
timeout: 10000,
jsonpCallback: "MyCallback",
success: function (data, textStatus, jqXHR) {
},
error: function (jqXHR, textStatus, errorThrown) {
},
complete: function (jqXHR, textStatus) {
}
});
}
function MyCallback(data) {
alert(data);
}
When a JSONP call is performed using JQuery's $.ajax the complete/success/error methods are not fired rather a callback method as shown is fired which needs to be handled by the WCF service. There is a attribute "crossDomainScriptAccessEnabled" provided by the WCF framework that identifies if the request is a JSONP call and writes the content back to the stream to invoke the callback function with data. This is available on the binding element as shown below:
<webHttpBinding>
<binding name="defaultRestJsonp" crossDomainScriptAccessEnabled="true">
<readerQuotas maxStringContentLength="2147483647" maxArrayLength="2147483647" maxBytesPerRead="2147483647" maxDepth="64" maxNameTableCharCount="2147483647" />
<security mode="None" />
</binding>
</webHttpBinding>

Given you'd properly written/configured your/the WCF service you should be able to load the following url:
http://somedomain.com/somewcfservice.svc/jsdebug
and call the exposed methods.

Related

Redirecting an iFrame with POST data from jQuery

I have not found a solution for this on the internet, just some that don't work.
This is the problem:
function goto_checkout(){
jQuery.ajax({
type: 'POST',
dataType: "JSON",
url: checkouturl,
success: function (data, textStatus, XMLHttpRequest) {
jQuery.redirect(payments_url, data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
The AJAX call returns a JSON object. Right now, I am then redirecting to a third-party website submitting my JSON object as POST data.
I don't want a redirect anymore, but I want my iFrame with id iFrame1 to go to the same website while submitting the same POST data there.
Please help me i am desperate

AWS Cognito Authorize API call Using Javascript

I have a API which Authenticate by AWS cognito service. i wanted to call it using ajax .i used below code for that.
$.ajax({
url: 'https://XXXXXXXXX.execute-api.us-east-2.amazonaws.com/XXXXXXXX/setusername',
type: 'POST',
dataType: 'json',
data: {},
header :{'Authorization':result.getIdToken().getJwtToken()},
success: function (data, textStatus, xhr) {
console.log(data);
},
error: function (xhr, textStatus, errorThrown) {
console.log('Error in Operation');
}
});
but it gives me below error when i execute it.(Note: when i remove cognito Auth from API gateway this working fine)
Console Error
and below is my integration response
try this library to sign the call to your API Lambda method https://github.com/mhart/aws4
or are you using a custom auth?

call server side inherited C# web method from javascript

Please Help me,
I want to call a server side function in page1 from page2 using java script.
For example in Home.aspx.cs i have read() webmethod and i want to call this method from Call.aspx's Javascript function.
You need to create an ajax call:
$.ajax({
url: "linkToOtherPage",
method: "POST", // or GET, I don't know what you need
data: dataToPass,
success: function (response) { },
error: function(jqXHR, textStatus, errorThrown) { }
});

Retrieving user_timeline from Twitter in XML

I'm writing a simple app in HTML and Javascript. I'm trying to retrieve my user_timeline via jQuery's .ajax() method. The problem is that I want to retrieve my timeline in XML but I'm keep failing with this simple task. Here's my code:
$.ajax({
type: 'GET',
dataType: 'xml',
url: 'http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=stepanheller',
success: function(data, textStatus, XMLHttpRequest) {
console.log(data);
},
error: function(req, textStatus, error) {
console.log('error: '+textStatus);
}
});
Weird thing is that when I try exactly the same thing but with JSON instead of XML then the script works.
$.ajax({
type: 'GET',
dataType: 'jsonp',
url: 'http://api.twitter.com/1/statuses/user_timeline.json?screen_name=stepanheller',
success: function(data, textStatus, XMLHttpRequest) {
console.log(data);
},
error: function(req, textStatus, error) {
console.log('error: '+textStatus);
}
});
Can you give me some hints what I'm doing wrong with the request? I know that I'm using old version of API but I won't deal with OAuth right now. Thanks.
It is generally impossible to send a Cross-domain ajax request. It's the general rule.
JsonP is the classic way to work around this limitation, and there is no equivalent for Xml according to my knowledge. Depending on your browser compatibility constraints, you can use XHR2 to achieve this.
Otherwise, the only solution is to set up a server proxy.
Client --Ajax--> Your server --HttpRequest--> Twitter

JSON data not responding

Following is my code :
function jsonpCallback(response){
//JSON.stringify(response)
alert(response);
}
$.ajax({
url: url,
dataType: 'jsonp',
error: function(xhr, status, error) {
alert(error);
},
success: function(data) {
alert(data);
jsonpCallback(data);
}
});
Here my url variable is the link which contain the following data and as per I know it is in the JSON format:
[{"destination":"United States","destinationId":"46EA10FA8E00","city":"LosAngeles","state":"California","country":"United States"}] etc..
I want to call jsonpCallback function after passing successive data to it. But success argument of $.ajax is not calling the function thats why I am not getting any data into it. But my debugger window showing response there, so why its not coming $.ajax function?
Any help...thanks in advance.
Try to pass type of ajax call GET/POST.
$.ajax({
type: "GET",
url: url,
dataType: 'jsonp',
error: function(xhr, status, error) { alert(error); },
success: function(data) {
alert(data);
jsonpCallback(data);
}
});
function jsonpCallback(response){
//JSON.stringify(response)
alert(response);
}
The URL you are trying to load data from doesn't support JSONP, which is why the callback isn't being called.
If you own the endpoint, make sure you handle the callback GET parameter. In PHP, your output would look like this:
<?php
echo $_GET['callback'].'('.json_encode($x).')';
This will transform the result to look like this:
jsonp2891037589102([{"destination":"United States","destinationId":"46EA10FA8E00","city":"LosAngeles","state":"California","country":"United States"}])
Of course the callback name will change depending on what jQuery generates automatically.
This is required as JSONP works by creating a new <script> tag in the <head> to force the browser to load the data. If the callback GET parameter isn't handled (and the URL returns a JSON response instead of a JSONP response), the data gets loaded yes, but isn't assigned to anything nor transferred (via a callback) to anything. Essentially, the data gets lost.
Without modifying the endpoint, you will not be able to load the data from that URL.
One weird thing I've noticed about $.ajax is that if the content-type doesn't match exactly it's not considered a success. Try playing around with that. If you change success to complete (and fix the arguments) does it alert?
It's not working because your server does not render a JSONP response. It renders a JSON response.
For JSONP to work, the server must call a javascript function sent by the ajax request. The function is generated by jQuery so you don't have to worry about it.
The server has to worry about it, though. By default, this function's name is passed in the callback argument. For example, the URL to the server will be http://some.domain/ajax.php?callback=functionName (notice callback=functionName).
So you need to implement something like the following on the server side (here in PHP):
$callback = $_GET['callback'];
// Process the datas, bla bla bla
// And display the function that will be called
echo $callback, '(', $datas, ');';
The page returned will be executed in javascript, so the function will be called, so jQuery will call the success function.
First check in which event you are calling $.ajax function...
<script type='text/javascript'>
jQuery('#EnrollmentRoleId').change(function(){
alert("ajax is fired");
$.ajax({
type: "GET",
url: url,
dataType: 'jsonp',
error: function(xhr, status, error) { alert(error); },
success: function(data) {
alert(data);
jsonpCallback(data);
}
});
});
function jsonpCallback(response){
//JSON.stringify(response)
alert(response);
}
</script>
second try to replace $ with jQuery.
Try to give no conflict if you thinking any conflict error..
jQuery ajax error callback not firing
function doJsonp()
{
alert("come to ajax");
$.ajax({
url: url,
dataType: "jsonp",
crossDomain: true,
jsonpCallback:'blah',
success: function() { console.log("success"); },
error: function() { console.log("error"); }
});
}
Then check your json data if it is coming it is valid or not..
Thanks

Categories