一個用於分頁的AJAX執行個體

現在AJAX越來越多的被用於應用,前此日子公司讓瞭解一下,以便在日後需要時用,於是就在網上找了些資料,但是沒有發現有什麼在開發中的執行個體,現在把我寫的一個簡單的例子貼出來供大家參考,希望能有所協助.

程式的環境 hibernate+spring+sturts

在JSP中的用於分頁的代碼.

 <script language="javascript">
 var http_request = false;
 function send_request(url) {//初始化、指定處理函數、發送請求的函數
  http_request = false;
  //開始初始化XMLHttpRequest對象
  if(window.XMLHttpRequest) { //Mozilla 瀏覽器
   http_request = new XMLHttpRequest();
   if (http_request.overrideMimeType) {//設定MiME類別
    http_request.overrideMimeType('text/xml');
   }
  }
  else if (window.ActiveXObject) { // IE瀏覽器
   try {
    http_request = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
    try {
     http_request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
   }
  }
  if (!http_request) { // 異常，建立對象執行個體失敗
   window.alert("不能建立XMLHttpRequest對象執行個體.");
   return false;
  }
  http_request.onreadystatechange = processRequest;
  // 確定發送請求的方式和URL以及是否同步執行下段代碼
  http_request.open("post", url, true);
  http_request.send(null);
 }
 // 處理返回資訊的函數
    function processRequest() {
        if (http_request.readyState == 4) { // 判斷對象狀態
            if (http_request.status == 200) { // 資訊已經成功返回，開始處理資訊
          
             
                 document.getElementById('dd').innerHTML = http_request.responseText;
            } else { //頁面不正常
                alert("您所請求的頁面有異常。");
            }
        }
    }
 function userCheck(username) {
 send_request('<html:rewrite page=""/>/ology/index.do?bar=<bean:write name="barname"/>&ajx=1&page='+username);
 }
</script>

 <td id="dd" width="78%" height="493" valign="top">
          <table width="100%"  border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="574">&nbsp;</td>
            </tr>
             <logic:notEmpty name="bar" property="content">
            <tr>
              <td><table width="100%"  border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td height="4"></td>
                  </tr>
               
                 <logic:iterate id="sub" name="bar" property="content">
                  <tr>
                    <td>
                    <table width="98%"  border="0" align="center" cellpadding="0" cellspacing="0">
                        <tr>
                          <td width="16%" align="center">
                            <logic:equal name="sub" property="infoPicType" value="0">
                    <img src="<html:rewrite page=""/><bean:write name="sub" property="infoMiniPic"/>" width="82" height="82" border="0">
                   </logic:equal>
                    <logic:equal name="sub" property="infoPicType" value="1">
                    <img src="<bean:write name="seb" property="infoMiniPic"/>" width="82" height="82" border="0">
                   </logic:equal>
                        
                          </td>
                          <td width="84%"><span class="blue12px">
                          <bean:write name="sub" property="infoTitle"/></span><span class="f12DRed">[<a href=
                           <logic:equal name="sub" property="isRelink" value="0">
                      "<html:rewrite page=""/>/ology/detail.do?infoId=<bean:write name="sub" property="infoId"/>"
                      </logic:equal>
                      <logic:equal name="sub" property="isRelink" value="1">
                     "<bean:write name="sub" property="relinkUrl"/>"
                     </logic:equal>
                           target="_blank" class="link_blue23_12">全文</a>]</span></td>
                        </tr>
                    </table>
                    </td>
                  </tr>
                  <tr>
                    <td width="10"></td>
                  </tr>
                  <tr>
                    <td>&nbsp;</td>
                  </tr>
                  </logic:iterate>
              </table></td>
            </tr>

            <tr>
              <td align="center"><img src="<html:rewrite page=""/>/appweb/ology/images/line001.gif" width="566" height="15"></td>
            </tr>
            <tr>
              <td><div align="center">
              <span class="black12px">分頁 </span>
                <a href="javascript:userCheck('1');" class="link_blue23_12">首頁</a> <span class="link_darkblue_12">
                <a href="javascript:userCheck('<bean:write name="bar" property="page.previousPage"/>');" class="link_blue23_12">前頁</a> </span><span class="link_blue23_12">
                <a href="javascript:userCheck('<bean:write name="bar" property="page.nextPage"/>');" class="link_blue23_12">後頁</a></span><span class="link_darkblue_12">
                <a href="javascript:userCheck('<bean:write name="bar" property="page.totalPage"/>');" class="link_blue23_12"> 尾頁</a> </span>
                <span class="black12px"><bean:write name="bar" property="page.currentPage"/>/<bean:write name="bar" property="page.totalPage"/>頁</span>
                <span class="black12px">20條/頁</span> <span class="text_black_12px"></div></td>
            </tr>
            </logic:notEmpty>
            <tr>
              <td>&nbsp;</td>
            </tr>
          </table>
          </td>

當然這不是一個完整的JSP頁面,我只是把分頁這一塊代碼給帖出來.

在分頁的連結中我們使用JS調用AJAX發送分頁請求,相信使用過sturts的都知道,我們調用了action,而他return 的就是一個頁面,反回來的頁面就會把上面JSP中的頁頁給替換掉,這也就完成了一個簡單的AJAX的請求.

當然這隻是一個最最簡單的應用了,如果你用不同的應用,歡迎你給我E-MAIL,大家一起探討.