Copyright © 2002-2027 web-phoenix.net 【鳳凰網絡】 版權所有 All Rights Reserved.
鳳凰網絡:提供優質的網站制作一條龍服務,并通過百度網站排名優化推廣(seo)服務,使seo優化后的網站,獲得快速網站關鍵詞排名提升到首頁的效果!
鳳凰網絡:提供優質的網站制作一條龍服務,并通過百度網站排名優化推廣(seo)服務,使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 |
服務器返回的兼容的DOM的XML內容 |
|
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)
{
// 針對Firefox、Opera、Safari、IE7.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】 【更多網站建設教程】