Javascript 未捕获类型错误：无法读取属性'；documentElement'；WebStorm中XMLHttpRequest.handleServerResponse处的null值_Javascript_Php_Jquery_Ajax_Webstorm

Javascript 未捕获类型错误：无法读取属性'；documentElement'；WebStorm中XMLHttpRequest.handleServerResponse处的null值

javascript php jquery ajax webstorm

Javascript 未捕获类型错误：无法读取属性'；documentElement'；WebStorm中XMLHttpRequest.handleServerResponse处的null值,javascript,php,jquery,ajax,webstorm,Javascript,Php,Jquery,Ajax,Webstorm,一个输入字段被提供给用户，用户在其中键入他想要的内容。Javascript在后台运行，以检查用户键入的项目是否存在。这是使用Ajax完成的 ajaxHtml.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="foodstore.js"></script>

一个输入字段被提供给用户，用户在其中键入他想要的内容。Javascript在后台运行，以检查用户键入的项目是否存在。这是使用Ajax完成的

ajaxHtml.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="foodstore.js"></script>
    <title>Let's Go</title>
</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"/>
</body>
</html>


走吧
粗水桶
输入您想要点的食物：

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 bro!");
    }
    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(){
    if(xmlHttp.readyState==4){  
        if(xmlHttp.status==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）{
警报（“无法创建该对象bro！”）；
}
其他的
返回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（'process（）'，1000）；
}
}
函数handleServerResponse（）{
如果（xmlHttp.readyState==4）{
如果（xmlHttp.status==200）{
xmlResponse=xmlHttp.responseXML；
xmlDocumentElement=xmlResponse.documentElement；
message=xmlDocumentElement.firstChild.data；
document.getElementById（“underInput”）.innerHTML=''+消息+''；
setTimeout（'process（）'，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 item';
    else
        echo 'Sorry we do not sell '.$food.'!';
echo '</response>';
?>

但是，这似乎不适用于WebStorm，并且显示了HTML文件中的错误。当我在WAMP上运行它时，它工作得非常好，但是我想知道它为什么不能在WebStorm IDE上工作，并想找到一个解决方案。

它也可以在PHPStorm上工作。所以我猜路径是不正确的。我的意思是foodstore.php可能位于错误的位置，因此WEBStorm无法访问它。“但是这似乎不适用于WEBStorm”你的确切意思是什么？请澄清。如果您使用的是WebStorm的内置web服务器。。那么WebStorm不会处理.php文件。。对于要执行.php文件的内置web服务器，您必须指定php解释器的路径。。WebStorm根本没有（只有PhpStorm或完整的IntelliJ IDEA）。