html靜態網頁動態獲取用戶信息

在HTML網頁中巧用URL:

首先,先放出一個地址給大家測試

cnbruce.com/test/htmlpro/?name=cnbruce&[email protected]

1,時下流行的(可能是吧,因爲最近問的人比較多)就是沒有任何文件名的URL地址。比如htmlpro/?其實這和服務器設置的默認文件名有關,比如index.htm,index.html,index.asp等等,不信你試試我朋友的一個(asp的)。

www.windsn.com/blog/?viewType=byCate&cateID=3

2,本處的文件爲index.html,同時後面帶有參數,頁面效果如同ASP一般提取信息內容。

如下是轉載的文章(作者劉筱)可以說明些東西

經常上網的朋友肯定對“ host/***.asp?arg1=*&arg2=* ”之類的URL(即網址)不會陌生。這類網址的作用就是通過在URL後面附加信息內容來傳遞相關信息給遠程Web服務器,並在Web服務器進行適當處理後將結果返回給客戶端,從而達到網頁交互的目的,並實現網頁內容動態化。(注意: URL與信息內容之間通過“?”連接,各內容字段之間則通過字符“&”來分隔,每個字段的名稱/取值表示爲“名稱=取值”形式。)但通過這種方式實現的動態網頁均需要服務器端編程技術的支持,最近筆者在製作個人網站時利用瀏覽器支持的DHTML和XML技術,經過不斷嘗試,在免費主頁空間通過這種方式實現動態網頁。

一、原理分析

當瀏覽器通過http://remotehost/program?querystring 這種方式請求Web服務器時,Web服務器將對請求地址的URL進行解析,把“?”後面的querystring字符串存入服務器特定環境變量,然後調用服務器端編程執行環境,如ASP(Activex Server Page)等對請求program文件進行處理。

具體調用何種編程執行環境依據服務器的設置而定,如果請求的文檔是asp類型的文件,則調用ASP,如是aspx類型文件,則調用ASP.NET。在program文件中則可以通過一定方法來讀取環境變量,如asp文件就可以通過Reques.Querystring數據集合來讀取環境變量。編程執行環境處理完畢後將結果返回給Web服務器,Web服務器再將結果返回給瀏覽器,從而達到網頁內容動態化的目的。

通過上述分析我們可以知道,如果使用
http://remotehost/*.htm?querystring 方式向Web服務器發送請求時,Web服務器將向瀏覽器直接返回請求的HTML網頁。這時我們就可以在網頁中利用Location.href屬性獲得附加了信息內容的URL串,經過適當處理後就可以得到所附加的信息內容字段名稱及其取值,再通過瀏覽器支持的DHTML特性進行處理,就可以實現網頁內容動態化,從而在不支持服務器端編程技術的免費主頁空間上達到網頁交互的目的。

我們也可以看出,通過這種方式達到網頁動態交互的目的即使是在瀏覽器中實現也仍然擺脫不了Web服務器的支持,否則瀏覽器將把“?querystring”作爲請求的URL的一部分,從而出現網頁不能查看的錯誤提示。

二、應用示例

---下面給出了一個帶有詳細註釋的具體示例源代碼。注意: querystring.js是一個實用程序,它可以在網頁中直接引用,然後在網頁中使用Request[“名稱”]即可獲取用戶輸入的有關信息內容。

1.querystring.js源代碼
function QueryString()
{//構造參數對象並初始化
var name,value,i;
var str=location.href;//獲得瀏覽器地址欄URL串
var num=str.indexOf("?")
str=str.substr(num+1);//截取“?”後面的參數串
var arrtmp=str.split("&");//將各參數分離形成參數數組
for(i=0;i < arrtmp.length;i++){
num=arrtmp[i].indexOf("=");
if(num>0){
name=arrtmp[i].substring(0,num);//取得參數名稱
value=arrtmp[i].substr(num+1);//取得參數值
this[name]=value;//定義對象屬性並初始化
}
}
}
var Request=new QueryString();//使用new運算符創建參數對象實例

2.Sample.htm源代碼
<Html>
<Head>
<Meta http-equiv="Content-Type"content="text/html; charset=gb2312" >
<Title>示例</Title>
<script src="Querystring.js"></script>
</Head >
<Body>
<script>
var newElement=document.createElement("div");//創建div對象
var str="<u>"+Request["name"]+"</u>,歡迎光臨!<br>您的E-mail是:<u>"+Request["email"]+"</u>";//利用實例["字段名稱"]獲取參數內容
newElement.innerHTML=str;
document.body.appendChild(newElement);//向文檔添加div對象
</script>
</Body>
</Html>

如果對該示例應用DHTML與XML技術進行擴充,將會取得不可思議的效果。該作者就是通過這種途徑在只支持純HTML的主頁空間建立了一個相當不錯的動態圖片查看器  
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章