Can I use XMLHttpRequests in JavaScript to request a file on a different server than the one from where the request was made?
Thank you.
You need to use a method that is called as JSONP.
One of the best ways is to use jQuery to reduce the code and worries between your page and the server, and all you need to do is:
$.ajax({
dataType: 'jsonp',
data: 'id=10',
jsonp: 'jsonp_callback',
url: 'http://myotherserver.com/getdata',
success: function () {
// do stuff
},
});
Only if the remote server supports JSONP or HTTP Access-Control headers.
Public JSON API's (like the ones provided by Google.com, Facebook.com, etc) often do.
Related
Can we use jsonp to overcome same domain policy of JS.
I need to run script from a domain x to run on domain y. So is it possible to send a script and execute ??
Yes, that is the entire point of JSONP.
There is no restriction on where you can load a script from (other then the usual http/https conflicts).
You can import a JS/CSS file from any other domain.
If you need to GET data from some other domain, you will need to get it through JSONP.
Please note that cross domain requests work only for HTTP/S GET and the only format of data accepted is JSONP.
e.g.
my code using jquery
$.ajax({
url: 'https://www.otherDomain.com',
type: "GET",
crossDomain: true,
data: parameters,
dataType: "jsonp",
jsonpCallback: "localJsonpCallback"
});
function localJsonpCallback(json) {
/* Do stuff */
}
The server side response needs to be in JSONP.
I want to call an asp.net web service's from a different domain with javascript.
Ex :
I have the site "www.abc.com", I want it to call the web service on "www.xyz.com" with some javascript I load from X domain.
First I add the script with this :
document.write(unescape("%3Cscript src=%27http://myscript.com/script.js%27 type=%27text/javascript%27%3E%3C/script%3E"));
This is the script.js file :
$.ajax({
type: "POST",
url: "http://www.xyz.com/Service1.asmx/InsertIt",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: function (response) {
alert(response);
}
});
function OnSuccess(response) {
alert(response.d);
}
I know Cross-domain calls from within client-side code are a no-no in all major browsers. To achieve that, I think you can use CORS.
Use CORS, ie. set Access-Control-Allow-Origin header to
http://your-caller-domain.com in the web
In this example, I know the caller domain : www.abc.com. but in the real life, I will never know the caller domain. I know there's other way to do a Cross-Domain call, ex : JSONP. But this technique is really complexe (for me).
So I am asking is there's an easy way to achieve a Cross-Domain call ?
The best and safest method is using your server side framework to do your http requests which you can then present to your JS. This negates any cross browser annoyances that client side calls inherit.
Eg:
AJAX hits www.abc.com/getdata.ashx.
Execute your request to www.xyz.com using below method.
Return a json string or plain text. It's up to you.
WebRequest for .NET. There is an example at the bottom.
Also look at HTTP handlers (.ashx) for doing requests. Not essential, but it's good to learn.
Check the documentation bellow, u'll be able to perform cross-domain requests
http://api.jquery.com/jquery.getjson/
$.getJSON( "http://www.xyz.com/Service1.asmx/InsertIt", function( data ) {
alert(data.d);
});
I'm using jquery to post data to a server, the server received the data, but the chrome still shows the error :
XMLHttpRequest cannot load `myServer:63373/api/sendData`. Origin `myServer:63385` is not allowed by Access-Control-Allow-Origin.
Here is my js code:
$.ajax({
type: 'POST',
url: 'myServer:63373/api/SendData',
crossdomain: true,
async: true,
data: myData,
dataType: 'json',
success: function(){ alert('success'); }
});
The strange thing is that the 'success' shows up after the request, and the server did receive the data, but then the error message shows up in the console. Is there any way to avoid this message?
Thanks for all you answers above but I think I've found the way, before I solve this I was trying to use two ways, Setting Access-Control-Allow-Origin in ASP.Net MVC - simplest possible method
with the 87 votes and 32 votes, I found the answers at two different places, and both applied them, but it didn't work. Early this week, I tried to delete the code in the web.config and just left the code in C#, it works! Can't believe these two solutions have confliction.
Anyway, hope this could help others.
"not allowed by Access-Control-Allow-Origin" is the reason. Put simply, you can't normally do an XHR call to a different domain/port/protocol from those of the webpage your javascript was included into.
Modern browsers allow you work around this with permission from the server administrator.
You make your Ajax request with the XHR2 API (http://www.html5rocks.com/en/tutorials/cors/)
The on the server side, you need to emit the following headers to allow access from the domain that served the page that included your javascript:
Access-Control-Allow-Origin: http://your-page-domain.com
Access-Control-Allow-Credentials: true
if situation are
your script is hosted on another server
or subdomain
or try to hit url with another port
this is cross-domian request. jquery can not fulfill cross-domain request.
if this is your issue , then you should use jsonp for this "jsonp " allows cross domain request.
try to do this with using jsonp.
for jsonp every call has a callback means there will be a value in url
and you have to send respnse with this call back in php
means try this:-
$.ajax({
type: 'POST',
url: 'myServer:63373/api/SendData',
crossdomain: true,
async: true,
data: myData,
dataType: 'jsonp',
success: function(){ alert('success'); }
});
and in php
wrap your response in $_GET['_callback']."(".$response.")"; and echo it
you will get response in json .
What am I doing wrong to get this error?
This is what the link looks like:
$.ajax({
url: "http://services.runescape.com/m=itemdb_rs/api/catalogue/detail.json?item=4798",
dataType: 'jsonp',
success: function(results){
console.log(results);
}
});
EDIT:
By using dataType: 'json', instead of dataType: 'jsonp',, I get this error instead:
Additional Info about using the API by the host:
http://services.runescape.com/m=rswiki/en/Grand_Exchange_APIs#GE_Item_price_information
You are specifying a type of "jsonp", but that response looks like plain JSON to me.
JSONP is a particular way of sending JSON which wraps the data in a callback function as a way of getting around the "same-origin" security policy. As this article on the jQuery site describes it, it is "a consensual cross-site scripting hack".
It has to be supported by the service you're retrieving from; you'll have to check their docs for how to get them to send it. If they can't, you will have to grab their JSON with a server-side script, which you can then use like a proxy by running AJAX calls against your own script.
I try to shorten some text using the http://140it.com/ service over AJAX, but I always get an empty response.
Example:
$.ajax({
url: "http://140it.com/api/shrink",
data: {text: 'hello'},
success: function(d) { alert(d) },
dataType: 'html',
type: 'GET'
});
If I execute the url manually (like browsign the web) I get the response.
Fix? Thx.
You cannot perform cross-domain AJAX requests.
I.e. If your site is hosted on domain A.com, you cannot do a $.ajax request to B.com.
One of the solutions is to use a server-side proxy script on your own domain. For instance, you could have PHP do the request to 140it and have jQuery call your script instead of 140it directly. This is described in this article: http://jquery-howto.blogspot.com/2009/04/cross-domain-ajax-querying-with-jquery.html
The other solution is to use JSONP web services which allow you to specify a callback function and can be called by appending a SCRIPT element to your page. However, not all API providers offer JSONP.
Christian
You should be using the JSONP format of the api which uses the callback parameter
http://140it.com/api/shrink?char_max=5&text=today&callback=do_something
Use jQuery's getJSON and you should be good to go.