我买了一本书，开始学习如何使用AJAX，有人给了我一个练习任务，我必须input值到一个div，并执行一个AJAX获取请求，她给了我一个网站，在正确的div接收信息。 也许我在本书后面错误地做了AJAX get请求。 如果有人能指出我正确的方向，我将不胜感激。 这不是学校，我没有在网页脚本语言的经验，但愿意学习。 只要给我的JavaScript一看，也许你可以帮我。 我不知道如何显示收到信息后，但我知道当我点击提交button时，我不想加载另一个页面！
另外，我有一个奇怪的方式，用C ++编程我的代码大约4年了。 随着时间的推移，我已经开发出来了，如果难以理解，我感到抱歉。 如果是这样，那么我可以用适当的方式来格式化并重新发布。 另外，我正在尝试学习如何使用AJAX GET方法，而不是POST方法。 我想用JSON返回信息。
<html> <head> <style type="text/css"> #header { text-align: left; } #wrapper { margin:bottom; width:100%; } #sub-left { float:left; width:225px; height:215px; border:1px solid black; position: relative; text-align: left; } #sub-right { padding-left: 52px; float:left; width:60%; height:45%; border:1px solid black; position: relative; text-align: left; } #sub-leftmost { float:left; width:10%; height:100%; position: relative; text-align: left; } </style> <script type=”text/javascript”> // function create GetXmlHttpObject function GetXmlHttpObject(){ if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari return new XMLHttpRequest(); } if (window.ActiveXObject){ // code for IE6, IE5 return new ActiveXObject(“Microsoft.XMLHTTP”); } return null; } function submitFormWithAjax(){ var myAjaxGetrequest = new GetXmlHttpObject(); var t2lName=document.testForm.namebox.value; var t2lEmail=document.testForm.ebox.value; var t2lAddress=document.testForm.addbox.value; var t2lPhone=document.testForm.phnbox.value; var parameters = "name=" + encodeURIComponent(t2lName) + "&email=" +encodeURIComponent(t2lEmail) + "&address=" + encodeURIComponent(t2lAddress) + "&phone=" +encodeURIComponent(t2lPhone); myAjaxGetrequest.open("GET", "websitetosendandgetfrom.com" + parameters, true); myAjaxGetrequest.send( ); if (myAjaxGetrequest.readyState==4){ if(myAjaxGetrequest.status==200 || window.location.href.indexOf("http")==-1){ document.getElementById("result").innerHTML=myAjaxGetrequest.responseText document.getElementById(“testForm”).style.display = “none”; } else { document.getElementById(“testForm”).innerHTML=”An error has occured making the request”; } } } } </script> </head> <body> <div id="wrapper"> <div id="sub-leftmost"> </div> </div> <div id="wrapper"> <div id="header"><h1>Quiz</h1></div> <div id="sub-left"> <form name = 'testForm'> <FONT COLOR="CC3300",font size="5"> <b>User Info</b></FONT> <br /> Full Name: <br /><center><input type="text" size="25" id = "namebox" /></center> Email Address: <br /><center><input type="text" size="25" id = "ebox" /></center> Address: <br /><center><input type="text" size="25" id = "addbox" /></center> Phone Number: <br /><center><input type="text" size="25" id = "phnbox" /> <a href=”#” onclick=”submitFormWithAjax();”>Finished!</a> </form> </div> </div> <div id="wrapper"> <div id="sub-right"> </div> </div> </body> </html> 该请求是异步的，只会在状态更改时调用回调函数。
基本上，所有依赖请求状态变化的代码都需要被包装到AJAX请求的回调中：
myAjaxGetrequest.send(); myAjaxGetrequest.onreadystatechange = function() { if (myAjaxGetrequest.readyState==4){ ...