Question

的index.php： -

<!DOCTYPE html>
<html>
<head>
<script src="food.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 </head>    
 <body onloadd="process()">
 <div class="container">
 <h2 class="page-header">The Chuff Bucket</h2>

 <strong>Enter the food you want to order:</strong><br><br>

    <input type="text" class="form-control" id="userInput">

<div id="underInput">

</div>
</div>
</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','loaf','sandwich','pizza');
    if(in_array($food, $foodArray))
    {
        echo 'We do have'.$food.'!';
    }
    elseif($food=='')
    {
        echo 'Enter a food chomu';
    }
    else
    {
        echo 'We have no'.$food;
    }

  echo '</response>';
  ?>

food.js＆＃34; -

   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("Cannot create the object!!");
    }
    else
    {
        return xmlHttp;
    }
    }

    function process() {

    if(xmlHttp.readyState == 0 || xmlHttp.readyState == 4)
    {
    var 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;
            xmlDocElm = xmlResponse.documentElement;
            msg = xmlDocElm.firstChild.data;
            document.getElementById("underInput").innerHtml = '<span style="color:blue;">'+msg+'</span>';
            setTimeout('process()',1000);

        }
        else
        {
            alert("Something is wrong!!");
        }
        }
        }

我刚开始使用AJAX，这是我的第一个代码。我甚至免费托管了它。以下是网址： - Chuff Bucket 我不知道代码有什么问题。我已经完成了与教程中所示相同的操作。

Answer 1

这不是你想的那样：

xmlHttp.onreadystatechange = handleServerResponse();

这是立即调用handleServerResponse函数（它没有做任何事情，因为当时xmlHttp.readyState不是4 ），并将该函数的结果设置为onreadystatechange回调。由于该函数不返回任何内容，因此结果为undefined。

不要调用该函数，只需将其设置为变量作为回调：

mlHttp.onreadystatechange = handleServerResponse;

Answer 2

javascript框架提供了一种使用Ajax请求的简化方法，如jQuery Ajax。使用这种框架是简化代码和不重复自己的好方法DRY。

jQuery版本：

<script>
$(document).on('keyup', '#userInput', function(){
    var food = $(this).val(); // # <= means ID
    $.get('foodstore.php', 'food='+food, function(response){
        $('#underInput').html(response);
    });
});
</script>

我的AJAX脚本没有提供任何输出

2 个答案: