Pure-javascript longpolling for chat

Question

So I have started a project, where I want to make an online ajax chat, but I do NOT want to use jQuery JSON, COMET and so on. I am looking for pure javascript, no libraries no framework.

Good news is that I have already made the chat and it is working fine. Why do i make this post? Because I simply cannot find any pure javascript solution for long-polling. Currently I am using the setInterval method to "ask" the database to send whatever is in the database. now, how do I execute my ajax request whenever I get a response? (Long-polling).

please bear in mind that I am not looking for a jQuery solution or what have you.. I am using pure JavaScript and PHP. No framework or library.

Thanks in advance.

Here is a jQuery example, you just need to un-jQuery it: http://stackoverflow.com/a/333884/600135 — kol, Oct 27 '13 at 10:52
I have in fact checked that thread out. But problem is that I cannot "un-jQuery" it, that is why I was asking for a pure JS solution :-) You see, the "success:" part of jQuery is probably what I am looking for. But I have no idea what that looks like without jQuery — Kristian Daugaard, Oct 27 '13 at 10:59
http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery — naveen, Oct 27 '13 at 12:51
Unless i am mistaken, you link to ajax with pure javascript. And i already have that. I need the long-polling part. — Kristian Daugaard, Oct 27 '13 at 15:16
There's a good example of a pure PHP/Javascript (no jQuery) example of a long polling chat application in this book: http://www.packtpub.com/ajax-and-php-building-responsive-web-applications/book — cszy, Oct 28 '13 at 03:23

Joe · Answer 1 · 2013-10-28T18:51:10.577

i believe this is relatively close to what your looking for - referencing a vanilla js ajax tutorial on nettuts plus:

load('test.txt', function(xhr) { 
    document.getElementById('container').innerHTML = xhr.responseText;  
    // you would obviously custom tailor this peice to utilize your specific data
});  

function load(url, callback) {  
    var xhr;  

    if(typeof XMLHttpRequest !== 'undefined') xhr = new XMLHttpRequest();  
    else {  
        var versions = ["MSXML2.XmlHttp.5.0",   
                        "MSXML2.XmlHttp.4.0",  
                        "MSXML2.XmlHttp.3.0",   
                        "MSXML2.XmlHttp.2.0",  
                        "Microsoft.XmlHttp"]  

         for(var i = 0, len = versions.length; i < len; i++) {  
            try {  
                xhr = new ActiveXObject(versions[i]);  
                break;  
            }  
            catch(e){}  
         } // end for  
    }  

    xhr.onreadystatechange = ensureReadiness;  

    function ensureReadiness() {  
        if(xhr.readyState < 4) {  
            return;  
        }  

        if(xhr.status !== 200) {  
            return;  
        }  

        // all is well    
        if(xhr.readyState === 4) {  
            callback(xhr);  
        }             
    }  

    xhr.open('GET', url, true);  
    xhr.send('');  
}

and you could build your "success" handlers into the 'ensure readiness' based on the return values

heres a link to the nettuts tutorial

and another to the MDN ajax API docs

one of the downsides in this method is the object referenced varies whether you are using ie or a real web browser... the ActiveXObject vs XMLHttpRequest - another reason i cant wait for the end of the browser wars and the day we stop spoon feeding ie back version users — Joe, Oct 28 '13 at 18:49
While this is a good tutorial, it doesn't really cover my needs, since i basically already have written what this guy is teaching. Just need the long polling part. The part that prevents my server from getting too much trafic. I am using a setInterval function to keep asking if there is anything in the database. but long-polling should keep the connection open untill the database refreshes — Kristian Daugaard, Nov 01 '13 at 14:46

Pure-javascript longpolling for chat

1 Answers1