AJAX 示例：xml数据类型返回

servlet：

package ajaxtest;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.*;
import com.common.CityBo;

public class SelectServlet extends HttpServlet {
    private static final String CONTENT_TYPE = "text/xml; charset=utf-8";

    //Initialize global variables
    public void init() throws ServletException {
    }

    //Process the HTTP Get request
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws
            ServletException, IOException {
        System.out.println("--> selectListServlet");
        response.setContentType(CONTENT_TYPE);
        PrintWriter out = response.getWriter();
        String provinceId=request.getParameter("province");
        String sql="select * from city where provinceid="+provinceId;
        CityBo bo=new CityBo();
        List list=bo.selectCityList(sql);

        StringBuffer buffer=new StringBuffer("<?xml version=\"1.0\" encoding=\"utf-8\" ?><result>");
        for(int i=0;i<list.size();i++){
            buffer.append("<cityname cid='"+((String[])list.get(i))[0]+"'>");
            buffer.append(((String[])list.get(i))[1]);
            buffer.append("</cityname>");
        }
        buffer.append("</result>");
        System.out.println(buffer.toString());
        out.print(buffer.toString());
        out.close();

    }

    //Process the HTTP Post request
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws
            ServletException, IOException {
        doGet(request, response);
    }

    //Clean up resources
    public void destroy() {
    }
}

jsp：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>selectList</title>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=UTF-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
<script type="text/javascript">

//创建XMLHttpRequestc对象
var  xmlHttp=false;

function createXMLHttpRequest(){
  if(window.ActiveXObject){//IE浏览器
    try{
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
      try{
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }catch(e){}
    }
  }else if(window.XMLHttpRequest) {//其他浏览器：如mozilla 的 fireFox 或者 netscape 7
    xmlHttp=new XMLHttpRequest();
    if(xmlHttp.overrideMimeType) {
      xmlHttp.overrideMimeType("text/html");
    }
  }
}

function processResponse(){
  if(xmlHttp.readyState==4){
    if(xmlHttp.status==200){
      updateList();
    }
  }
}

function updateList(){
  clearList();
  var city=document.getElementById("city");
  var text = xmlHttp.responseText; 
  var xD=xmlHttp.responseXML;   
  if(xD){   
    xD.loadXML(text);   
  }else{   
    var oParser = new DOMParser();   
    xD= oParser.parseFromString(text,"text/xml");   
    //alert(xD.getElementsByTagName("a"));   
  } 
  var res=xD.getElementsByTagName("cityname");
  var option=null;

  for(i=0;i<res.length;i++){
    option=document.createElement("option");
    option.appendChild(document.createTextNode(res[i].firstChild.nodeValue));
    option.setAttribute("value",res[i].getAttribute('cid'));
    city.appendChild(option);
  }
}

function clearList(){
  var city=document.getElementById("city");
  while(city.childNodes.length > 0){
    city.removeChild(city.childNodes[0]);
  }
}
function sendHttp(url){
  createXMLHttpRequest();
  xmlHttp.open("get",url,true);
  xmlHttp.onreadystatechange=processResponse;
  xmlHttp.send(null);
}

function getCity(obj){
  if(obj.value==""){
    alert("请选所居住地省份。");
  }else{
    sendHttp("selectservlet?province="+obj.value);
  }
}
</script>
</head>
<body>
<form action="/web/loginservlet" method="POST" name="f1">

<table align="center">
<th>请输入注册信息：</th>
<tr>
  <td>用户名：</td>
  <td><input type="text" name="username" /></td><!--    onblur="selectUserName()"  -->
</tr>
<tr>
  <td>密&nbsp;&nbsp;码：</td>
  <td><input type="password" name="pass" /></td>
</tr>
<tr>
  <td>确认密码：</td>
  <td><input type="password" name="repass"/></td>
</tr>
<tr>
  <td>昵称：</td>
  <td><input type="text" name="nickname" /></td>
</tr>
<tr>
  <td>真实姓名：</td>
  <td><input type="text" name="realityname"/></td>
</tr>
<tr>
<td>居住地址：</td>
<td>
<select name="province" id="province" style="width:80" onchange="getCity(this)">
<option value="">请选择</option>
<option value="1">吉林省</option>
<option value="2">辽宁省</option>
<option value="3">黑龙江省</option>
<option value="4">广东省</option>
<option value="5">aaaa</option>
</select>
省&nbsp;&nbsp;&nbsp;
<select name="city" id="city" style="width:80">
</select>
市
</td>
</tr>
<tr>
  <td><input type="submit" value="提交" /></td>
  <td><input type="reset" value="重置"/></td>
</tr>
</table>


</form>
</body>
</html>

AJAX 示例：xml数据类型返回

猜你喜欢