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>");
  }
 }
 %>