Bit.ly share textbox functionality

Question

Does anyone have a clue to how bit.ly is replacing the textarea as soon as you finish typing the link?

Answer 1

I think that the OP is asking how bit.ly converts the long URL into a shorter URL without reloading the page. This would be done with an AJAX call to a web page, that has a script running on it.

Here is my attempt getting a similar effect on a form submit, I don't know what aspect is what you are most interested in.

<script type="text/javascript">
document.getElementById('formElement').onsubmit = "return requestURL();";
function requestURL() {
    var data = document.getElementById('formInputData').value; // get value from <input type="text" id="formInputData />
    if (window.XMLHttpRequest) {
        var request=new XMLHttpRequest(); // code for IE7+, Firefox, Chrome, Opera, Safari
    }
    else {
        var request=new ActiveXObject("Microsoft.XMLHTTP"); // code for IE6, IE5
    }
    request.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        // if the request worked, output the data the server returned (PHP, .net, etc.)
        document.getElementById('serveroutput').innerHTML = result.responseText;
    }
    request.open("GET", "serverscript.ext?data="+data, "true"); // Setup the server request
    request.send(); // Send the request to the server
    return false; // Stops the form from submitting normally
}
</script>

This example has no security, style, or other special stuff, but might give a better idea.
JSON or similar methods are probably used to get data back to JavaScript, which then styles and displays the data. I can't give specifics of what bit.ly uses, but this is the idea I would use if I tried a similar JavaScript solution.

How did I answer the question? Did I answer something completely different? Should I expand on the answer? Do I ask too many questions? (Yes to the last question)

---

In response to a comment upon pressing the space bar, that functionality can be added to the above code with the following function.

<script type="text/javascript">
    document.getElementById('formInputData').onkeypress = function() {
        if(document.getElementById('formInputData').value.split('')[-1] === " ") {
            document.getElementById('formInputData').value = document.getElementById('formInputData').value.substring(0, str.length - 1);
            requestURL();
        }
    }
</script>