Возникли проблемы при чтении кода Javascript

Question

Я новичок в JS, и мне довольно трудно читать следующий код JS.

Первый параметр функции - это URL-адрес скрипта PHP, второй - строка.

Меня смущает, как читать код после строки: self.xmlHttpReq.open ('POST', strURL, true);

Что происходит после этого? Какой код я должен смотреть после этой строки? Сценарий? Что происходит после открытия?

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));
}

Answer 1

Ключ - это вызов метода «send ()», который фактически запускает HTTP-запрос. Это происходит, но затем код выполняется немедленно, не дожидаясь результата.

Когда сервер отвечает, браузер вызывает анонимную функцию, настроенную как обработчик «readystatechange». Точно, когда это произойдет, непредсказуемо; это асинхронный , другими словами.

Таким образом, вызов updatepage () будет происходить задолго после того, как функция check_detail () вернется.

Answer 2

Когда вы делаете запрос Ajax (что вы здесь делаете), он асинхронный, что означает, что вы не знаете точно, когда он вернется, поэтому вы не можете просто ждать возврата.

Вместо этого вы настраиваете свою функцию таким образом, чтобы при возврате запроса запускалась функция для обработки ответа.Это кусок onreadystatechange.

Таким образом, хронология будет такой: сначала произойдет send(), который отправит результат метода getquery() на страницу PHP.Когда это вернется, сработает функция, определенная в onreadystatechange, которая вызовет updatepage() и передаст ей как текст, который был отправлен обратно из вызова Ajax, так и параметр pids.

Answer 3

это простая функция Ajax

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)); 
}

надеюсь, это поможет, если не больше о ajax: http://en.wikipedia.org/wiki/Ajax_(programming)

Answer 4

Если вы новичок в JavaScript, то я бы сказал, что пытаться выяснить, что здесь происходит, - пустая трата времени - вы изучаете, как использовать объект XHR, как сделать этот кросс-браузер, и вы одновременно изучаете JavaScript.

Я бы рекомендовал использовать Ajax с библиотекой JavaScript, такой как jQuery, - не пытайтесь изучать все это сейчас, пока вы изучаете и JavaScript.

Большая часть этого может быть заменена чем-то вроде:

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