<body>
<select name="first" id="first" size="3" onchange="change(this.value);">
<option value="1" selected="selected">
中国
</option>
<option value="2">
美国
</option>
<option value="3">
小日本
</option>
</select>
<select id="second" size="3"></select><hr/>
<div id="output1"></div>
<div id="output2"></div>
<script type="text/javascript">
function change(id) {
var request = new XMLHttpRequest();
var url = "/Ajax/second.jsp?id=" + id;
request.open("POST", url, true);
//设置请求头
request.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//设置处理响应的回调函数
request.onreadystatechange = function processResponse() {
//测试XMLHttpRequest对象的处理状态readyState属性
//alert(request.readyState);
if (request.readyState == 4) {
if (request.status == 200 || request.status == 304) {
var headers = request.getAllResponseHeaders();
//alert("请求头的类型：" + typeof headers + "\n" + headers);
//在页面中输出所有请求头
document.getElementById("output1").innerHTML = headers;
document.getElementById("output2").innerHTML = request.responseText;
var cityList=request.responseText.split("$");
var displaySelect=document.getElementById("second");
displaySelect.innerHTML=null;
for(var i=0;i<cityList.length;i++){
var option=document.createElement("option");
option.innerHTML=cityList[i];
displaySelect.appendChild(option);
}
} else {
window.alert("你所请求的页面异常！");
}
}
}
request.send(null);
}
</script>
</body>
JSP页面嵌入的代码：
<%
int id=Integer.parseInt(request.getParameter("id"));
System.out.println(id);
switch(id){
case 1:
%>
上海$广州$北京
<%
break;
case 2:
%>
华盛顿$纽约$加州
<%
break;
case 3:
%>
东京$大阪$名古屋
<%
break;
}
%>4、XMLHttpRequest遵循的步骤：//上面的对GET方式的处理并不能保证高枕无忧，因为不同的浏览器可能采用不同的字符集编码GET请求参数，所以尽量用POST提交
7、发送XML请求
html代码：
<body>
<select name="first" id="first" style="width: 80px;" size="3" multiple="multiple">
<option value="1" >中国</option>
<option value="2">美国</option>
<option value="3" >日本</option>
</select>
<input type="button" value="发送请求" onclick="send();">
<select name="second" id="second" style="width: 100px;" size="6"></select>
<script type="text/javascript">
//定义创建XML文档的函数
function createXML(){
var xml="<countrys>";
var options=document.getElementById("first").childNodes;
var option=null;
for(var i=0;i<options.length;i++){
option=options[i];
if(option.selected){
xml+="<country>"+option.value+"<\/country>";
}
}
//结束xml文档的根节点
xml+="<\/countrys>";
return xml;
}
function send(){
var request=new XMLHttpRequest();
var url="/Ajax/xml.jsp";
request.open("POST",url,true);
request.onreadystatechange=function(){
//测试XMLHttpRequest对象的处理状态readyState属性
//alert(request.readyState);
if (request.readyState == 4) {
if (request.status == 200 || request.status == 304) {
var headers = request.getAllResponseHeaders();
//alert("请求头的类型：" + typeof headers + "\n" + headers);
//在页面中输出所有请求头
var cityList=request.responseText.split("$");
var displaySelect=document.getElementById("second");
displaySelect.innerHTML=null;
for(var i=0;i<cityList.length;i++){
var option=document.createElement("option");
option.innerHTML=cityList[i];
displaySelect.appendChild(option);
}
} else {
window.alert("你所请求的页面异常！");
}
}
}
request.send(createXML());
}
</script>
</body>
JSP嵌入的代码：
<%
//定义一个StringBuffer对象，用于请求参数
StringBuffer xmlBuffer = new StringBuffer();
String line = null;
//通过request对象获取输入流
BufferedReader reader = request.getReader();
while ((line = reader.readLine()) != null) {
xmlBuffer.append(line);
}
String xml = xmlBuffer.toString();
//dom4j解析xml字符串
Document xmlDoc = new XPPReader().read(new ByteArrayInputStream(xml
.getBytes()));
//获得countrys结点的所有子节点
List countryList = xmlDoc.getRootElement().elements();
//定义服务器响应结果
String result = "";
//遍历所有结点
for (Iterator it = countryList.iterator(); it.hasNext();) {
Element country = (Element) it.next();
if (country.getText().equals("1")) {
result += "$上海$广州$北京";
} else if (country.getText().equals("2")) {
result += "$华盛顿$纽约$硅谷";
} else if (country.getText().equals("3")) {
result += "$东京$大阪$名古屋";
}
}
//向客户端发送响应
out.println(result);
%>从上面的代码可以看出，发送的XML请求依然是POST请求，只是请求参数不再以param=value的形式发送，而是直接采用XML字符串作为参数。原文地址：http://blog.csdn.net/hellozpc/article/details/37830473
