How far can I go with JavaScript?

Question

I need to do as much as possible on the client side. In more details, I would like to use JavaScript to code an interface (which displays information to the user and which accepts and processes response from the user). I would like to use the web serve just to take a date file from there and then to send a modified data file back. In this respect I would like to know if the following is possible in JavaScript:

1. Can JavaScript read content of a external web page? In other words, on my local machine I run JavaScript which reads content of a given web page.

2. Can JavaScript process values filled in a HTML form? In other words, I use HTML and JavaScript to generate an HTML form. User is supposed to fill in the form and press a "Submit" button. Then data should be sent to the original HTML file (not to a web server). Then this data should be processed by JavaScript.

3. In the very end JavaScript will generate a local data-file and I want to send this file to a PHP web server. Can I do it with JavaScript?

4. Can I initiate an execution of a local program from JavaScript. To be more specific, the local program is written in Python.

I will appreciate any comments and answers.

Answer 1

1. It could technically, but can't in reality due to the same origin policy. This applies to both reading and writing external content. The best you can do is load an iframe with a different domain's page in it - but you can't access it programmatically. You can work around this in IE, see Andy E's answer.

2. Yes for the first part, mmmm not really for the second part - you can submit a form to a HTML page and read GET arguments using Javascript, but it's very limited (recommended maximum size of data around 1024 bytes). You should probably have all the intelligence on one page.

3. You can generate a file locally for the user to download using Downloadify. Generating a file and uploading it to a server won't be possible without user interaction. Generating data and sending it to a server as POST data should be possible, though.

4. This is very, very difficult. Due to security restrictions, in most browsers, it's mostly not possible without installing an extension or similar. Your best bet might be Internet Explorer's proprietary scripting languages (WScript, VBScript) in conjuction with the "security zones" model but I doubt whether the execution of local files is possible even there nowadays.

Answer 2

Using Internet Explorer with a local file, you can do some of what you're trying to do:

1. It's true that pages are limited by the same origin policy (see Pekka's link). But this can be worked around in IE using the WinHttpRequest COM interface.

2. As Pekka mentioned, the best you can manage is GET requests (using window.location.search). POST request variables are completely unobtainable.

3. You can use the COM interface for FileSystemObject to read & write local text files.

4. You can use the WScript.Shell interface's Exec method to execute a local program.

So just about everything you asked is attainable, if you're willing to use Internet Explorer. The COM interfaces will require explicit permission to run (a la the yellow alert bar that appears). You could also look at creating a Windows Desktop Gadget (Vista or Win 7) or a HTML Application (HTA) to achieve your goal.

Failing all that, turn your computer into a real server using XAMPP and write your pages in PHP.

Answer 3

You may go as far as your heart lets you!

Answer 4

see i got what you want to do best things is do following

1. choose a javascript library (eg:jquery,dojo,yui etc), i use jquery.this will decrease some of your load
2. inspite of saving forms data in in a local file, store them in local variables process them and send them to server (for further processing like adding/updating database etc) using XMLHttp request, and when webservice returns data process that data and update dom.

i am showing you a sample

--this is dom

Name:<input type='text' id='name' />

<a href='javascript:void(0)' onClick='submit()'>Submit Form</a>
<br>
<div id='target'></div>

--this is js
function submit()
{
var _name=$('#name').val();// collect text box's data
//now validate it or do any thing you want

callWebservice(_name,_suc,_err);
//above call service fn has to be created by you where you send this data
//this function automatically do xmlHttprequest etc for you
//you have to create it ur self 
}

//call this fn when data is sucessfully returned from server
function _suc(data)
{
//webservice has returned data sucessefully 
//data= data from server, may be in this case= "Hello user Name"; (name = filled in input box);
//update this data in target div(manipulate dom with new data);
$('#target').html(data);
}
function _err()
{
//call this fn when error occurs on server
}

// in reality most of the work is done using json. i have shown u the basic idea of how to use js to manipulate dom and call servcies and do rest things. this way we avoid page-reloads and new data is visible to viewer

Answer 5

I would answer saying there's a lot you can do, but then in the comment to the OP, you say

"I would like to program a group game."

And so, my answer becomes only do on the client side what you are able and willing to double check on the server side. Never Trust the Client!

And I do not want to do my job twice.

If you are going to do things on the client side, you will have to do it twice, or else be subject to rampant cheating.

Answer 6

We had the same question when we started our project.
In the end we moved everything we could on the JS side. Here's our stack:

The backend receives and send JSON data exclusively.
We use Erlang, but Python would be the same. It handles the authentication/security and the storage.

The frontend, is in HTML+CSS for visual elements and JS for the logic.
A JS template engine converts the JSON into HTML. We've built PURE, but there are plenty of others available. MVC can be an overkill on the browser side, but IMO using a template engine is the least separation you can do.

The response time is amazing. Once the page and the JS/CSS are loaded(fresh or from the cache), only the data cross the network for each request.