Question

这是我的第一个AJAX，也是我第一次使用.php文件。我正在按照文本中的练习进行操作，但它不起作用。我试图尽可能多地使用警报功能来检查变量和函数的输入，但我真的不确定后台发生了什么。我检查了雅虎！天气RSS源应该给这个网站一些信息（“http://weather.yahooapis.com/forecastrss?p=94558”），我确实看到了“item”标签。控制台一直说“不能调用方法'getElementsByTagName”!!提前感谢任何输入....

<!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);
?>

Answer 1

尝试在表单操作中添加WeatherReport.php。您必须在操作中指定您的php文件，否则表单将指向同一文件。

Answer 2

在您的函数fillWeatherInfo中，您尚未传递任何参数。因此，我认为weatherRequest.responseXML是一个空对象。

在onreadystatechange属性中，您需要将AJAX响应的参数传递给处理程序。

无法调用null的方法'getElementsByTagName'

2 个答案: