Basic examples of XMLHttpRequest - GET

There are two forms of invoking a XMLHttpRequest, by using one of event handlers handlers pairs:

  • onreadystatechange + onerror
  • onload + onerror

  • GET request

    Html

    <div id="info1"></div>
    <button id="send1" type="button" class="">send1</button>
    
    

    Javascript

    function message1(msg){
        document.getElementById('info1').innerHTML = msg;
    }
    
    
    
    
    function getXHR(){
        var xhr = false;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else { //code for IE6, IE5
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xhr;
    }
    
    
    xhr1 = getXHR();
    if(!xhr1) message1("Ajax is not supported by your browser!");
    
    xhr1.onload = function() {
        if (xhr1.status === 200){
            message1(xhr1.responseText);
        }
        else{
            message1("Error " + xhr1.status);
        }
    }
    
    
    
    
    
    
    
    xhr1.onerror = function() {
        message1("Error: No response from server.");
    }
    
    var url = "answer_me/that/";
    var params = "?question=To be or not to be?";
    
    xhr1.open('GET', url+params);
    
    var send1 = document.getElementById("send1");
    send1.onclick = function(){
       xhr1.send(null);
    }
    
    

    Html

    <div id="info2"></div>
    <div id="state2"></div>
    <button id="send2" type="button" class="">send2</button>
    

    Javascript

    function message2(msg){
        document.getElementById('info2').innerHTML = msg;
    }
    function state2(msg){
        document.getElementById('state2').innerHTML = msg;
    }
    
    function getXHR(){
        var xhr = false;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else { //code for IE6, IE5
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xhr;
    }
    
    
    xhr2 = getXHR();
    if(!xhr2) message2("Ajax is not supported by your browser!");
    
    xhr2.onreadystatechange = function () {
        if (xhr2.readyState < 4){
    	state2("Ready sending data...")
        }
        else if (xhr2.readyState === 4) {
    	state2("Done.")
            if (xhr2.status == 200 && xhr2.status < 300){
    	    message2(xhr2.responseText);
            }
            else{
    	    message2("Error " + xhr2.status);
    	}
        }
    }
    
    xhr2.onerror = function() {
        message2("Error: No response from server.");
    }
    
    var url = "answer_me/that/";
    var params = "?question=To be or not to be?";
    
    xhr2.open('GET', url+params);
    
    var send2 = document.getElementById("send2");
    send2.onclick = function(){
       xhr2.send(null);
    }
    
    


    Server

    def answer_me(request):
        method = request.method
    
        if(method == "GET"):
            question = request.GET['question']
            return HttpResponse("Your question was: '" + question+"'")
        if(method == "POST"):
            question = request.POST['question']
            return HttpResponse("Your question was: '" + question+"'")