使用AJAX从服务器发送和接收信息

Question

I'm working on a page that is supposed to interact with the server via AJAX, but my experience with AJAX is extremely limited. 我正在一个应该通过AJAX与服务器交互的页面上工作，但是我在AJAX方面的经验非常有限。 Here's how the page is supposed to work. 该页面的工作方式如下。

When the button is clicked, if the "test" radio button is clicked, just display a pop up saying the input was valid. 单击该按钮时，如果单击“测试”单选按钮，则仅显示一个弹出窗口，表明输入有效。 When the button is clicked, if the "live" radio button is clicked, the program is supposed to send a request to the server using the URL " http://cs.sfasu.edu/rball/351/exam2.php " with the contents of the input box being the value for the "name" parameter. 单击该按钮后，如果单击“实时”单选按钮，则该程序应使用URL“ http://cs.sfasu.edu/rball/351/exam2.php ”向服务器发送请求。输入框的内容是“名称”参数的值。 The page will then send back a JSON object that I need to parse into a regular variable. 然后，该页面将发回一个我需要解析为常规变量的JSON对象。

I'll leave the rest of the JSON stuff alone since that's not what I asked. 我将其余的JSON内容保留下来，因为这不是我要的。

So far I have the design of the page done, but like I said I don't really know what I'm doing with the AJAX stuff. 到目前为止，我已经完成了页面的设计，但是就像我说的那样，我真的不知道我在使用AJAX东西做什么。 I have some code written for it, but not sure that it's right. 我为此编写了一些代码，但不确定是否正确。

Here is my code: 这是我的代码：

<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>

And here is a link to my page on our server: 这是我服务器上页面的链接：

cs.sfasu.edu/cs351121/exam2.html

Also, I know it says exam, but this is actually just a review we were given for the actual exam that's next week. 另外，我知道它说的是考试，但这实际上只是我们对下周的实际考试的审查。 I'm just trying to figure out how this works but don't know what I'm doing wrong. 我只是想弄清楚它是如何工作的，但不知道我在做什么错。

Answer 1

I'm not sure what the problem is. 我不确定是什么问题。 The code is correct 代码正确

Ok now i get the problem. 好吧，我明白了。 You are calling the request variable outside the scope. 您正在范围之外调用请求变量。 You are declaring the request variable inside your ajaxStuff function so its only accessible in that area. 您在ajaxStuff函数中声明了request变量，因此只能在该区域访问。 Thats why it is undefined. 这就是为什么它是不确定的。 Try this: 尝试这个：

 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;
                            }
                        }
            }

to get the result just do this 得到结果只是这样做

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

Answer 2

I know, I do not see the jQuery tag, but consider it if there are no framework restrictions. 我知道，我没有看到jQuery标签，但是如果没有框架限制，请考虑一下。

Example: 例：

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

使用AJAX从服务器发送和接收信息

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-10-31 01:50:28

解决方案2
0 2014-10-31 03:19:54

使用AJAX从服务器发送和接收信息

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-10-31 01:50:28

解决方案2 0 2014-10-31 03:19:54

解决方案1
1 已采纳 2014-10-31 01:50:28

解决方案2
0 2014-10-31 03:19:54