Не удалось прочитать код 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

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

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

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

Answer 2

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

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

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

Answer 3

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

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

Большинство, которые могут быть заменены на что-то вдоль линий:

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

Answer 4

это простая функция 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)