Ajax 應用模板(動態載入列表框)

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page contentType="text/html; charset=UTF-8"%>

<head>

</head>

var XMLHttpReq;

//建立XMLHttpRequest物件

      if(window.XMLHttpRequest){ //Mozilla 瀏覽器
           xmlhttp = new XMLHttpRequest();
           if (xmlhttp.overrideMimeType){ //設定MiME類別
               xmlhttp.overrideMimeType('text/xml');
           }
      }else if (window.ActiveXObject){// IE瀏覽器
           try{

xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

}catch (e){
try{

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

                          }catch (e){ }
                }
      }

//傳送請求函式

     function sendRequest(url, data){ //初始化、指定處理函式、傳送請求的函式
       if (!xmlhttp){ //異常，建立物件例項失敗
        window.alert("不能建立XMLHttpRequest物件例項.");
        return false;
       }

       // 確定傳送請求的方式和URL以及是否同步執行下段程式碼
       xmlhttp.open("POST", url, true);
       xmlhttp.onreadystatechange = processRequest1; //根據Web伺服器應答，觸發該狀態改變事件
       xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
       xmlhttp.send("division=" + data); //傳送資訊到後臺程式
     }

//處理返回資訊函式

function processRequest(){

     if (xmlhttp.readyState == 4){ // 判斷物件狀態
          if (xmlhttp.status == 200) //正常返回資訊，狀態編號200
          { // 資訊已經成功返回，開始處理資訊

updateList();

          }else{ //頁面不正常
            alert("您所請求的頁面有異常。");
          }

}

//重新整理列表框函式

function refreshList(){

var sort = document.getElementById("sort").value;

if(sort == ""){

clearList();

return;

}

var url = "**?**="+**;

sendRequest(url);

}

//更新列表框中列表函式

function updateList(){

clearList();

var product = document.getElementById("product");

var results = XMLHttpReq.responseXML.getElementsByTagName("name");

var option = null;

for(var i=0;i<results.length;i++){

option = document.createElement("option");

option = appendChild(document.createTextNode(results[i]).firstChild.nodeValue));

product.appendChild(option);

}

//清楚列表框中原有選項的函式

function clearList(){

var product = document.getElementById("product");

while(product.childNodes.length > 0){

product.removeChild(product.childNodes[0]);

}

</script>

<table>

</select>

</select>

</table>

後臺:

//設定輸出資訊的格式,字元

response.setContentType("text/html; charset=UTF-8");

response.setHeader("Cache-Control","no-cache");

//建立輸出流物件

PrintWriter out = response.getWriter();

out.println("<response>");

--

out.println("<name>"+**+"</name>");

--

out.println("</response>");

out.close();

//

Ajax 應用模板(動態載入列表框)

相關文章