AJAX三步走

ajax 简单 例子，共三步。

例子涉及到本地的数据库，故不能在你本地正常运行，但思路是对的

第一步：（通用） 把下面的代码写入一个ajax.js文件中，send_request()方法有5个参数，
1，提交的方法；
2，url，也可以通过它传递参数；
3，只是参数；
4，返回类型，text或xml；
5，回调函数的方法名称。
var http_request = false;

//send
function send_request(method,url,content,responseType,callback){
 http_request = false;
 if(window.XMLHttpRequest){
  http_request = new XMLHttpRequest();
  if(http_request.overrideMimeType){
   http_request.overrideMimeType("text/xml");   
  }
 }else if(window.ActiveXObject){
  try{
   http_request = new ActiveXObject("Msxm12.XMLHTTP");
  }catch (e){
   try{
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
   }catch (e){
    
   }
  }
 }
 if(!http_request){
  window.alert("E XMLHttpReqeust");
  return false;
 }
 if(responseType.toLowerCase() == "text"){
  //http_request.onreadystatechange = processTextResponse;
  http_request.onreadystatechange = callback;
 }else if(resposeType.toLowerCase() == "xml"){
  //http_request.onreadystatechange == processTextResponse;
  http_request.onreadystatechange = callback;
 }else{
  window.alert("E1");
  return false; 
 }
 
 if(method.toLowerCase() == "get"){
  http_request.open("GET",url,true);
 }else if(method.toLowerCase() == "post"){
  http_request.open("POST",url,true);
  http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
 }else{
  window.alert("E2");
 }
 http_request.send(content);
}

//Text
function processTextResponse(){
 if(http_request.readyState == 4){
  if(http_request.status == 200){
   document.form1.rs.value = http_request.responseText;
  }else{
   alert("E3");
  }
 }
}

//XMl
function processXMLRequest(){
 if(http_request.readyState == 4){
  if(http_request.status == 200){
   document.form1.rs.value = http_request.responseText;
  }else{
   alert("E4");
  }
 }
}

第二步：把此脚本放入页面（通用）

<script language="javascript">
 //取组下的3个clip
 function update(type,id) {
  var f = document.p;
  if("clip" == type){
    one.innerHTML = "　　正在处理请求的内容 <img src='/images/icon/loading.gif'></img>";
    send_request("GET","/common2/query.jsp?groupbyclip_id="+id,null,"text",processTextResponse_one);
  }
  var f = document.p;
  if("cpid" == type){
    one.innerHTML = "　　正在处理请求的内容 <img src='/images/icon/loading.gif'></img>";
    send_request("GET","/common2/query.jsp?cp_id="+id,null,"text",processTextResponse_one);
  }
 }

</script>

第三步：创建jsp处理页面，接受参数，处理，out.print()输出就可以了，回调函数会接收到打印出的内容（根据业务需求作相应的修改<%
 //根据省id获取城市列表
 if(request.getParameter("province_id") != null &&request.getParameter("province_id") != "-1"){
  ArrayList provinceList = new ArrayList();
  try{
   provinceList = Factory.db_city.queryByProvinceId(Integer.parseInt(request.getParameter("province_id")));
  }catch(Exception e){
   out.print("根据省查找city出错");
  }
  if(provinceList != null){
   out.println("<select name='city' id='city' onchange=\"update('city')\">");
   out.println("<option value='-1'>请选择城市</option>");
   for(int i=0;i<provinceList.size();i++){
    CityBean cityBean = (CityBean)provinceList.get(i);
    out.println("<option value="+cityBean.getCity_id()+">"+cityBean.getCity()+"</option>");           
   }
   out.print("</select>");
  }
 }
 
 //根据city_id查询区县
 if(request.getParameter("city_id") != null &&request.getParameter("city_id") != "-1"){
  ArrayList districtList = new ArrayList();
  try{
   districtList = Factory.db_district.queryByCityId(Integer.parseInt(request.getParameter("city_id")));
  }catch(Exception e){
   out.print("根据省查找district出错");
  }
  if(districtList != null){
   out.println("<select name='district' id='district'>");
   out.println("<option value='-1'>请选择区县</option>");
   for(int i=0;i<districtList.size();i++){
    DistrictBean districtBean = (DistrictBean)districtList.get(i);
    out.println("<option value="+districtBean.getDistrict_id()+">"+districtBean.getDistrict()+"</option>");           
   }
   out.print("</select>");
  }
 }
 %>