網站制作一條龍服務_網站百度排名優化推廣(seo)服務_【鳳凰網絡】

當前位置: 網站首頁 > 網站建設教程 >

使用Ajax實現頁面無刷新詳細方法

在Ajax中所以說的Ajax引擎實際上說的就是Ajax的核心對象XMLHttpRequest對象。

 

Ajax核心對象的方法和屬性

 
XMLHttpRequest對象的方法:
 

方法

描述

Open(String method,String URL,boolean asynch)

建立對服務器的調用,其中參數一表示HTTP協議調用的方法,URL表示調用的服務器的地址,asynch表示是否采用異步方式

Send(content)

先服務器發出請求,如果采取異步方式,該方法會立即執行

 
XMLHttpRequest對象的屬性:
 

屬性

描述

Onreadystatechange

請求狀態改變的事件觸發器readyState變化時會調用此方法)

readyState

請求狀態  0表示未初始化 1表示open方法調用成功  2表示服務器已經應答客戶端的請求  3表示交互中  4表示數據接收完成

responseText

服務器返回的文本內容

responseXML

服務器返回的兼容的DOMXML內容

Status

服務器返回的狀態碼200 表示成功404表示未找到

 
使用Ajax對象實現無刷新只編寫用戶自定義的Javascript腳本來實現Ajax的無刷新。
 

要實現Ajax無刷新也需要以下幾步:

 

· 首先取得文本框中的內容;由于不是在jQuery環境下,所以此時只能用DOM的方式取出節點;

· 創建XMLHttpRequest對象,該步驟是最為復雜的,需要針對不同的瀏覽器建立不同的對象;

· 注冊回調函數,當請求狀態改變時調用該函數;

· 設置與服務器的連接信息;
· 發送數據
· 創建回調函數,處理服務器返回的數據,將返回的數據動態地顯示在JSP頁面上。

 

針對于第一步,由于是在DOM下,所以要用Javascript取得文本框中的內容,如下:

// 使用DOM的方式獲取文本框中的值

    var userName = document.getElementById("uname").value;

針對于第二步,由于瀏覽器之間的差異,所以要分別為不同瀏覽器創建Ajax核心對象,如下:

// 創建XHR對象

    if (window.XMLHttpRequest)

    {

       // 針對FirefoxOperaSafariIE7.0 IE8.0

       var xmlHttp = new XMLHttpRequest();

      

       // 針對某些特定版本的Mozilla瀏覽器Bug進行修復

       if (xmlHttp.overrideMimeType)

       {

           xmlHttp.overrideMimeType("text/xml");

       }

    }

    else if (window.ActiveXObject)

    {

       // 針對于IE6.0 IE5.0及以下版本

       // 可以創建XMLHttpRequest對象的控件名稱,保存在一個js數組中

       var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];

      

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

       {

           try

           {

              // 取出一個控件進行創建,如果創建成功就終止循環

              xmlHttp = new ActiveXObject(activexName[i]);

              break;

           }

           catch (e)

           {

             

           }

       }

}

針對于第三步,當Ajax核心對象的請求狀態發生改變時要調用回調函數,如下:

xmlHttp.onreadystatechange = callback;

針對于第四步,就是建立與服務器端的連接,準備與服務器進行交互,如下:

xmlHttp.open("GET","TestServlet?uname=" + userName,true);

針對于第五步,就是將準備好的數據發送給服務器端,如下:

xmlHttp.send(null);

針對于第六步,創建回調函數,處理服務器端返回的數據,如下:

function callback()

    {

       if (xmlHttp.readyState == 4)

       {

           if (xmlHttp.status == 200)

           {

              var responseText = xmlHttp.responseText;

              // 將數據顯示在DIV

              var divNode = document.getElementById("result");

              divNode.innerHTML = responseText;

           }

       }

}

 

以上就是一個完整的以Ajax的方式,不依賴于任何框架、庫來實現的Ajax無刷新。

 <!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ajax實現自動刷新</title>
</head>
<body onLoad="Autofresh()">
<p>現在的時間是:<span id="currenttime"></span></p>
  <script>
    var xmlobj;
    var count=0;
    function createXMLHttpRequest(){
      if(window.ActiveXObject){
        xmlobj=new ActiveXObject("Microsoft.XMLHTTP");
      }
      else if(window.XMLHttpRequest){
        xmlobj=new XMLHttpRequest();
      }
    }
    function Autofresh(){
      createXMLHttpRequest();   
       count=count+1;   
      xmlobj.open("GET","currenttime.php?count="+count,true);
      xmlobj.onreadystatechange=doAjax;
      xmlobj.send("r="+Math.random());//使用隨機數處理緩存
    }
    function doAjax(){
      if(xmlobj.readyState==4 && xmlobj.status==200){
        var time_span=document.getElementById('currenttime');
        time_span.innerHTML=xmlobj.responseText;
        setTimeout("Autofresh()",2000);
      }
    }
  </script>
</body>
</html>

【使用Ajax實現頁面無刷新詳細方法熱度:128】 【更多網站建設教程
Copyright © 2002-2027 web-phoenix.net 【鳳凰網絡】 版權所有 All Rights Reserved.
鳳凰網絡:提供優質的網站制作一條龍服務,并通過百度網站排名優化推廣(seo)服務,使seo優化后的網站,獲得快速網站關鍵詞排名提升到首頁的效果!
2017年永久平特肖公式 麻将来了都是机器人 湖北十一选五开奖查询 广西快十开奖结果查询 全国最大彩票论坛 闲来麻将下载安卓版 福彩3d最准双飞 好运彩彩票网app 北京pk10单吊一码预测 白山大嘴棋牌官方下载 南京麻将和哪里麻将一样 江西闲来麻将苹果版 网络捕鱼游戏开发商 吉林体育彩票十一选五 河南快3官网版下载安装 黑龙江30选七开奖号 七星彩彩票开奖查询