在HTML网页中巧用URL
http://www.cnbruce.com/blog/showlog.asp?cat_id=5&log_id=657
首先，先放出一個地址給大家測試
http://cnbruce.com/test/htmlpro/?name=cnbruce&email=cnbruce@126.com
1，時下流行的（可能是吧，因為最近問的人比較多）就是沒有任何文件名的URL地址。比如htmlpro/?其實這和服務器設置的默認文件名有關，比如index.htm，index.html，index.asp等等，不信你試試我朋友的一個（asp的）。
http://www.windsn.com/blog/?viewType=byCate&cateID=3
2，本處的文件為index.html，同時后面帶有參數，頁面效果如同ASP一般提取信息內容。
如下是轉載的文章（作者劉筱）可以說明些東西
經常上網的朋友肯定對“?http://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的主頁空間建立了一個相當不錯的動態圖片查看器
所以，各位，實踐下咯。
總結
以上是生活随笔為你收集整理的在HTML网页中巧用URL的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： php几个预定义变量$_SERVER['
- 下一篇： 用Visual C#创建Windows服