use google weather api with mootools - javascript

I am currently having difficulty using the Google weather API in JavaScript using Mootools.
I am using code like this:
var location = $('weather-location').value;
var req = new Request({
url: 'http://www.google.com/ig/api?weather=' + location,
method: 'get',
onSuccess: function(responseText, responseXML)
{
responseXML.getElements('forecast_information').each(function(item)
{
item.getElements('city').each(function(city_data)
{
$('placename').set('html','Weather for ' + city_data.get('data'));
});
});
}
}).send();
This code results in a browser error which is reported in Firebug as:
"NetworkError: 405 Method Not Allowed - http://www.google.com/ig/api?weather=72601&location=72601"
From what I can gather (I am rather new at this), this problem is caused by cross-domain access violation.
I have tried:
1) using 'post' instead of 'get' for method... similar result
2) using Request.HTML and Request.JSON instead of Request... similar result
3) using Request.JSONP ...different error (document formatting I think). I suspect this is because the google weather API returns straight XML and isn't set up to serve JSONP.
4) using YQL instead of a straight url to google (sample URL: http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D"http%3A%2F%2Fwww.google.com%2Fig%2Fapi%3Fweather%3DDenver%2520CO") ... this did not have an error but returned no results either (URL does work if typed into address of browser).
The only way I have been able to get this to work is to pull the weather XML server-side and serve it to the browser via a proxy. However, I am would like to accomplish this without burdening my server.
How can this be done?

It is a cross-domain issue. Stick to the solution you have (proxy). The browser is not allowed to do a request to 'google.com' when the actual page is located at 'yourdomain.com'.

Related

Uncaught SyntaxError: Unexpected token < using Jsonp

Problem:
Uncaught SyntaxError: Unexpected token <
What I tried
Request: Jsonp
Response: returned XML Response 200.
Cross Domain Request that's why used data type: jsonp
Script code:
$.ajax({
url: "some url",
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
type: "POST", /* or type:"GET" or type:"PUT" */
data:myusername,
crossDomain: true,
dataType: 'jsonp',
data: {
'name':myusername
},
success: function (result) {
console.log(result);
},
error: function () {
console.log("error");
}
//});
});
Here AJAX response is XML.
But can someone tell how can I solved unexpected token problem.
Response is XML.
solution i found is third party request
var urljson='cross-damin-url';
var yql = 'http://query.yahooapis.com/v1/public/yql?q=' +
encodeURIComponent('select * from xml where url="' + urljson + '"') +
'&format=xml&callback=?';
$.getJSON(yql, function (data) {
console.log(data.results[0]);
});
Any suggestion is most welcome.
the problem is the line "dataType: 'jsonp'". Setting it this way the ajax call expect the result to be a jsonp (a json object wrapped as a params in a callback...) this is useful if you're doing a cross domain call (due to CORS). You have to set a "dataType: 'xml'"
Edit
considering the you have to do a CORS call, you have to change the output of the api, at least making something like
callbackName({value:'<your><xml>...</xml></your>'})
and parsing the xml from the string
"callbackName" is the name of a function or method declared in the page which make the ajax call and which will parse the json from the api... for instance something like:
function callbackName(result) {
console.log($.parseXML(result.value));
}
JSON and XML are arbitrarily nested data-interchange formats. You take a (well-formed) string and convert it to a data structure based on the rules of the format. Their similarities stop there.
So you can't just parse XML as JSON, they have different rules for turning a string (like that returned by an HTTP request) into a data structure. Which is why you're getting an error.
Parsing XML with an XML parser (like the one built into every browser) instead of a JSON parser will not throw an error.
But your actual problem is that it's a cross-domain resource and the browser (for good reason) won't let you. If you need a cross-domain resource and you don't control it and it doesn't have a CORS header you have a few options:
Beg the entity that controls the resource to add a CORS Header
Pipe the resource through your domain.
To expand on option 2:
Your page requests the resource from your webserver, your webserver makes an http request to the cross-origin resource, and then sends the result back to the browser.
About JSONP
JSONP was a hack invented before CORS to bypass the browser's security model. It was (meant) to be used by people who understood the risks, knew what they were doing and why. It involves potentially executing arbitrary third-party code on your page. Needless to say, that's bad.

Getting a parseerror from jQuery $.ajax post return using jsonp from Trakt.tv api

Working with the Trakt.tv API. It looks like I'm sending valid json as I'm able to authenticate but the return I receive is a parse error.
Resource interpreted as Script but transferred with MIME type text/html:
http://api.trakt.tv/recommendations/shows/myApiKeyCompleteNumbers?callback=jQuery111000155555475132972_1397674204444&{%22username%22:%22userName%22,%22password%22:%22mySha1PassComplete%22}&_=1397674207093
Uncaught SyntaxError: Unexpected identifier
The return says:
Disallowed Key Characters.
I'm using:
jQuery 1.11.0
Thanks in advance for any help or guidance
$(document).ready(function () {
function success(data) {
alert('data: ' + data);
}
var traktUser = 'myUserName';
var traktHash = 'mySha1Password';
var traktApi = 'myApiKey';
var data = {
'username': traktUser,
'password': traktHash
};
var postData = JSON.stringify(data);
var apiUrl = 'http://api.trakt.tv/recommendations/shows/' + traktApi;
$.ajax({
type: 'POST',
url: apiUrl,
data: postData,
contentType: 'application/json',
dataType: 'jsonp',
}).
done(success);
}); //document ready
You can't make a POST request using JSONP, jQuery is ignoring the POST instruction and making a GET request.
Your data is being placed in the query string and is not properly URL Encoded.
The server is responding with an HTML document containing an error message instead of a JavaScript script formatted according to JSONP rules.
It looks like the API you are trying to use does not support JSONP at all. Since you are passing your own user credentials in the request, this makes sense. JSONP is a hack to work around the Same Origin Policy that is implemented by browsers (these days we can use CORS instead) and there is no point in using it unless you want end user browsers to access the API directly. Since end user browsers couldn't access it without being given your username and password, it doesn't seem likely to be intended to be used that way.
Process the data from the API on your server instead.

Cross-Domain AJAX to Read XML

Noobie here. I'm writing a client script that needs to read an XML file from another domain. I tried using JSONP. I get a 200 response but the client can't access the returned data for some reason. I get two errors:
Resource interpreted as Script but transferred with MIME type text/xml
and
Uncaught SyntaxError: Unexpected token <
Here's the code (I've removed the XML url since it's confidential):
$(document).ready(function() {
$.getJSON("urlOfFilecallback=?", function(data) {
console.log(data)
})
});
When I try to render the data in the console I get:
ReferenceError: data is not defined
How can I fix this? Do I need to use a proxy?
You don't have to write your own proxy. You can use YQL if you want to here is an example how:
//sample site that returns xml
site = 'http://goo.gl/9iQWyG';
var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from xml where url="' + site + '"') + '&format=xml&callback=?';
// Request that YSQL string, and run a callback function.
// Pass a defined function to prevent cache-busting.
$.getJSON(yql, function(data){
console.log(data.results[0]);
});
here is the jsfiddle check console.log.
(Usage limits of the public YQL API is 2,000 requests/hour per IP)
XML is not allowed for cross-domain requests by default.
However, with a little server-side programming you can create a proxy and load the data within your own domain, and output it as XML.
for more information see this Question
If you have access to the other domain side, you could also use this approach Cross Domain Request

How I get respone text in application and bind to the label in cross ajax call

I am calling the web service from other domain using Ajax call and I want to get returned response from server in my application by using following code I get response text in firebug but not in my JavaScript code. Control are not showing success and error response it goes out directly.
I want response in my success or error section but both not handling in this.
I am trying lot but not finding any solution please any one help me.
I am in a trouble. I hope somebody can help me for calling cross domain web service by using Ajax call. I am trying from 1 week but didn't find any solution till. I am getting response on browser but not getting it on my actual code.
My JavaScript code.
crossdomain.async_load_javascript(jquery_path, function () {
$(function () {
crossdomain.ajax({
type: "GET",
url: "http://192.168.15.188/Service/Service.svc/GetMachineInfo?serialNumber="+123,
success: function (txt) {
$('#responseget').html(txt);
alert("hii get");
}
});
crossdomain.ajax({
type: "POST",
url: "http://192.168.15.188/Server/Service.svc/GetEvents/",
// data: "origin=" + escape(origin),
success: function (txt) {
$('#responsepost').html(txt);
alert("hii post");
}
});
});
});
</script>
You can't simply ignore the Same Origin Policy.
There are only three solutions to fetch an answer from a web-service coming from another domain :
do it server-side (on your server)
let the browser think it comes from the same domain by using a proxy on your server
change the web service server, by making it JSONP or (much cleaner today) by adding CORS headers

jQuery POST to webservice via CORS

I have read a lot of topics about CORS & Javascript and about changing the headers in your post but I can't find the right example I am looking for.
So I'm going to first up start with explaining the situation:
I can not change anything to the webserver since this is out of my reach (It's a SAP Cloud Portal)
I can only change the POST code, so I can only control what I send.
The problem I have is described in the following Post:
jQuery $.ajax(), $.post sending "OPTIONS" as REQUEST_METHOD in Firefox
--> My FF & Chrome Headers send a METHOD OPTIONS instead of METHOD POST.
I have written example code that works in IE but not in FF & Chrome:
var dataString = "<result><firstname>example</firstname><lastname>ThisIsSparta</lastname></result>";
var urlString = "http://delyo001.you.local:8000/sap/bc/youconsulting/ws/rest/anonymous/z_names_post";
//Add TO SAP.
var aData =
jQuery.ajax({
type: "POST",
contentType: "application/xml",
url: urlString, // for different servers cross-domain restrictions need to be handled
data: dataString,
dataType: "text",
success: function(xml) { // callback called when data is received
//oModel.setData(data); // fill the received data into the JSONModel
alert("success to post");
},
error: function(xml) { // callback called when data is received
//oModel.setData(data); // fill the received data into the JSONModel
alert("fail to post");
}
});
});
Or
var invocation = new XMLHttpRequest();
var url = 'http://delyo001.you.local:8000/sap/bc/youconsulting/ws/rest/anonymous/z_names_post';
var body = '<result><firstname>perthyrtyrtygop</firstname><lastname>sparta</lastname></result>';
invocation.open('POST', url, true);
invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
invocation.setRequestHeader('Content-Type', 'application/xml');
invocation.send(body);
I have found 2 ways to fix this but without any examples:
- do something with a proxy?
- send specific headers
More information about my problem can be found at:
- http://scn.sap.com/message/13697625#13697625
If you can't set the right headers on the server-side and you can't modify the response for jsonP you should indeed use a proxy.
A proxy script is a sort of middleware. You make a request to the script the script gets the data, and returns it to you. For example php proxy. You can make the same thing in asp, jsp, flash or even java applet.
Now you have your SAP service, a proxy (php)file in a your prefered location, and your local javascript in the same domain as the proxy. You don't even need CORS.
If you want to put the proxy in another domain you have to make sure the php file sends the right headers. (Access-Control-Allow-Origin yourdomain or Access-Control-Allow-Origin * for allow all)

Categories

Resources