Javascript 第一个使用ajax的小型foodstore项目-不执行_Javascript_Php_Ajax

Javascript 第一个使用ajax的小型foodstore项目-不执行

javascript php ajax

Javascript 第一个使用ajax的小型foodstore项目-不执行,javascript,php,ajax,Javascript,Php,Ajax,我刚刚开始学习Ajax，并观看了一个关于如何编写一个小输入来检查foodstore是否有库存的教程我反复检查了几次代码，但它仍然没有执行任何操作。如果有人能在这里帮助我，我会很高兴的代码基本上是三个文件： Index.html <!DOCTYPE html> <html> <head> <script type="text/javascript" src="foodstore.js"></script> </head&

我刚刚开始学习Ajax，并观看了一个关于如何编写一个小输入来检查foodstore是否有库存的教程

我反复检查了几次代码，但它仍然没有执行任何操作。如果有人能在这里帮助我，我会很高兴的

代码基本上是三个文件：

Index.html

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="foodstore.js"></script>

</head>

<body onload="process()">

<h3>The Food Store</h3>

<p>Enter the food you would like to have:</p>
<input type="text" id="userInput">
<div id="underInput"/>

</body>

</html>


食品店
输入您想要的食物：

foodstore.php

<?php 
header('Content-Type: text/xml');
echo '<xml version="1.0" encoding="UTF-8" standalone="yes" ?>';

echo '<response>';
$food = $_GET['food'];
$foodArray = array('tuna', 'bacon', 'beef', 'ham');
if(in_array($food,$foodArray)) {
    echo 'We do have '.$food'!';
echo '</response>';
}
}


?>

最后是foodstore.js

    var xmlHttp = createXmlHttpRequestObject();

    function createXmlHttpRequestObject() {
        var xmlHttp;

        if(window.ActiveXObject) {
            try{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e){
                xmlHttp = false;
            }
        }else{
             try{
                xmlHttp = new XMLHttpRequest();
            } catch(e){
                xmlHttp = false;
            }
        }

        if(!xmlHttp)
            alert("Cant create that object!");

        else {
            return xmlHttp;
        }
    }

    // This is now the communication part!

    function process() {
        if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
            food =          encodeURIComponent(document.getElmentById("userInput").value);
            xmlHttp.open("GET", "foodstore.php?food=" + food, true);
            xmlHttp.onreadystatechange = handleServerResponse;
            xmlHttp.send(null);
        }else{
            setTimeout('process()',1000);
        }
    }

    function handleServerResponse() {

        if(xmlHttp.readyState==4){
            if(xmlHttp.status==200){
                xmlResponse = xmlHttp.responseXML;
                xmlDocumentElement = xmlResponse.documentElement;
                message = xmlDocumentElement.firstChild.data;
                document.getElementById("underInput").innerHTML = '<span styel="color:blue">' + message + '</span>';
                setTimeout('process()',1000);
            }else{
                alter('Something went wrong!');
            }
        }

    }

var xmlHttp=createXmlHttpRequestObject（）；
函数createXmlHttpRequestObject（）{
var-xmlHttp；
if（window.ActiveXObject）{
试一试{
xmlHttp=新的ActiveXObject（“Microsoft.xmlHttp”）；
}捕获（e）{
xmlHttp=false；
}
}否则{
试一试{
xmlHttp=新的XMLHttpRequest（）；
}捕获（e）{
xmlHttp=false；
}
}
如果（！xmlHttp）
警报（“无法创建该对象！”）；
否则{
返回xmlHttp；
}
}
//这就是通讯部分！
函数过程（）{
if（xmlHttp.readyState==0 | | xmlHttp.readyState==4）{
food=encodeURIComponent（document.getElmentById（“userInput”）.value）；
open（“GET”，“foodstore.php？food=“+food，true”）；
xmlHttp.onreadystatechange=handleServerResponse；
xmlHttp.send（空）；
}否则{
setTimeout（'process（）'，1000）；
}
}
函数handleServerResponse（）{
if（xmlHttp.readyState==4）{
if（xmlHttp.status==200）{
xmlResponse=xmlHttp.responseXML；
xmlDocumentElement=xmlResponse.documentElement；
message=xmlDocumentElement.firstChild.data；
document.getElementById（“underInput”）.innerHTML=''+消息+''；
setTimeout（'process（）'，1000）；
}否则{
奥尔特（“出了什么事！”）；
}
}
}

我真的很感谢你的帮助。我还从youtube上看到，jQuery在js部分更易于使用。这是真的吗

非常感谢

是的，它真正的jquery很容易在这里检查

在foodstore.js中，您在编写document.getElmentById（“userInput”）.value时遇到了一个小问题，必须

document.getElementById（“userInput”）.value

我不知道从哪里开始。几乎所有的事情，可能只是所有的事情，在这里都是错的。找到不同的教程并重新开始。好的，谢谢。实际上，这个教程看起来相当不错。是由Newboston.com制作的，被评为非常积极。我想我可能会犯一个小错误…？好的，谢谢。尽管如此，这本教程的评价还是相当积极的。你看到什么错误了吗？没有，我没有看到任何错误。