一个完整的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[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" οnclick="doRequestUsingGET();"/>    
    
    <br/><br/>
    <input type="button" value="Send parameters using POST" οnclick="doRequestUsingPOST();"/>    
  </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，请看上面两个函数