一个完整的ajax例子 -----get 和post 的区别

joezheng123 · 发表于 2013-1-23 02:48:49

客户端：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Sending Request Data Using GET and POST</title><script type="text/javascript">var xmlHttp;function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); }} function createQueryString() { var firstName = document.getElementById("firstName").value; var middleName = document.getElementById("middleName").value; var birthday = document.getElementById("birthday").value; var queryString = "firstName=" + firstName + "&middleName=" + middleName + "&birthday=" + birthday; return queryString;}function doRequestUsingGET() { createXMLHttpRequest(); var queryString = "GetAndPostExample?"; queryString = queryString + createQueryString() + "&timeStamp=" + new Date().getTime(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", queryString, true); xmlHttp.send(null);}function doRequestUsingPOST() { createXMLHttpRequest(); var url = "GetAndPostExample?timeStamp=" + new Date().getTime(); var queryString = createQueryString(); xmlHttp.open("POST", url, true); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.send(queryString);} function handleStateChange() { if(xmlHttp.readyState == 4) { //如果服务器处理完 xmlHttp.readyState 返回4 if(xmlHttp.status == 200) { //如果服务器处理成功 xmlHttp.status 返回200 parseResults(); } }}function parseResults() { var responseDiv = document.getElementById("serverResponse"); if(responseDiv.hasChildNodes()) { responseDiv.removeChild(responseDiv.childNodes[0]); } var responseText = document.createTextNode(xmlHttp.responseText); responseDiv.appendChild(responseText);}</script></head><body> <h1>Enter your first name, middle name, and birthday:</h1> <table> <tbody> <tr> <td>First name:</td> <td><input type="text" id="firstName"/> </tr> <tr> <td>Middle name:</td> <td><input type="text" id="middleName"/> </tr> <tr> <td>Birthday:</td> <td><input type="text" id="birthday"/> </tr> </tbody> </table> <form action="#"> <input type="button" value="Send parameters using GET" /> <br/><br/> <input type="button" value="Send parameters using POST" /> </form> <br/> <h2>Server Response:</h2> <div id="serverResponse"></div></body></html>
服务端：用servlet处理

通过request.getParameter(String name) //获得传过来的各个参数的值

处理完成后，直接用

out.println(String); //输出到客户端，客户端采用xmlHttp.responseTex获得out.println(String)

上面注意用get和post方法请求的不同

当要把参数通过send（）发送时，要使用post，请看上面两个函数

		自动登录	找回密码
密码			立即注册