如何使用AJAX實(shí)現(xiàn)無刷新數(shù)據(jù)分頁

這篇文章將為大家詳細(xì)講解有關(guān)如何使用AJAX實(shí)現(xiàn)無刷新數(shù)據(jù)分頁，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計、成都網(wǎng)站制作、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)榆樹,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

一、實(shí)現(xiàn)過程

注意：一下的內(nèi)容都是在服務(wù)器內(nèi)使用的。

首先要在服務(wù)器的路徑下建立幾個文件，比如，page1.txt,page2.txt,page3.txt。

每個文件中放入數(shù)組，如下：

復(fù)制代碼 代碼如下:

[{user:'blue',pass:'123'},{user:'aaa',pass:'dsfaa'},{user:'Ares',pass:'12346'}]

圖一  頁面一的內(nèi)容

前臺HTML代碼：

1
2
3

封裝的AJAX ，JavaScript代碼：

/*
AJAX封裝函數(shù)
url：系統(tǒng)要讀取文件的地址
fnSucc：一個函數(shù)，文件取過來，加載完會調(diào)用
*/
function ajax(url, fnSucc, fnFaild)
{
  //1.創(chuàng)建Ajax對象
  var oAjax=null;

  if(window.XMLHttpRequest)
  {
    oAjax=new XMLHttpRequest();
  }
  else
  {
    oAjax=new ActiveXObject("Microsoft.XMLHTTP");
  }

  //2.連接服務(wù)器
  oAjax.open('GET', url, true);

  //3.發(fā)送請求
  oAjax.send();

  //4.接收服務(wù)器的返回
  oAjax.onreadystatechange=function ()
  {
    if(oAjax.readyState==4) //完成
    {
      if(oAjax.status==200)  //成功
      {
        fnSucc(oAjax.responseText);
      }
      else
      {
        if(fnFaild)
          fnFaild(oAjax.status);
      }
    }
  };
}

最終實(shí)現(xiàn)效果：

 圖二  展示效果

什么是ajax

ajax是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)，可以通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，使網(wǎng)頁實(shí)現(xiàn)異步更新。

關(guān)于“如何使用AJAX實(shí)現(xiàn)無刷新數(shù)據(jù)分頁”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

當(dāng)前名稱：如何使用AJAX實(shí)現(xiàn)無刷新數(shù)據(jù)分頁
本文來源：http://m.jiaotiyi.com/article/gejeig.html