Fatal编程技术网
  • javascript/
  • 带有javascript的Ajax在wamp服务器上不起作用

带有javascript的Ajax在wamp服务器上不起作用

javascript php ajax

带有javascript的Ajax在wamp服务器上不起作用,javascript,php,ajax,wampserver,Javascript,Php,Ajax,Wampserver,我是ajax新手，在youtube教程之后创建了一个简单的食物搜索应用程序 如果用户在输入字段中输入食品名称，则在其下方显示名称 说没有食物 但不知何故，它在wamp服务器上不起作用。它会显示错误警报 这是我的密码 index.html <!Doctype html> <html lang = "en"> <head> <title>Ajax app</title> <meta charset = "UTF-8">

我是ajax新手，在youtube教程之后创建了一个简单的食物搜索应用程序 如果用户在输入字段中输入食品名称，则在其下方显示名称 说没有食物 但不知何故，它在wamp服务器上不起作用。它会显示错误警报

这是我的密码

index.html

<!Doctype html>
<html lang = "en">
 <head>
  <title>Ajax app</title>
  <meta charset = "UTF-8">
  <style>

  </style>
  <script type="text/javascript" src="foodstore.js"></script>
 </head>
 <body onload="process()">

  <h3>The Chuff Bucket</h3>
    Enter the food you would like to order:
    <input type="text" id="userInput"/>
    <div id="underInput"></div>
  </body>
</html>


Ajax应用程序
粗水桶
输入您想要点的食物：
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("can't create that object boss");
        }else{
            return xmlHttp;
        }
    }

    function process()
    {
        if(xmlHttp.readyState==0||xmlHttp.readyState==4){
             food = encodeURIComponent(document.getElementById("userInput").value);
             xmlHttp.open("GET","foodstore.php?food=" + food, true);
             xmlHttp.onreadystatechange = handleServerResponse;
             xmlHttp.send(null);
        }else{
             setTimeout("process()",1000);  
        }
    }
    function handleServerResponse()
    {    
    //readystate 4 whenever response is ready and object done communicating
        if(xmlHttp.readyState==4){
            //state 200 means communiaction went ok
            if(xmlHttp.readyState==200){
                xmlResponse = xmlHttp.responseXML;
                xmlDocumentElement = xmlResponse.documentElement;
                message = xmlDocumentElement.firstChild.data;
                document.getElementById("underInput").innerHTML = "<span style='color:blue'>" + message + "</span>"
                setTimeout("process()",1000);   
            }else{
                alert("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）{
警报（“无法创建对象boss”）；
}否则{
返回xmlHttp；
}
}
函数过程（）
{
if（xmlHttp.readyState==0 | | xmlHttp.readyState==4）{
food=encodeURIComponent（document.getElementById（“userInput”）.value）；
open（“GET”，“foodstore.php？food=“+food，true”）；
xmlHttp.onreadystatechange=handleServerResponse；
xmlHttp.send（空）；
}否则{
setTimeout（“进程（）”，1000）；
}
}
函数handleServerResponse（）
{    
//readystate 4无论何时响应就绪且对象完成通信
if（xmlHttp.readyState==4）{
//状态200意味着行动顺利
if（xmlHttp.readyState==200）{
xmlResponse=xmlHttp.responseXML；
xmlDocumentElement=xmlResponse.documentElement；
message=xmlDocumentElement.firstChild.data；
document.getElementById（“输入不足”）.innerHTML=“+消息+”“
setTimeout（“进程（）”，1000）；
}否则{
警惕（“出了差错”）；
}
}
}
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","loaf","ham");
    if(in_array($food,$foodArray))
    {
        echo "We do have" .$food. "!";
    }
    elseif($food ="")
    {
        echo "Enter a food please.";
    }
    else
    {
        echo"sorry but we don't even sell" . $food. "!";
    }
 echo "</response>";
?>
我们将非常感谢您的帮助，谢谢。请不要使用
xmlHttp=new-ActiveXObject（“Microsoft.xmlHttp”）。最好的选择是合并，但“ActiveXObject（“Microsoft.XMLHTTP”）”已经过时（即使对于Microsoft环境也是如此），并且在许多浏览器上都不受支持

这里有一个（无jQuery）：

所有当代浏览器都支持此语法。。。自IE7（2006年起）以来一直受到微软的支持

此外：

如果您还不熟悉Chrome开发者工具（Chrome浏览器的一部分），那么您肯定想了解它：


欢迎来到StackOverflow-请阅读我们的页面，了解如何改进此问题的提示。好的问题往往会从开发工具中的社区检查您的网络->xhr选项卡中获得快速、好的答案。它会显示哪条警报消息？“出现问题”或“无法创建对象boss”@accountary“出现问题”@Sash_007这意味着服务器没有使用
200 ok
状态代码进行响应，您需要检查浏览器网络选项卡中的响应是什么。

var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myArr = JSON.parse(this.responseText);
        console.log('myArr', myArr);
    }
};
xmlhttp.open("GET", url, true);