Sending data from a browser to a server and back

StackOverflow https://stackoverflow.com/questions/19014257

Question

I am C++ developer and I haven't really followed up on any development related to the web for a very long time. I have this project I would like to implement, really as a goal to sort of catch up on these technologies. My project is this:

  • display some content in a browser (for example the content of a 3D scene using a canvas and WebGL), have a button on the page. When the button is clicked, send the data to the server (the camera position for instance), render the image on the server (using some offline high-quality rendering solution), return the image back to the browswer, and finally, display it in the canvas.

I believe I can fill up the gaps with simple things such as WebGl, canvas and HTML 5. I am familiar with some of these techniques and I can learn. Where I am completely lost is the technology that is used or needed to do things such as sending the data to a server, having them processed there, and sending some result back to the client. Now I have done some research on the Web of course, but the is SO MUCH STUFF out there, that it's just REALLY hard to know in which direction going. They are tons of libraries, APIs, bits of technologies, etc.

I am suspecting I need to use some combination of JavaScript, DOM, HTML5 ... but would appreciate if people having done that before or knowing how this should work, could point me to the right direction. I am really looking for something basic, and IF possible not using some sort of 3rd party APIs. I don't want to do something complicated just simple, send data, process, send back for display. My goal is to understand the principles, not to make something professional or super powerful. I am doing this with an educational goal in mind (to learn and understand).

I read about RESTFul but I am still unsure if this is what I need. Really if someone can either simply describes me the basic technology components that I need for this project, point me to documents, tutorials, examples, give me the name for the bits and pieces of technologies I should read about, it would be greatly appreciated.

I realize the scope of this question is very large (and that I should have done my home work before instead of having years now of knowledge to catch up on). I believe though this question can be of great interest to many. And I also promise that I will post my findings and why not my working example when I have one figured out and working.

Thank you.

Was it helpful?

Solution

NOT AN ANSWER, just suggestions/ideas that include code. A structured/formatted comment.

Unsure how to use/code them in C++, but this is just an issue of rendering HTML and implementing javascript code.

The essentials are:

Have jQuery lib loaded. One way is:

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

Use a javascript code block for your jQuery script:

<script type="text/javascript">
    $(document).ready(function() {

        $('#mybutton').click(function() {
            var pic = $('image_selector').val();
            $.ajax({
                type: "POST",
                url: "ind.php",
                data: "img=" + pic
            })
            .done(function(recd) {
                $('#txtHint').html(recd);
            });
        }); //END mybutton click

    }); //END document.ready
</script>

I don't know how you would send a pic as a var, or how to structure that, but you get the basic gist...

On the server side, it works like this (using PHP for eg):

<?php
    $image = $_POST['img'];

    //Do something with the received image

Actually, now that I'm thinking about it, you are sending an image (something I haven't done before), so I don't think you can just send it like text or a JSON object... You may need to post it with the enctype='multipart/form-data attribute for file uploads, as you do when using a form for uploads? Just guessing.

Anyway, this is not intended to answer your question, just to give you some hints as to where to look further.

See these simplistic examples for the basics of AJAX:

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top