通常情况下，GET请求用于从服务器上获取数据，POST请求用于服务器发送数据。
采用GET请求将父菜单的ID作为参数发送，下面是服务器的响应页面，此处并未让服务器响应页面从数据库读取——后台数据库访问可仿照传统java EE框架。服务器响应页面的代码如下。
程序清单：Ajax02request/get/second.jsp
<%@ page contentType="text/html; charset=UTF-8" language="java" %><%String idStr = (String)request.getParameter("id");int id = idStr == null ? 1 : Integer.parseInt(idStr);System.out.println(id);switch(id){ ???case 1:%>上海$广州$北京<% ???break; ???case 2:%>华盛顿$纽约$加州<% ???break; ???case 3:%>东京$大板$福冈<% ???break;}%>上面jsp页面作为服务器响应非常简单：先读取请求参数，当请求id为1时，返回三个中国城市；当请求id为2时，返回三个美国城市；当请求id为3时，返回三个日本城市。客户端HTML页面则通过XMLHttpRequest向服务器发送请求，并请求动态显示在HTML文档中。下面是对应的HTML页面的代码。
程序清单：Ajax02request/get/first.html
<!DOCTYPE html><html><head> ???<meta name="author" content="silvan" /> ???<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> ???<title> 发送GET请求 </title> ???<!-- 给select标签添加样式 --> ???<style type="text/css"> ??????select { ??????????width:160px; ??????????font-size:11pt; ??????} ???</style></head><body><select name="first" id="first" ?onchange="change(this.value);"> ???<option value="1" selected="selected">中国</option> ???<option value="2">美国</option> ???<option value="3">日本</option></select><select name="second" id="second" size="4"></select><script type="text/javascript"> ???// 定义了XMLHttpRequest对象 ???var xmlrequest; ???// 完成XMLHttpRequest对象的初始化 ???function createXMLHttpRequest() ???{ ??????if(window.XMLHttpRequest) ??????{ ??????????// DOM 2浏览器 ??????????xmlrequest = new XMLHttpRequest(); ??????} ??????else if (window.ActiveXObject) ??????{ ??????????// IE浏览器 ??????????try ??????????{ ?????????????xmlrequest = new ActiveXObject("Msxml2.XMLHTTP"); ??????????} ??????????catch (e) ??????????{ ?????????????try ?????????????{ ?????????????????xmlrequest = new ActiveXObject("Microsoft.XMLHTTP"); ?????????????} ?????????????catch (e) ?????????????{ ?????????????} ??????????} ??????} ???} ???// 事件处理函数，当下拉列表选择改变时，触发该事件 ???function change(id) ???{ ??????// 初始化XMLHttpRequest对象 ??????createXMLHttpRequest(); ??????// 设置请求响应的URL ??????var uri = "second.jsp?id=" + id; ??????// 设置处理响应的回调函数 ??????xmlrequest.onreadystatechange = processResponse; ??????// 打开与服务器响应地址的连接 ??????xmlrequest.open("GET", uri, true); ??????// 发送请求 ??????xmlrequest.send(null); ???} ???// 定义处理响应的回调函数 ???function processResponse() ???{ ??????//响应完成且响应正常 ??????if (xmlrequest.readyState == 4) ??????{ ??????????if (xmlrequest.status == 200) ??????????{ ?????????????// 将服务器响应以$符号分隔成字符串数组 ?????????????var cityList = xmlrequest.responseText.split("$"); ?????????????// 获取用于显示菜单的下拉列表 ?????????????var displaySelect = document.getElementById("second"); ?????????????// 将目标下拉列表清空 ?????????????displaySelect.innerHTML = null; ?????????????// 以字符串数组的每个元素创建option， ?????????????// 并将这些选项添加到下拉列表中 ?????????????for (var i = 0 ; i < cityList.length ; i++) ?????????????{ ?????????????????// 创建一个<option.../>元素 ?????????????????var op = document.createElement("option"); ?????????????????op.innerHTML = cityList[i]; ?????????????????// 将新的选项添加到列表框的最后 ?????????????????displaySelect.appendChild(op); ?????????????} ??????????} ??????????else ??????????{ ?????????????//页面不正常 ?????????????window.alert("您所请求的页面有异常。"); ??????????} ??????} ???}// 指定页面加载完成后指定change(id)函数document.body.onload = change(document.getElementById("first").value);</script></body></html>项目概况：
在浏览器中浏览该页面，并改变左边下拉列表的选中项，将看到下图效果：
但是POST请求的适应性更广，可使用更大的请求参数，而且POST请求的请求参数通常不能直接看到。因此在使用Ajax发送请求时，尽量采用POST方式而不是GET方式发送请求。发送POST请求通常需要如下三个步骤：
- 使用open方法打开连接时，指定使用POST方式发送请求。
- 设置正确的请求头，POST请求通常应设置Content-Type请求头。
- 发送请求，把请求参数转为查询字符串，将该字符串作为send（）方法的参数。
对于上面的应用，同样可以采用POST方式来发送请求，只需要改一个请求的发送方法，如下所示：
// 事件处理函数，当下拉列表选择改变时，触发该事件 ????????function change(id) ????????{ ??????????????????// 初始化XMLHttpRequest对象 ?????????????????createXMLHttpRequest(); ??????????????????// 设置请求响应的URL ??????????????????var uri = "second.jsp"; ??????????????????// 设置处理响应的回调函数 ??????????????????xmlrequest.onreadystatechange = processResponse; ??????????????????// 设置以POST方式发送请求，并打开连接 ??????????????????xmlrequest.open("POST", uri, true); ??????????????????// 设置POST请求的请求头 ??????????????????xmlrequest.setRequestHeader("Content-Type" ?, "application/x-www-form-urlencoded"); ??????????????????// 发送请求 ??????????????????xmlrequest.send("id="+id); ????????}
// 事件处理函数，当下拉列表选择改变时，触发该事件其余的部分则无须改变，应用的执行效果与采用GET方式发送请求的效果完全一样。事实上，即使采用POST方式发送请求，一样可以将请求参数附加在请求的URL之后。如果send方法没有请求参数，应传入null，因为有些浏览器规定了send方法必须传入参数。代码如下：
????????function change(id) ????????{ ??????????????????// 初始化XMLHttpRequest对象 ??????????????????createXMLHttpRequest(); ??????????????????// 设置请求响应的URL ??????????????????var uri = "second.jsp?id="+id; ??????????????????// 设置处理响应的回调函数 ??????????????????xmlrequest.onreadystatechange = processResponse; ??????????????????// 设置以POST方式发送请求，并打开连接 ??????????????????xmlrequest.open("POST", uri, true); ??????????????????// 设置POST请求的请求头 ??????????????????xmlrequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ??????????????????// 发送请求 ??????????????????xmlrequest.send(null); ????????}Ajax发送GET和POST请求案例
原文地址：http://www.cnblogs.com/zhouyeqin/p/7452270.html