JavaScript Get Data From Other Site - javascript

I'm fairly new to JS and have a question. Would it be possible to pull data off from another website to use in your own? For example, say I have a JS web app that lets a user input their Twitter username and then the script goes to this username and looks for the follower count element and pulls that number off to display back in the web app. I'm sure there are APIs and such to do something like that specific Twitter example, but I'm getting more at the general idea of being able to access data on other sites. How can it be done? Surely there is a way if my browser can access all of that information, right? Would you have to put an invisible iFrame into the app and search through it with JS?

To put it in basic terms for a newbie, this is only possible if the website in question has an API, specifically designed to allow outside access. Sometimes they're pretty easy to understand and set up.
Accessing the content of an outside website in a way it wasn't really designed to support has happened, but it's usually what's known as "hacking". It's sometimes easy to do for very basic types of sites, but most sites that request login information forbid it. (Except through aforementioned APIs). The biggest concern is that if someone is already logged in to Twitter on their browser, an outside site of questionable origin could automatically post bad things to your account while you're not even apparently visiting Twitter.

Yes, it's possible.
The best approach is to use ajax (Asynchronous JavaScript and XML) with jsonp (Javascript Object Notation with Padding) datatype.
To use this method the server you are going to connect should be expecting the request so it can response with jsonp (it's just a json data wrapped by a callback function you defined when you make the request).
The process:
1) Your code make an ajax request to the other server adding a callback function to the url. It's very commom to use "callback" param name, but the server can define the variable name it prefers.
http://other-server-url.com/?callback=myFunction
A good and easy approach here is to use jQuery. If you define dataType:"jsonp" in your ajax call, jQuery handles the process of appending the callback and execute the right function when you get the response. It's a good idea to take a look at jQuery's ajax docs and read a little about jsonp cross domain requests.
$.ajax({
type: "POST",
dataType:"jsonp",
url: "http://other-server.com/",
data: { name: "John", location: "Boston" }
}).done(function( msg ) { // this function will be executed when you get the response
alert( "Data Saved: " + msg );
});
this jQuery method only works if the param name is callback. If it isn't, you should handle by your own, or take a deeper look at documentation to know how to do it with jQuery.
2) The server should be waiting for these "callback" param and response your request with a jsonp data format. It's just json data format wrapped by the function you passed as the callback. Like this:
myFunction({ json-data });
3) When you get the response, the myFunction function will be executed automatically, with the json data as the parameter:
function myFunction(myData) {
console.log(myData); // this will log the data on the browser console
}
I hope I have helped. Good coding.

Related

Can I use jquery and AJAX to call a cgi-bin script, then add message event to handle Server Sent Event?

What I have is a long running cgi-bin program (runs for 3-15 minutes) that I want to call using AJAX. While its running, I'd like to receive Server Sent Event data from it and display it on my web page. Kinda like a progress monitor - but more like a chat window that is updated automatically as the script runs.
Here's how I'm calling the script:
var Params = []; // a large array containing values... not shown.
$.ajax({
type: "POST",
url: 'cgi-bin/datagen.cgi',
data: { "id:: 1, "params": Params },
dataType: "json",
success: function( db ){ console.log( "done" ); }
});
I like the ease of using $.ajax(... to POST a lot of json data to a script, but I don't see a way to switch to Server Sent Event messaging to receive (listen) for return data.
Using SSE instead of ajax, I don't see (and can't find an example) of POSTing a lot of data to the script.
I can't (yet) use Websockets either - so SSE is really my only choice.
-AC
Unfortunately, SSE does not support POST data. This is an annoying oversight in the standard; especially given that the browsers typically just implement EventSource as a variation of XMLHttpRequest, which already does allow POST.
One (messy) option is to have your cgi write its progress to a log file, and then write a SSE server script that polls that log file. You'll have two sockets open to the server, one for the ajax call, one for the SSE. Yuk.
The better option is to use the long-poll (also called comet) approach. You need to use the XMLHttpRequest object directly, instead of jQuery's $.ajax(), but it is not so bad. The advantage is that (on most browsers) you get what you want to do for free, as your xhr object is having onreadystatechange() called with all that progress information your back-end script is sending. You can tell the difference between progress information and the final result by looking at xhr.readyState: 3 means it is in progress, 4 means it is done.
Check out chapter 7 of HTML5 Data Push Apps with SSE (O'Reilly) for more explanation (Disclaimer: my book), or you'll find plenty of information on the web. Chapter 9, on authentication, is where I moan about the lack of POST support in SSE, and show how to add workarounds to the application that was built-up in earlier chapters.

MediaWiki: How do I use an AJAX POST in JS to send data to a custom API extension (PHP)?

I've been stumped on this for a while. I've successfully created a MediaWiki API extension from which I'm able to extract data using an API url, but now I want to go the other way. I want to use JS to send a simple bit of data to the server for storage in a session variable (in PHP). I've experimented with something like the following:
$.ajax({
// start POST request
type: "POST",
// url to which the request is sent
url: "/",
// data to the server
data: { myvariable: 0 },
// Type of data
dataType: 'json',
// Funciton to be called if the request succeeds
success: function( data ){
console.log("POST successful with " + data);
}
})
What I don't fundamentally get is how to "pick up" the POSTed data in PHP. In my research, I came upon something saying I should look for $_POST['myvariable'] in PHP. Yet I'm not sure how or where I'd create something that would listen for such a POST from JS. It seems to me the easiest solution to this would be if I could write a method onto my API extension that simply assigns the value of the myvariable that's POSTed to the session variable whenever that thing is POSTed. I've written this method already, in fact, but it's unclear to me how I'd instruct AJAX to invoke it in PHP. I've also read that this type of thing may not be advisable for security reasons.
I've seen advice elsewhere suggesting I should do something in JS like:
var api = new mw.Api();
...and then use the Api object's methods to execute Ajax GET and POST requests. Well, I tried creating an instance of this object, and it throws errors on the console that say it's not a recognized function or something of that nature.
I'm rather new at all this, but I'm at my wit's end trying to figure out something that in theory ought to be very simple. Any suggestions?

JSONP request callback

Ok, after an whole day trying to get this to work I just don't seem to know what's the deal with this, so here it goes:
I have a WebService hosted locally by now (http://localhost:15021/Service1.svc/[whatever_method]) and an HTML Page on a different file.
FYI, both WebService and HTML Page will get hosted on different servers.
I'm trying to get some info off the WebService to the HTML Page by the onload=load() method in the HTML Page.
My JavaScript code is:
function load() {
alert("Loading...");
$.ajax({
url: 'http://localhost:15021/Service1.svc/getAllNoticias',
type:'GET',
dataType: 'jsonp',
jsonp: 'loadNews_callBack'
});
}
function loadNews_callBack(result){
alert(result.data);
}
Additionally, the JSONP is loaded on the Page with an OK (200) status (As you can see here) which should (I guess) call the callback function, but it isn't.
What can I do to get around this? I already change the request parameters 500 times (e.g., added "?callback=? to the url, with or without jsonp attribute, etc...)
Any help would be great,
Thanks in Advance
Check the actual response text to verify that the response is correctly being wrapped by the callback function. It is possible that your service is not setup correctly to handle JSONP so it simply responding with JSON. It will still come back as 200, but fail to execute.
loadNews_callBack([json...])
vs
[json...]
See this question as reference on how to go about updating your service:
ASP.net MVC returning JSONP

Ideas on how to handle a javascript widget?

My friend has a search engine that he wants to have a widget access that can be put on other web pages. If I send a request to the search engine, it returns an XML file. The request would look something like this:
http://www.site.com/page.php?keyword=this+is+a+sample&page=1&num_days=3&source_id=site2.com&source_name=site2&source_url=sampleurl.php
I understand how to access this by using Javascript. However, I know that you can't do a cross-domain request. I would have to have it load a new page at the search engines's site and not in the window at the the site they were located at....right? Any ideas or insight are greatly appreciated.
Here is a good explanation too:
What is JSONP all about?
EDIT:
jsonpString
Override the callback function name in
a jsonp request. This value will be
used instead of callback in the
callback=? part of the query string
in the url. So {jsonp:'onJsonPLoad'}
would result in 'onJsonPLoad=?' passed
to the server.
jsonpCallbackString
Specify the callback function name for
a jsonp request. This value will be
used instead of the random name
automatically generated by jQuery. It
is preferable to let jQuery generate a
unique name as it'll make it easier to
manage the requests and provide
callbacks and error handling. You may
want to specify the callback when you
want to enable better browser caching
of GET requests.
taken from:
http://api.jquery.com/jQuery.ajax/

Synchronous cross sub-domain POST request with jQuery

I'm trying to do a cross domain POST request and have hit a wall (or two).
I can't put a proxy page on the server - so that is not an option.
I have researched getJSON, which works great except that I need to POST not GET.
Is it possible to do this? If it is not, can someone explain to me how getJSON works and why I cannot make a POST alternative.
You CANNOT make a cross-domain request (GET / POST / etc.) with an XMLHttpRequest (aka AJAX).
What you can do, when the server supports it, is make a JSONP request. A JSONP request works as follows:
jQuery creates a globally accessible function out of the callback function you provide as an argument
Instead of using XMLHttpRequest (AJAX) to make the HTTP request, jQuery dynamically inserts a SCRIPT tag into the DOM
The SRC of the script tag is the request URL to which you are trying to communicate
jQuery adds a callback param to the query string like so: example.com/someurl.js?callback=someDynamicallyGeneratedMethodName
It is then up to the SERVER to return JavaScript that your client can use by passing the JSON result as an argument to someDynamicallyGeneratedMethodName
If you have no control of the server that you are posting to, then you are out of luck, JSONP won't do you much good. Whatever the server returns will be in a SCRIPT tag, and will most likely throw an error if it isn't formatted correctly.
For more info on this, I suggest you look at the base $.ajax function instead of the shortcuts. (In the jQuery documentation under Ajax. Sorry I can't post more links)
Again, if you don't have control of the server you are posting to, you might want to look into a proxy if possible. Otherwise, an IFRAME may be your only other option. There is also a method to accomplish this with a SWF (flash) object. I have tried neither, but they are workarounds to the limitations of the XMLHttpRequest object.
Hope I could help!
You can do a post, but what you want is a JSONP request to get around the cross domain issues. Essentially you provide a callback function and the request comes back as script content and your callback gets called with the JSON data from the request. Your server side script will need to provide the data back as a function call using the callback function wrapped around the JSON object.
See the documentation on the post function.
$.post( '/example.com/controller/action?callback=?',
{ param: "data" },
function(data) {
...do something with the data...
}, 'jsonp' );
ASP.NET MVC action for this:
[AcceptVerbs( HttpVerbs.Post )]
public ActionResult Action( string param, string callback )
{
var jsonData = ...do something and construct some data in JSON...
return Content( callback + "(" + jsonData + ");" );
}
If you want to do Cross Domain POST then the easiest solution is the one provided here by Matteo.
It worked great for me

Categories