在textfield上输入一些数据后，我使用ajax来显示输出，它没有显示正确的输出 - I am using ajax to show the output after entering some data on textfield ,it is not showing proper output?

I am using ajax to show the output after entering some data on textfield ,it is not showing proper output?

这里是html程序。。。在这里，我使用ajax在textfield上输入一些数据后显示输出，当food=''时，它只给出第一个响应，之后它不会像我们没有的那样显示另一个响应。或者我们确实有。

<!DOCTYPE>
<html>
<head>
    <script type="text/javascript" src="foodstore.js"></script>
</head>
<body onload="process()">
    <h1>choose your favorite food</h1>
    <input type="text"  id="inputuser">
    <div id="usererror"></div>
</body>
</html>

这是食品商店.php

<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';
echo '<response>';
$food=$_GET['food']; 
$foodArray=array('shahi paneer','matar paneer','matar alu','raita');
if(in_array($food,$foodArray))
  {
   echo 'we  do have '.$food.'!'; 
   }
elseif($food=='')
  { 
    echo 'please enter any dish';
      }
 else
 {
   echo 'we dont have '.$food.'!';
 }
 echo '</response>';
 ?>

这是食品商店.js

var xmlHttp=createXmlHttpRequestObject();
function createXmlHttpRequestObject()
{
var xmlHttp;
  if (window.XMLHttpRequest)
   {
     xmlHttp=new XMLHttpRequest();
   }
  else
   {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   if(!xmlHttp)
      alert("cant create that object");
   else
       return xmlHttp;
  }
  function process()
    {
    if (xmlHttp.readyState==0 ||xmlHttp.readystate==4)
     { 
      dish=encodeURIComponent(document.getElementById("inputuser").value);
      xmlHttp.open("GET","foodstore.php?food="+dish, 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("usererror").innerHTML='<span style     ="color:red">'+message+'</span>';
   setTimeout('process()',1000);
    }
    else
   {
    alert('something went wrong');
      }
     }
    }

方法应该是

为文本框编写onchange事件（对文本框内容的onchange调用process（）函数）。
            or 
添加一个按钮以触发该功能=>用户输入菜并点击按钮。

方法一（使用jQuery）

<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<!--<script type="text/javascript" src="foodstore.js"></script>-->
<script>
    $(document).on("keyup","#inputuser", function(){
        var dish = $(this).val();
        $.ajax({
          type: "GET",
          url: 'foodstore.php',
          data : {food:dish},
          success: function(data){alert(data);
            $('#usererror').html(data);
          }
        });
    });
</script>
</head>
<body>
    <h1>choose your favorite food</h1>
    <input type="text"  id="inputuser" value="" />
    <div id="usererror"></div>
</body>
</html>

食品商店.php

<?php
$food=$_GET['food']; 
$foodArray=array('shahi paneer','matar paneer','matar alu','raita');
if(in_array($food,$foodArray)) {
   echo 'we  do have '.$food.'!'; 
}
elseif($food=='') { 
   echo 'please enter any dish';
} else  {
   echo 'we dont have '.$food.'!';
}
?>

在onBlur上更改您的onload，并从加载中删除并放置在input:中

<input type="text"  id="inputuser" onblur="process()">