AJAX在PHP中的簡單使用

來源:互聯網
上載者:User



[ AJAX介紹 ]

Ajax是使用用戶端指令碼與Web伺服器交換資料的Web應用開發方法。Web頁面不用打斷互動流程進行重新加裁,就可以動態地更新。使用Ajax,使用者可以建立接近本地案頭應用的直接、高可用、更豐富、更動態Web使用者介面。

非同步Javascrīpt和XML(AJAX)不是什麼新技術,而是使用幾種現有技術——包括階層式樣式表(CSS)、Javascrīpt、XHTML、XML和可擴充樣式語言轉換(XSLT),開發外觀及操作類似案頭軟體的Web應用軟體。


[ AJAX執行原理 ]

一個Ajax互動從一個稱為XMLHttpRequest的Javascrīpt對象開始。如同名字所暗示的,它允許一個用戶端指令碼來執行HTTP請求,並且將會解析一個XML格式的伺服器響應。Ajax處理過程中的第一步是建立一個XMLHttpRequest執行個體。使用HTTP方法(GET或POST)來處理請求,並將目標URL設定到XMLHttpRequest對象上。

當你發送HTTP請求,你不希望瀏覽器掛起並等待伺服器的響應,取而代之的是,你希望通過頁面繼續響應使用者的介面互動,並在伺服器響應真正到達後處理它們。要完成它,你可以向XMLHttpRequest註冊一個回呼函數,並非同步地派發XMLHttpRequest請求。控制權馬上就被返回到瀏覽器,當伺服器響應到達時,回呼函數將會被調用。


[ AJAX實際應用 ]


1. 初始化Ajax

Ajax實際上就是調用了XMLHttpRequest對象,那麼首先我們的就必須調用這個對象,我們構建一個初始化Ajax的函數:

/**
* 初始化一個xmlhttp對象
*/
function InitAjax()
{
var ajax=false;
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
ajax = false;
}
}
if (!ajax && typeof XMLHttpRequest!=''undefined'') {
ajax = new XMLHttpRequest();
}
return ajax;
}

你也許會說,這個代碼因為要調用XMLHTTP組件,是不是只有IE瀏覽器能使,不是的經我實驗,Firefox也是能使用的。
那麼我們在執行任何Ajax操作之前,都必須先調用我們的InitAjax()函數來執行個體化一個Ajax對象。


2. 使用Get方式

現在我們第一步來執行一個Get請求,加入我們需要擷取 /show.php?id=1的資料,那麼我們應該怎麼做呢?
假設有一個連結:<a href="/show.php?id=1">新聞1</a>,我點該連結的時候,不想任何重新整理就能夠看到連結的內容,那麼我們該怎麼做呢?

//將連結改為:
<a href="#" ōnClick="getNews(1)">新聞1</a>

//並且設定一個接收新聞的層,並且設定為不顯示:
<div id="show_news"></div>

同時構造相應的Javascrīpt函數:

function getNews(newsID)
{
//如果沒有把參數newsID傳進來
if (typeof(newsID) == ''undefined'')
{
return false;
}
//需要進行Ajax的URL地址
var url = "/show.php?id="+ newsID;

//擷取新聞顯示層的位置
var show = document.getElementById("show_news");

//執行個體化Ajax對象
var ajax = InitAjax();

//使用Get方式進行請求
ajax.open("GET", url, true);

//擷取執行狀態
ajax.onreadystatechange = function() {
//如果執行是狀態正常,
<
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.