在HTML网页中巧用URL
日期：2013-09-25 浏览次数：20979 次
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的主页空间建立了一个相当不错的动态图片查看器
