DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> iframe創建智能表單
iframe創建智能表單
編輯:關於JavaScript     

16.5  使用iframe創建智能表單

使用XMLHttpRequest對象實現Ajax功能的好處在於XMLHttpRequest對象使用簡單。只需創建一個XMLHttpRequest對象,然後發送請求並等待服務器的響應。不幸的是,使用JavaScript對象具有一個弊端,即浏覽器並不會在其歷史記錄中保存由XMLHttpRequest對象發起的HTTP請求。因此,實際上XMLHttpRequest對象使得浏覽器的Back按鈕功能失效了。

相關文章:XMLHttpRequest創建智能表單

實現智能表單的第二個解決方案就是使用一項早期的Ajax技術,即使用隱藏框架(frame)或隱藏內嵌框架(iframe)來實現客戶端/服務器之間的通信。為了正確地實現Ajax功能,必須使用兩個框架頁,其中,一個框架頁必須是隱藏的,另一個框架頁則必須是可見的。

注意:

當使用iframe來實現Ajax技術時,包含iframe的頁面必須是可見的。

隱藏框架技術實現Ajax通常由4個過程組成。第一步是由用戶的某種行為引發了一個對隱藏框架的請求。這包括用戶單擊了在可見框架頁中的超鏈接,或者由用戶的其他交互行為所引發。通常情況下,對隱藏框架頁的請求僅僅是將隱藏框架頁重定向到一個服務器上指定的服務端程序。對隱藏框架頁的重定向將自動觸發第二個過程:即向服務器發送請求。

在服務器程序完成了對請求的處理之後,將發生第三個過程:即服務器將響應發送回隱藏框架頁。服務器端的響應是一個Web頁面,該頁面將被發送給隱藏框架。當來自服務器的響應被完全接收後,隱藏框架中的Web頁面將發起與可見框架頁的聯系,並告知可見框架,服務器的響應已經成功。這就是第四個過程,該過程通常在隱藏框架的window.onload事件處理器中完成。

這一小節中的例子將基於前一小節中所創建的程序。但不同的是,我們將通過隱藏框架來實現浏覽器與服務器之間的通信。在編寫代碼之前,我們先來討論一下從服務器將返回什麼樣的數據。

注意:

下面的例子並不適用於Safari浏覽器,Safari浏覽器並不會在其歷史記錄中保存iframe內嵌框架的浏覽歷史。

服務器將如何響應請求

當我們使用XMLHttpRequest對象從服務器獲取數據時,在服務器的響應中僅需要包含很少的關鍵字。盡管所包含的關鍵字可能有所不同,但是服務器的響應必須由以下兩部分組成:

●       第一是必須包含響應的數據,而且該數據必須是HTML格式。

●       第二是當iframe接收到HTML形式的響應時,必須有一個機制通知父框架頁中的文檔。

記住這兩個組成部分之後,下面我們就來構造服務器響應的HTML頁面。服務器的響應將是一個HTML文件,該HTML文件具有如下的結構:

<html>

<head>

<title>Returned Data</title>

</head>

<body>

<script type="text/javascript">

//more code here

</script>

</body>

</html>

上面的HTML頁面非常簡單,在頁面文檔中僅包含一個<script/>元素。位於腳本塊中的JavaScript代碼將由服務器端的PHP程序生成,在這段腳本中,將調用位於可見框架頁中的函數checkUsername_callBack()或者checkEmail_callBack(),並將available或者not available作為參數傳遞給相應的函數。例如,下面的HTML代碼

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved