Using URLs skillfully in HTML pages

Source: Internet
Author: User
Tags object execution html page variables return string
Web page first, let's give you an address to test

Http://cnbruce.com/test/htmlpro/?name=cnbruce&email=cnbruce@126.com

1, the current popular (probably, because recently asked more people) is not any file name of the URL address. Like htmlpro/? In fact, this is the default file name with the server settings, such as index.htm,index.html,index.asp and so on, do not believe you try one of my friends (ASP's).

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

2, the file for the index.html, at the same time with parameters, the page effect as an ASP general extract information content.

The following is a reprint of the article (author Liu Yan) can explain something


Friends who often surf the internet must be familiar with URLs such as "http://host/***.asp?arg1=*&arg2=*" (ie URLs). The function of this kind of web address is to pass the relevant information to the remote Web server by attaching the information content behind the URL, and return the result to the client after the Web server is properly processed, so as to achieve the purpose of web interaction and to realize the dynamic content of the Web page. (Note: The URL and the content of the message are passed "?" Connection, each content field is delimited by the character "&", and the name/value of each field is represented as the "name = value" form. However, the dynamic Web pages implemented in this way require the support of server-side programming technology, and the author recently made use of the DHTML and XML technology supported by browsers in making personal websites, and through constant attempts, dynamic Web pages were implemented in free home space.

First, the principle analysis

When the browser requests a Web server by http://remotehost/program?querystring this way, the Web server parses the URL of the request address and "?" The subsequent querystring string is stored in the server-specific environment variable, and then the server-side programming execution environment is invoked, such as ASP (Activex Server Page), to process the request program file.

What programming execution environment is specifically invoked depends on the settings of the server, and if the requested document is an ASP-type file, call ASP if it is an ASPX type file, and call asp.net. In the program file, you can read environment variables in a certain way, such as ASP files that can read environment variables by reques.querystring data sets. After the program execution environment is processed, the result is returned to the Web server, and the Web server returns the result to the browser, which achieves the purpose of the Web page content dynamic.

Through the above analysis, we can know that if you send a request to a Web server using the Http://remotehost/*.htm?querystring method, the Web server will return the requested HTML page directly to the browser. Then we can use the Location.href property in the Web page to get the URL string attached to the information content. After the appropriate processing can get the attached information Content field name and its value, and then through the browser-supported DHTML features to deal with the Web page content can be dynamic, so that not support the server-side programming technology Free homepage space to achieve the purpose of interactive Web pages.

We can also see that this way to achieve the purpose of web dynamic interaction even in the browser is still not able to get rid of the Web server support, otherwise the browser will "? QueryString" as part of the requested URL, so that the Web page can not see the error prompts.

second, the application of the example

---A concrete example source code with detailed annotations is given below. Note: Querystring.js is a utility that can be referenced directly in a Web page and then use request["name" in a Web page to get information about what the user has entered.

1.querystring.js Source Code


function QueryString ()
{///construct parameter object and initialize
var name,value,i;
Var str=location.href;//gets browser address bar URL string
var num=str.indexof ("?")
STR=STR.SUBSTR (num+1)//intercept "?" The argument string that follows
var arrtmp=str.split ("&")//separating parameters to form a parameter array
For (I=0;i < arrtmp.length;i++) {
Num=arrtmp[i].indexof ("=");
if (num>0) {
Name=arrtmp[i].substring (0,num);//Get parameter name
VALUE=ARRTMP[I].SUBSTR (num+1)//Get parameter value
this[name]=value;//defines the object properties and initializes the
}
}
}
var request=new querystring ();//Create a Parameter object instance using the new operator


2.sample.htm Source Code


<Html>
<Head>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<Title> Example </Title>
<script src= "Querystring.js" ></script>
<Body>
<script>
var newelement=document.createelement ("div");//Create Div Object
var str= "<u>" +request["name"]+ "</U> Welcome to!<br> your e-mail is:<u>" +request["email"]+ "</u >//Use instance [field name] to get parameter contents
NEWELEMENT.INNERHTML=STR;
Document.body.appendChild (newelement);//Add a Div object to the document
</script>
</Body>
</Html>



If you extend this example with DHTML and XML technology, you will get incredible results. This is the way the author built a pretty good dynamic picture viewer in a home page that only supports pure HTML.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

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.