Java Script reading response of an URL into variable - javascript

I'm a java script newbie and I'm wonder how I can read the response from a URL into a variable.
Example:
Reading the weather information from NOAA into a java script variable.
var = http://weather.noaa.gov/pub/data/observations/metar/stations/EDDB.TXT

"AJAX" is the technique to load data from a URL. jQuery makes AJAX easier (though you don't have to use it):
$.get('http://weather.noaa.gov/pub/data/observations/metar/stations/EDDB.TXT', function(data) {
// Do stuff with data here
});
Unfortunately, this probably won't work. Unless the web site you're downloading from does something special to allow it, which is not typical (look up CORS), you cannot use AJAX to load data from a different domain because the web browser will block it. For example, if your site is example.com, you cannot download from weather.noaa.gov.
An alternative would be to have server-side code in your web site that would download the content from the URL, acting as a proxy for that web site. Then your web page would download from your own server instead.
$.get('http://example.com/weatherStationData.php', function(data) {
// Do stuff with data here
});

Related

Electron - download .zip file using ajax?

I'm trying to build an Electron-based app, mostly using code from my existing web app. The electron version connects to my server and often relies on that online content. I am using Ajax requests (using Jquery) handle things like the user logging on, and a php session is created, which is required to access most of the content.
I am now trying to get Javascript to automatically download a .zip file and save it to a location, without the user doing anything. I failed to do this using an Ajax request, so have tried to use the Node.js 'request' module. Then however, it wouldn't download the file because it was not authorised (because the request creates a new session, different to the existing, logged-in one).
How can I get something like the following to work?
const fs = require("fs");
...
$.ajax({
url: "my-server/file.zip",
success: function (data) {
fs.writeFile("local-file.zip", data);
}
});
Note - I think it failed due to some issue with the way the downloaded data is encoded, but don't understand exactly what the problem was.
Alternatively, is it possible to use the existing ajax session in the request module, and download it that way?

Providing JS or iframe like analytics and statcounter to other webpage to run remotely my PHP + JS script

How to not copy my source code to other servers and provide them with a JS or iframe like the analytics and statcounter provide us?
I wrote a PHP script with JS that in it's basic description goes like this:
When someone visits my website, gets a cookie with a value of a unique identification and at the same time using AJAX I make some checks and I save that same value to mysql accordingly. After this, if he visits again my site, (in most of the cases) a cookie is not created again.
In depth:
The cookie value is created with JS and I want to keep it that way for future enhancements.
My code (index.php, add-to-mysql.php) has JS and PHP.
I want to use this script in my additional domains, and some of them are in different server. But I don't want to put all my source files to there accounts.
The ideal for me is to provide them with a JS code, like the google analytics or statcounter give us (or alternative similar ways), an iframe... solutions like these.
When a visitor gets into their page, my mySQL in a remote server (my server) will be updated and a cookie will created on their site. Transferring data from and to.
Is this something possible to be made? If yes, how can I start studying for this? Can you provide me with some guidelines?
Thank you.
this is a block of code, the ajax function that posts the random number to the add-to-mysql.php file where i make some actions
$.ajax({
type: 'POST',
url: 'add-to-mysql.php',
data: { one: hash }, //an antikatastiso to hash me to a ke kano to md5 meso php sto ajax vgenei to idio
success: function(data) {
alert("success! X: " + data);
}
});
It seems to me you have three options here.
1. Use JSONP
JSONP allows you to do cross domain ajax calls so that you can just call in to your home server from your other domains without being obstructed.
This is probably the easiest route to go I'm thinking.
See here for a quick write up on how JSONP works:
https://stackoverflow.com/a/2067584/867294
jQuery supports jsonp so it's not to difficult to get started with:
http://learn.jquery.com/ajax/working-with-jsonp/
JSONP works by dynamically adding a script to the document that then calls a callback.
The contents of ths javascript file need to be generated by the server, your PHP file add-to-mysql.php will have to echo out something like this:
<?= htmlspecialchars($_GET["callback"]) =>('someData you want to return');
You can access the one: parameter that was passed in from jQuery trough the $_GET array as well, as this is just a GET request.
From the client side you can call this route like so:
Note that this will always be a GET request, all parameters will go trough the URL.
The 'callback' parameter is the connecting factor here, it makes sure the PHP side knows what JavaScript function to generate.
$.ajax({
jsonp: 'callback',
dataType: "jsonp",
url: 'http://my-server.com/add-to-mysql.php',
data: { one: hash }, //an antikatastiso to hash me to a ke kano to md5 meso php sto ajax vgenei to idio
success: function(data) {
alert("success! X: " + data);
}
});
2. Use CORS
CORS will allow you to make ajax calls to a different domain then the one where your JS is running. This does however require you to send special http headers from the serving html page, so this does require you to modify the servers.
See here for a qucik intro on CORS:
http://www.html5rocks.com/en/tutorials/cors/
In short, the headers you will need to set from the serving html page are:
Access-Control-Allow-Origin: http://domain.com
Access-Control-Expose-Headers: list,of,headers
3. Posting to an iFrame
Posting trough a hidden iFrame is also an option.
For this you need to set the target of a form to the name of the iframe, the advantages here is that you can use POST as well. You can submit and populate the form trough jQuery as well.
$('#one_input').val('someHash');
$('#myForm').submit();
You can just put everything in a hidden div if you don't want to show it on the page:
<div style='display:none;'>
<form id="myForm" action="http://my-server.com/add-to-mysql.php" method="post" target="my_iframe">
<input type="input" id="one_input" value="" />
</form>
<iframe name="my_iframe" ></iframe>
</div>
You could also just set the url of the iframe with your parameter if you don't need any feedback.
var hash = 'stuff';
document.getElementId('one_input').src="http://my-server.com/add-to-mysql.php?one=" + hash;
Extra
you could also use the iframe with Window.postMessage
Building on the previous example:
$('#my_iframe')[0].contentWindow.postMessage('hash', 'my-server.com');
But this requires you to have already a page loaded in your iframe that will then receive the message trough JavaScript, so I don't think this is what you are looking for.
Google Analytics provide an script that doesn't post data, it loads an script asynchronously (this is very important to avoid messing with load times of the original website), then it sends all of their info requesting for a .gif image. Your code should do a request to an url ending in .gif, with all the data in GET form. Do your magic and return a gif with size 1px*1px and no content.
Just request something like this
yourdomain.com/a.gif?cookie=1234aqfajsdlq....&uid=qekjlajdfa
Put all your data in there
I recommend obfuscating it a bit, but that should help you avoid cors, iframes or jsop
EDIT
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'id', 'domain');
ga('send', 'pageview');
</script>
This was taken from GA. See that it creates a tag, with the async attribute to avoid load time issues (remember sync scripts stop the page rendering). Then it creates and array where it pushes all the info it needs in tuples. It defines ga in the window as a function that pushes all its arguments to a q.
The you can create an script that takes all of the data you need, with js, cookies, domain, etc. and send to the server.
For example, you want the domain that the user is visiting:
//You won't have jquery, but you get the idea
//Create a tag
var i = $('<img>').prop('src', 'yourdomain.com/a.gif?domain' + window.location.origin).css('display', 'none');
$('body').append(i);
In some point you will have to set a cookie. I thing cookies can't not be cross domain, so you should set them in your requests not in js.
On the server side you check the cookie, if there is none, you created, and there you can track many things.
Afterwards, your script can check for cors support, and use ajax without this. I don't recommend JSONP, is very error prone, and is actually kind of a hack
In order to avoid the cross-domain problematic you can include an iframe at the other sites, that loads from your site. It creates its own scope (domain) and you can freely use ajax from inside communicating with your site.
However, if you set cookies there, it will be associated to the iframes source domain (your domain). This might or might not be a problem. Note, that this can be used to identify users across all the other domains including this same iframe (from your domain).

jQuery Ajax get error No Transport with a status 0

I am doing a jquery.ajax() call on one of our pages to fetch a small text file. I see some of the requests (not all) fail with resp.statusText: "No Transport" and resp.status : 0
What does the error mean (No Transport with a resp code of 0). Strangely it works on some browsers, and doesn't work on some. I couldn't find a patter by looking at the user agents of browsers, where it failed.
Any help would be highly appreciated. I am a beginner to javascript and jquery library, let me know if I omitted crucial information.
My use case:
abc.mydomain.com contains jquery.ajax(url:xyz.mydomain.com) call
Most likely it prevents you from firing a request because it things you are trying to access another domain. xyz.mydomain.com !== mydomain.com.
Why that is not allowed?
Read
Use a Web Proxy for Cross-Domain XMLHttpRequest Calls
Why the cross-domain Ajax is a security concern?
An example to why this is a security issue, assume you installed a bad plugin to your browser. If that plugin got the permission, it can read all loaded files to your browser and be able to edit/change/inject content and codes. Then it might send all collected data to designer own server.
... The most common business needs that are easily accomplished with browser plug-ins are: modify default search, add side frames, inject new content into existing webpage ...more
A good practice is to fetch the data thru ajax via JSON, if you are trying to access another site beside the one the script is calling from, then use JSON-P.
Read
JSON-P
JSON-P call to subdomain
Chrome ajax call to subdomain
A common architecture is to call the current domain that the script is loaded from, then use server script to fetch data from the other domain where the other domain will response to the request and return the data.
A code snippets of your function will help us understand your issue more.

.ajax load remote page content to javascript var

I want to get a short string hosted on a server where I do not have access to the data as XML, JSON, etc. I am trying to use either .load or .ajax to do this. I want to be able to parse the data into a javascipt array. The entire contents of the remote page is text and I am happy to take all of it and remove what I do not need via a small javascript. I have tried:
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"http://url:8888/data", success:function(result){
$("div").html(result);
}});
});});
</script>
I have two questions.
1- why does this not work?
2- What would be the best way to store the string in a javascript var?
I am sure JQuery is working correctly.
The answer would be to long to post here (really). But look those up:
Same Origin Policy
Padded JSON
If you have no control over the remote site, you have lost - you will not get any data from it by Ajax (which is actually a feature, not a limitation of the technology). One way of circumventing the protection would be to build a proxy that just mirrors the remote service you need to reach and makes it available in the same domain that your main HTML came from.

Need Help With Getting Cross Domain XML With JavaScript

Alright, so I'm building a web app that provides music information (i.e. info on artists, albums, songs, etc.) and for the info source I'm using the MusicBrainz API.
Now, I'm trying to load the data from an API call and process it, with jQuery. This is the code I'm using:
Code:
queryString="http://musicbrainz.org/ws/1/artist/?type=xml&name="+qry+"&limit=10";
$.ajax({url: queryString, dataType: ($.browser.msie) ? "text" : "xml", success: function(data){
alert("success");
var xml;
if (typeof data == "string") {
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.loadXML(data);
} else {
xml = data;
};
...
With 'queryString' being the URL string for the request, and then I'd proceed to read the data out of the 'xml' object. Fairly simple.
However, this is where problems arise. The code works flawlessly when running locally on my computer, but does not work at all when I upload everything to my web server and try to run it there. I did some reading and have discovered that AJAX calls can't be made across different domains, due to security issues.
So I've read through numerous solutions, but almost all require either something with PHP (which I have absolutely NO knowledge of) or grabbing the data in JSON format (which apparently isn't subject to the same security restrictions). However, my main problem is that the MusicBrainz API does not return data in JSON format (in fact the only format it returns is XML).
So in any event, I was basically just wondering if anyone could give me some help or pointers on if and how I could grab that remote XML file using only JS/jQuery. Or, point me toward another method that could be accomplished by a complete PHP noob like myself.
Thanks for any help!
You require something on your server side to proxy your request to that other server. A URL that looks like:
/proxy?url=http%3A//musicbrainz.org/ws/1/artist/%3Ftype%3Dxml%26name%3Dexample%26limit%3D10
If PHP is available on your server, you can Google to find a generic PHP proxy script.
EDIT Here is an example of very simple PHP script that will retrieve a specified URL:
<?php readfile($_GET['url']) ?>
Note that you won't be able to POST any data to it, or specify a Content-Type. This is the most basic proxy required for very basic needs.
I understand that JSON is not an option right now but still, here is the explanation of why it can work for cross domain requests.
JSON being Javascript, it can be queried using the <script> tag instead of XMLHttpRequest. Since the <script> tag does not have the same restriction for cross domain request, it is possible to retrieve the JSON content this way.
This technique is called JSONP and is implemented in jQuery in the getJSON function.
If you don't want to setup your own proxy server, check out my response here: use jsonp to get xml cross domain

Categories