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

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

客户端:
<!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);    }      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,请看上面两个函数
 
页: [1]
查看完整版本: 一个完整的ajax例子 -----get 和post 的区别