使用AJAX发送和接收来自服务器的信息

我正在处理应该通过AJAX与服务器交互的页面，但我对AJAX的使用经验非常有限。这是网页应该如何工作。使用AJAX发送和接收来自服务器的信息

单击按钮时，如果单击“测试”单选按钮，只需显示一个弹出窗口，说明输入有效。单击按钮时，如果单击“实时”单选按钮，程序应该使用URL“http://cs.sfasu.edu/rball/351/exam2.php”向服务器发送一个请求，输入框的内容为“name”参数的值。该页面将发回一个JSON对象，我需要将其解析为一个常规变量。

因为那不是我问的，我只剩下JSON的其余部分。

到目前为止，我已完成页面的设计，但就像我说过的，我并不真正知道我在做什么与AJAX的东西。我为它编写了一些代码，但不确定它是否正确。

这里是我的代码：

<html> 
    <head> 
     <title>anner, Taylor</title> 

     <style type = "text/css"> 
      canvas { 
       border: 2px solid black; 
      } 
     </style> 

     <script type = "text/javascript"> 
      window.onload = function() { 
       var TTcanvas = document.getElementById("myCanvas"); 
       var TTcontext = TTcanvas.getContext("2d"); 

       TTcontext.strokeStyle = "red"; 
       TTcontext.fillStyle = "red"; 
       TTcontext.fillRect(250,50,100,100); 
       TTcontext.stroke(); 

       TTcontext.beginPath(); 
       TTcontext.moveTo(600, 0); 
       TTcontext.lineTo(0, 200); 
       TTcontext.lineWidth = 5; 
       TTcontext.strokeStyle = "black"; 
       TTcontext.stroke(); 

      } 

      function validate() { 
       var TTinput = document.getElementById("3letters").value; 

       if(TTinput.length < 3 || TTinput.length > 3) { 
        alert("Please enter 3 letters"); 
       } 

       var TTtest = document.getElementById("test"); 
       var TTlive = document.getElementById("live"); 

       if(TTtest.checked == true) { 
        alert("Input is valid"); 
       } 
       else if(TTlive.checked == true) { 
        return ajaxStuff(); 
       } 
      } 

      function ajaxStuff() { 
       var TTrequest = new XMLHttpRequest(); 
       TTrequest.open("GET", "http://cs.sfasu.edu/rball/351/exam2.php?name=TTinput.value", true); 
       TTrequest.send(); 
       var TTresponse = TTrequest.responseText; 
       TTrequest.onreadystatechange=function() { 
          if(TTrequest.readyState==4 && TTrequest.status==200) { 
              document.getElementById("myDiv").innerHTML.TTresponse; 
          } 
         } 
      }  
     </script> 
    </head> 

    <body> 
     <h1>Tanner, Taylor</h1> 

     <canvas id = "myCanvas" width = "600" height = "200"></canvas> <br> 

     <form> 
      Enter 3 letters: <input type="text" id="3letters"> <br> 
      <input type = "radio" id = "test" value = "test">Test 
      <input type = "radio" id = "live" value = "live">Live <br> 
      <input type = "button" id = "check" value = "Send" onclick="validate()"> 
     </form> 

     <div id="myDiv"> 

     </div> 
    </body> 
</html>

这里是我的网页链接我们的服务器上：

cs.sfasu.edu/cs351121/exam2.html

另外，我知道它说的考试，但其实这只是一个回顾我们获得了下周的实际考试。我只是想弄清楚这是如何工作的，但不知道我做错了什么。

来源

2014-10-31 Beth Tanner

您的呼叫，导致给它一个无限循环的。开两次。 – TheProvost 2014-10-31 02:55:52

刚刚注意到，即将修改的帖子现在已经更正了代码。不再发生错误，但没有得到任何东西。 – 2014-10-31 03:03:59

我不确定是什么问题。代码是正确的

好了，现在我得到了问题。您正在调用范围外的请求变量。你正在声明你的ajaxStuff函数中的请求变量，所以它只能在那个区域访问。这就是为什么它是未定义的。试试这个：

function ajaxStuff() { 
         var TTrequest = new XMLHttpRequest(); 
       TTrequest.open("GET", "http://cs.sfasu.edu/rball/351/exam2.php?name=TTinput.value", true); 
         TTrequest.send(); 

       TTrequest.onreadystatechange=function() { 
          if(TTrequest.readyState==4 && TTrequest.status==200) { 
            document.getElementById("myDiv").innerHTML=TTrequest.responseText; 
          } 
         } 
      }

得到的结果只是这样做

TTrequest.send(); 
var response=TTrequest.responseText;

来源

2014-10-31 01:50:28 TheProvost

我认为我的一个问题是我的功能。在“TTrequest.onreadystatechange = function（）{”部分代码中，我不断收到一条错误，指出“TTrequest未定义”。任何想法如何解决这个问题？ – 2014-10-31 02:21:57

哦，没有明白。当然，它没有被定义，因为你在你的函数中定义了变量，然后在它外面访问。看到我上面编辑的代码 – TheProvost 2014-10-31 02:27:36

那么，修正了这一点，但现在我得到了所有这些“NS_ERROR_FAILURE：”消息，其中一个说“递归太多”现在再次抛出。当你编写了一个无限循环时，Web控制台基本上看起来像控制台在编译器中所做的那样... – 2014-10-31 02:44:30

我知道，我没有看到jQuery的标签，但考虑如果没有框架的限制。

例子：

$("button").click(function(){ 
    $.ajax({url:"demo_test.txt",success:function(result){ 
    $("#div1").html(result); 
    }}); 
});

来源

2014-10-31 03:19:54 Andrew

使用AJAX发送和接收来自服务器的信息

回答

相关问题