2013-04-26 2 views
0

Я делаю некоторые эксперименты с вызовами AJAX в чистом Javascript, без JQuery. Интересно, если я могу заполнить DIV тег так:Другой стиль вызова ajax

<script type="text/javascript"> 
function call_test() { 
    document.getElementById("myId").innerHTML = ajax_call("example.php?id=1") ; 
} 
</script> 
<body> 

<input type="button" onClick="call_test()" value"Test"> 

<div id="myId">Result should be here</div> 

Проблема заключается в том, как вернуть результат из ajax_call? Мой код выглядит следующим образом, но не работает:

function ajax_call(remote_file) 
{ 
    var $http, 
    $self = arguments.callee ; 
    if (window.XMLHttpRequest) { 
     $http = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
     try { 
      $http = new ActiveXObject('Msxml2.XMLHTTP'); 
     } catch(e) { 
      $http = new ActiveXObject('Microsoft.XMLHTTP'); 
     } 
    } 
    if ($http) { 
     $http.onreadystatechange = function() { 
      if (/4|^complete$/.test($http.readyState)) { 
       return http.responseText ; // This only return undefined 
      } 
     }; 
     $http.open('GET', remote_file , true); 
     $http.send(null); 
    } 
} 

удаленного файла:

<?php 
    echo "<h1>Jus an experiment</h1>"; 
?> 
+0

'document.getElementById ("MyId") innerHTML = ajax_call ("example.php ID = 1?");. 'Означает, что' ajax_call' не должен использовать любой асинхронный запрос метод. Посмотрите на _синхронные запросы в JavaScript_ или аналогичные темы. – Zeta

+0

Хорошо, спасибо большое –

ответ

2

Это не будет работать из-за асинхронной природы AJAX запросов. Метод ajax_call вернется, прежде чем сервер ответит на html, поэтому вы получаете undefied.

Решение здесь заключается в использовании обратного вызова для последующей обработки ответа ajax, как показано ниже.

function ajax_call(remote_file, callback) { 
    var $http, $self = arguments.callee; 
    if (window.XMLHttpRequest) { 
     $http = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
     try { 
      $http = new ActiveXObject('Msxml2.XMLHTTP'); 
     } catch (e) { 
      $http = new ActiveXObject('Microsoft.XMLHTTP'); 
     } 
    } 
    if ($http) { 
     $http.onreadystatechange = function() { 
      if (/4|^complete$/.test($http.readyState)) { 
       if (callback) 
        callback(http.responseText); 
      } 
     }; 
     $http.open('GET', remote_file, true); 
     $http.send(null); 
    } 
} 

И

function call_test() { 
    ajax_call("example.php?id=1", function(html) { 
     document.getElementById("myId").innerHTML = html 
    }); 
} 
+0

Большое спасибо за ответы, позвольте мне поднести снова: p –

Смежные вопросы