Loading .js file cross domain using ajax - javascript

I'm trying to access a cross domain .js file using ajax:
$.ajax({
type:'get',
crossDomain:true,
url: "http://localhost/62588/scripts/bootStrapper.js",
contentType: "application/json",
dataType: 'jsonp'
}).done(callback);
I have a callback at the moment:
getBootStrapperScript(function (callback) {
//do somethibg
})
I get the following error:
XMLHttpRequest cannot load http://localhost/62588/scripts/bootStrapper.js. Origin http://localhost:62607 is not allowed by Access-Control-Allow-Origin.
I have been reading about JSONP but I'm not sure how to use it to load a .js file from anoather domain.
If I change the above code to use 'jsonp' for the datatype but I then get this errer:
GET http://localhost/62588/scripts/bootStrapper.js?callback=jQuery18206067646441515535_1354459693160&_=1354459696966 404 (Not Found)
How can I load cross domain js files?

Don't use any AJAX, simply use the $.getScript function:
$.getScript('http://localhost/62588/scripts/bootStrapper.js').done(callback);
As you know, you could be pointing the <script> tag to any domain you wish without violating the same origin policy. That's the basis of JSONP. But you don't need any JSONP, because all you need is to reference a script form a remote domain, which is as simple as pointing the <script> tag to this script or if you want to do it dynamically use the $.getScript function that jQuery has to offer you.
UPDATE:
The $.getScript function will append a random cache busting parameter to the url. If you want to get a cached version of your script you could define a custom cachedScript function as shown in the documentation:
jQuery.cachedScript = function(url, options) {
options = $.extend(options || {}, {
dataType: 'script',
cache: true,
url: url
});
return jQuery.ajax(options);
};
and then:
$.cachedScript('http://localhost/62588/scripts/bootStrapper.js').done(callback);

Related

jQuery was not called:Https Configuration

I have a json file with data. I am trying to access it through ajax call. i am accessing the script in the https website. I am getting the following error.
Error: jQuery110204653455846038177_1518073501526 was not called
at Function.error (https://sitename/news/scripts/jquery-1.10.2.min.js?v=1:21:4112)
at l.jsonp.n.dataTypes.(anonymous function).n.converters.script json (https://stat.sitename.com/news/scripts/jquery-1.10.2.min.js?v=1:23:17176)
at On (https://stat.sitename.com/news/scripts/jquery-1.10.2.min.js?v=1:23:15599)
at k (https://stat.sitename.com/news/scripts/jquery-1.10.2.min.js?v=1:23:13940)
at HTMLScriptElement.n.onload.n.onreadystatechange (https://stat.sitename.com/news/scripts/jquery-1.10.2.min.js?v=1:23:16467).
If I use the same script in an http website, there is no issue.
$.ajax({
url: "data.json",
data: {},
dataType: 'jsonp',
success: function (e) {
alert();
},
error: function (e, l, s) {
console.log(s)
}
});
Use getJSON instead $.ajax with JSONP or change dataType from "jsonp" to "json". JSONP is a technique that allows you to transfer JSON data across multiple domains.
$.getJSON('/data.json',{}, function(data) {
console.log(data);
});
And here part of jQuery 1.2 documentation:
If you have problem with origins, you should modify serwer configuration. Add custom headers to .htaccess or modify server headers in a different way(apache virtual host configuration for example):
Header set Access-Control-Allow-Origin "http://localhost:80/"
After this modification you'll be able to download this file from external serwer.

Get JSON(P) from other site [duplicate]

This question already has answers here:
Unexpected token colon JSON after jQuery.ajax#get
(2 answers)
Closed 7 years ago.
I am trying to get data with Ajax.
Data is json. I use jquery and angular.
But result is undefined or error.
Here is my jquery code:
$(document).ready(function() {
var url = "http://market.dota2.net/history/json/";
$.ajax({
type: 'GET',
url: url,
async: false,
contentType: "application/json",
dataType: 'jsonp',
success: function(data) {
console.log(data);
}
});
});
In Angular i am usin jsonp method. Whats wrong ?
By the way, in pure Java i can get data from this url...
Whats wrong?
You're trying to call an endpoint that provides JSON as though it provided JSONP. That won't work; they are different (though related) formats.
Example JSON:
{"foo":"bar"}
Example JSONP:
callback({"foo":"bar"})
Note the difference: JSONP is actually a JavaScript function call, wrapped around the JSON.
If the API supports JSONP, call an endpoint that supports it.
If not, you can't query it directly unless the provider supports Cross-Origin Resource Sharing and shares with your origin, because of the Same Origin Policy that applies to ajax calls.
By the way, in pure Java i can get data from this url...
Because the Java code is not running in a context that is controlled by the SOP, and so can get the data from that endpoint (as JSON) and use it. This is also the same reason that just posting that URL into a browser address bar lets us see the data. But ajax calls are governed by tighter rules.
If you expect json, dont use jsonp but json.
$(document).ready(function() {
var url = "http://market.dota2.net/history/json/";
$.ajax({
type: 'GET',
url: url,
async: true, /* it fails with false */
contentType: "application/json",
dataType: 'json',/* <== here */
success: function(data) {
console.log(data);
}
});
});
Are you using jsonp consciously ? Do you know what it is ? If not, use json. Or get informed about JSonP: https://en.wikipedia.org/wiki/JSONP
I tried on Safari:works.
On Chrome & FFox: does not work + Erreur "Cross Domain Origin"
XMLHttpRequest cannot load http://market.dota2.net/history/json/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
That means you cannot get JSon with your client/machine from the API server. So you should indeed use JSonP, but... you miss the callback or something in the API documentation.

How get xml result(cross domain request)?

I need to make a request to a dedicate website , using jsonp for cross domain reason to get back a XML result and work on it.
So basicly I am doing this to start :
(function($) {
var url = 'http://www.website.....';
$.ajax({
type: 'GET',
url: url,
// async: false,
// contentType: "application/json",
dataType: 'jsonp',
});
})(jQuery);
I can finally get an answer from website, that I can see in the firebug plugin, but in XML tab
such as :
<Results xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.website.com">
<ResultSet id="searchResults" numResults="3" >
From my understanding jsonp is a json object and in my case it s returning a XML content.
My problem is how to manage the XML return from the website? I can parse it and play with in the javascript code.
You need to define your jsonpcallback in order to tinker with the return value of the request.
See:
jsonpCallback function not working
http://api.jquery.com/jquery.ajax/

Jquery unable to get the response from WCF REST service

I have developed WCF rest service and deployed it on a link that can be accessed via the browser because its action is "GET".
I want to get that data using jQuery. I tried my best to get WCf get response using jQuery
but in vain. I also tried $.Ajax with 'jsonp' with no luck. Can any one help me?
The url is: http://www.lonestarus.com/AndroidApp/AndroidLocation.svc/RestService/getLatestLocation
You can check that url response by pasting url in browser.
You need to set Access-Control-Allow-Origin to value [*] in your response header.
this blog gives the more details how it can be done in WCF REST service
if you were to do this in Web API you could have just added
Response.Headers.Add("Access-Control-Allow-Origin", "*")
calling the service using a fiddle
$(function() {
$.ajax({
url: "http://www.lonestarus.com/AndroidApp/AndroidLocation.svc/RestService/getLatestLocation",
datatype: 'json',
type : 'get',
success: function(data) {
debugger;
var obj = data;
}
});
})​;​
I got the error
XMLHttpRequest cannot load
http://www.lonestarus.com/AndroidApp/AndroidLocation.svc/RestService/getLatestLocation.
Origin http://fiddle.jshell.net is not allowed by
Access-Control-Allow-Origin.
I can't make a cross domain example to show you but
$('#a').load('http://www.lonestarus.com/AndroidApp/AndroidLocation.svc/RestService/getLatestLocation​​​​​​​​​​​​​​​​​?callback=run');​
would work had those things been set.
Your service needs to either enable JSONP callbacks or set the Access-Control-Allow-Origin header for cross domain requests to work, or you need to run the script from the same domain. Given that your url says AndroidApp I'm thinking you want cross domain.
Sample code below:
$.ajax
(
{
type: 'GET',
url: http://www.lonestarus.com/AndroidApp/AndroidLocation.svc/RestService/getLatestLocation,
cache: false,
async: true,
dataType: 'json',
success: function (response, type, xhr)
{
window.alert(response);
},
error: function (xhr)
{
window.alert('error: ' + xhr.statusText);
}
}
);

How can I use make HTTP calls to an API in Javascript?

How can I use public APIs in a Javascript application? For example I want to make a call to the Zillow API using JQuery AJAX.
When issuing the request in JQuery AJAX (shown below) I get the following error:
XMLHttpRequest cannot load "MY HTTP REQUEST URL". Origin "MY WEB DOMAIN" is not allowed by Access-Control-Allow-Origin.
var requesturl = "http://www.zillow.com/webservice/GetRegionChildren.htm?zws-id="+zwsid+"&state="+state+"&city="+city+"&childtype=neighborhood";
Code:
var jqxhr = $.ajax({
url: requesturl
})
.done(function(data) {
console.log(data);
});
I've also tried adding crossDomain, dataType and headers params (shown below), but they haven't helped.
var jqxhr = $.ajax({
url: requesturl,
crossDomain: true,
dataType: 'xml',
headers: { 'Access-Control-Allow-Origin': '*' },
beforeSend: setHeader
})
.done(function(data) {
console.log(data);
});
Most popular public API's support JSONP request. Refer API documentation for details.
Cross ajax domain request is restricted. So you will be needing to make JSONP request. Don't worry JQuery will handle most of it.
Sounds like you need to register your url with Zillow, maybe contact them / hunt around on their doc pages. Also jquery has a get method which makes ajax requests even simpler. There's also getJSON if that is the return format.

Categories