2014-02-13 4 views
0

Это мой первый AJAX и мое первое использование файла .php. Я следую упражнениям в тексте, и он не работает. Я пытался использовать функцию предупреждения столько раз, сколько возможно, чтобы проверить, что подает переменные и функции, но я действительно не уверен, что происходит в фоновом режиме. Я проверил Yahoo! Погода, который должен предоставить этому веб-сайту некоторую информацию («http://weather.yahooapis.com/forecastrss?p=94558»), и я вижу тег «item». Консоль продолжает говорить «Не могу вызвать метод getElementsByTagName» !! Оцените любой ввод заранее ....Невозможно вызвать метод getElementsByTagName из null

<!DOCTYPE html PUBLIC "-\\W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
    <title>Weather Report</title> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 


    <style type="text/css"> 



    html { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
    } 
    body 
    { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
    } 
    a { color: #91c056; } 
    a:link { color: #515151; text-decoration: none; } 
    a:visited { color: #515151; text-decoration: none; } 
    a.back:hover { color: #6eece3; } 
    #content-pane{ 
     font-family: Courier New, monospace; 
     letter-spacing: -0.05em; 
     font-size: 15px; 
     line-height: 23px; 
     float:left; 
     width:100%; 
     padding-left: 5%; 
     padding-top: 5%; 
    } 
    #headline 
    { 
     font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; 
     font-weight: bold; 
     letter-spacing: -0.05em; 
     font-size: 60px; 
     line-height: 60px; 
     color: #323232; 
     text-align: left; 
    } 




</style> 





<script type="text/javascript"> 

    /* <![CDATA[ */ 


    var weatherRequest = false; 



    function getRequestObject(){ 
     try { 
      httpRequest = new XMLHttpRequest(); 
     } 
     catch (requestError){ 

      try { 
       httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); 

      } 
      catch (requestError) { 

       try{ 
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
       } 
       catch (requestError){ 

        window.alert("Your browser does not support AJAX!"); 
        return false; 
       } 
      } 
     } 
     return httpRequest; 
    } 


    function weatherUpdate(){ 

     if(!weatherRequest) 
       weatherRequest = getRequestObject(); 
     var zip = document.forms[0].zip.value; 
     weatherRequest.abort(); 
     weatherRequest.open("get", "WeatherReport.php?zip=" + zip, true); 
     weatherRequest.send(null); 
     weatherRequest.onreadystatechange=fillWeatherInfo; 

    } 



    function fillWeatherInfo(){ 


     if (weatherRequest.readyState == 4 && weatherRequest.status == 200){ 


      var weather = weatherRequest.responseXML; 
      var weatherItems=weather.getElementsByTagName("item"); 
      if (weatherItems.length > 0){ 

       for (var i=0; i<weatherItems.length; ++i){ 

        var curHeadline = weatherItems[i].getElementsByTagName("title")[0].childNodes[0].nodeValue; 
        var curLink = weatherItems[i].getElementsByTagName("link")[0].childNodes[0].nodeValue; 
        var curPubDate = weatherItems[i].getElementsByTagName("pubDate")[0].childNodes[0].nodeValue; 
        var curDesc = weatherItems[i].getElementsByTagName("description")[0].childNodes[0].nodeValue; 
        var weatherSpot = document.getElementById('weatherPara'); 
        var curStory = "<a href='" + curLink + "'>" + curHeadline + "</a><br />"; 
        curStory += "<span style='color: gray'>"; 
        curStory += curDesc + "<br />"; 
        weatherSpot.innerHTML = curStory; 

       } 
      } 
      else 
      window.alert("Invalid ZIP code."); 


     } 
    } 




    /* }]> */ 





</script> 





</head> 
<body onload ="weatherUpdate()"> 
<div id="content-pane"> 



<a href="http://cois-linux.austincc.edu/~u4744906" class="back">go back</a> 
<div id="headline">Weather Report</div> 
<br /> 
<br /> 
<br /> 
<br /> 


<form method="get" action=""> 
    <p>ZIP code <input type="text" name="zip" value="94558"/> <input type="button" value="Check Weather" onclick="weatherUpdate()" /></p> 






</form> 

<p id="weatherPara"></p> 










</div> 

</body> 
</html> 

Ниже приведен файл WeatherReport.php.

<?php 
$Zip = $_GET["zip"]; 
$WeatherURL 
    = "http://weather.yahooapis.com/forecastrss?p=" . $Zip; 
header("Content-Type: text/xml"); 
header("Content-Length: " . strlen(file_get_contents($WeatherURL))); 
header("Cache-Control: no-cache"); 
readfile($WeatherURL); 
?> 
+0

Одна большая вещь, которую я предлагаю, - попытаться использовать консоль вместо предупреждений. В Chrome зайдите в консоль view -> developer -> javascript или вы можете получить Firebug для Firefox. –

ответ

0

Попробуйте добавить свой WeatherReport.php в действие формы. Вы должны указать свой php-файл в своем действии, иначе форма укажет на тот же файл.

0

В вашей функции fillWeatherInfo, вы не передали ей никаких параметров. Поэтому я считаю, что weatherRequest.responseXML - пустой объект.

В вашем onreadystatechange свойствах вам необходимо передать параметры ответа AJAX обработчику.

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