Having trouble reading Javascript code

I'm new in JS, and having quite hard time reading the following JS code.

The first parameter of the function is a url to a PHP script, the second is a string.

What confuses me is how to read code after the line: self.xmlHttpReq.open('POST', strURL, true);

What happens after this? Which code should i look after this line? The script? What happens after open?

function check_detail(strURL, pids) 
{
    var xmlHttpReq = false;
    var self = this;
    // Mozilla/Safari
    if (window.XMLHttpRequest) {
        self.xmlHttpReq = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject) {
        self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    self.xmlHttpReq.open('POST', strURL, true);
    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    self.xmlHttpReq.onreadystatechange = function() 
    {
        if (self.xmlHttpReq.readyState == 4)
            updatepage(self.xmlHttpReq.responseText, pids);
开发者_开发百科    }
    self.xmlHttpReq.send(getquery(pids));
}

The key is the call to "send()", which actually launches the HTTP request. That happens, but the code then proceeds immediately without waiting for the result.

When the server responds, the browser will invoke the anonymous function set up as the "readystatechange" handler. Exactly when that happens is unpredictable; it's asynchronous, in other words.

Thus, the "updatepage()" call will happen long after the "check_detail()" function has returned.

When you make an Ajax request (which is what you are doing here) it is asynchronous, which means that you don't know exactly when it will return so you can't just wait for the return.

Instead, you set up your function so that, when the request returns, a function is kicked off to handle the response. This is the onreadystatechange piece.

So the chronology will be: first the send() will occur, which will send the result of the getquery() method up to the PHP page. When that returns, the function defined within onreadystatechange will fire, which will call updatepage() and pass it both the text that was sent back from the Ajax call, and also the pids parameter.

If you're new to JavaScript, then I'd say it's a waste of time trying to figure out what's going on here - you're learning how to use the XHR object, how to make that cross-browser, and you're learning JavaScript at the same time.

I'd recommend doing the Ajax with a JavaScript library such as jQuery - don't try to learn it all now while you're learning JavaScript as well.

Most of that could be replaced with something along the lines of:

$.post(strURL, function (data) {
    updatePage(data);
});

this is simple Ajax function

function check_detail(strURL, pids) 
{
    // definning new variable
    var xmlHttpReq = false;
    // creating variable self which will function as this
    var self = this;

    // creating HTTP request maker for Mozilla/Safari
    if (window.XMLHttpRequest) {
        self.xmlHttpReq = new XMLHttpRequest();
    }
    // creating HTTP request maker in IE
    else if (window.ActiveXObject) {
        self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // so this is the confusing part right ?
    // xmlHttpReq.open opens connection tu the strURL and infomation sending method
    // will be POST method ( other passible values can be GET method or even else )
    self.xmlHttpReq.open('POST', strURL, true);
    // this defines HTTP request header (small information about what we are sending)
    // in fact this is sending Content-type of information
    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    // when HTTP request maker state will be changed for example:
    // the data will be sent or data will be received this function will be fired
    self.xmlHttpReq.onreadystatechange = function() 
    {

        // readyState 4 means data has been received
         if (self.xmlHttpReq.readyState == 4)
            updatepage(self.xmlHttpReq.responseText, pids); // updatepage is user defined function
    }

    // this actually sends the HTTP request which is made above
    // but don't be confused because of this code ordering 
    // I mean the function defining what to do when content will be received is implemented
    // before sending HTTP request right ?
    // thats because if the data is too small and internet is really fast HTTP query can be 
    // executed faster then defining new function which will cause javascript error
    self.xmlHttpReq.send(getquery(pids)); 
}

hope this helps if not more about ajax: http://en.wikipedia.org/wiki/Ajax_(programming)