js+asp Create no Refresh news list

js| Refresh | no refresh

As shown in the image above the news list is not uncommon in the major sites, with a news list is not the only page, today we want to talk about the paging between the way. The traditional approach is to upload the page number as a URL parameter to the list page, where the program displays different content based on the parameters passed in, and there is a refresh between the two. However, many times the page in the news list only a small part of the layout of the page, the update of this small part of the content has to refresh the content of the entire page, some people protested, and then someone using XMLHTTP, Ajax and other technologies to implement a list without refreshing updates. Today we also want to implement a no Refresh update list, but do not use XMLHTTP, Ajax and other new technologies, only the traditional JavaScript and ASP language to implement.

First, the question of the proposed

company website to update, the front desk was finished yesterday, today by my set of procedures, figure 1 for the company News page news list, see it on the whim: as the Web site should have a bit of technical content to do, then today this list also to play without refreshing. To achieve only in the local update, in fact, with a floating frame (IFRAME) can also be done, but this page has a background picture and the pattern is not a rule, with a floating frame is difficult to achieve a unified background; XMLHTTP, AJAX? Unfortunately, these two also just touch a little fur, to use them to achieve no refresh still have to go through some information, I do not want to use it, because I think of the javascript+asp can also be achieved, although the idea is not very clear, but I believe it can be done!

Ii. Analysis of problems

A person who has played a network should know that it is in the registration and landing page has a verification code this item, this verification code also has a function: When the number is not very clear you can use the left mouse click on the verification code, you can refresh into a new verification code. Note that only the verification code refresh, the other parts of the page did not refresh Oh! Before I specifically for this research for a long time, consulted the data, and then summed up into an article called "Script Invoke ASP implementation process", interested friends must look first, or below you may not see very clearly.

Read the "Script call ASP Implementation process" and then look back to move the network verification code, you probably know what I want to do it, hehe. Let's go ahead and analyze the code at the bottom of the list in Figure 1 below, with the following code:

<div id= "Titlelinews" >
<ul>
<li><a href= "#" > The notification of a pilot workshop on broadband anomaly-drop research </a> (2005-01-12) </li>
<li><a href= "#" > Do the 2005 Mid-Autumn Festival network monitoring and traffic dredging work to &LT;/A&GT; (2005-01-12) </li>
<li><a href= "#" > in the request to do a good job during the Mid-Autumn Festival Intelligent Network Service communications related &LT;/A&GT; (2005-01-12) </li>
<li><a href= "#" > Step up Defense 15th Typhoon "Yunus" emergency Notice </a> (2005-01-12) </li>
<li><a href= "#" > Underground Download September 2nd week of the way of the ADSL off line statistics and the Qing </a> (2005-01-12) </li>
<li><a href= "#" > in the request to do a good job during the Mid-Autumn Festival Intelligent Network Service communications related &LT;/A&GT; (2003-01-12) </li>
<li><a href= "#" > To step Up defense 15th Typhoon "Yunus" emergency Notice </a> (2007-10-12) </li>
<li><a href= "#" > The notification of a pilot workshop on broadband anomaly-drop research </a> (2005-01-12) </li>
<li><a href= "#" > Do the 2005 Mid-Autumn Festival network monitoring and traffic dredging work to &LT;/A&GT; (2005-01-12) </li>
<li><a href= "#" > in the request to do a good job during the Mid-Autumn Festival Intelligent Network Service communications related &LT;/A&GT; (2005-01-12) </li>
</ul>
</div>

I also found the style to control it in the Tianxia.css file:

#titleLiNews {
}
#titleLiNews ul {
List-style-type:none;
margin:0px;
padding:0px;
width:550px;
}
#titleLiNews ul Li {
font-size:9px;
line-height:21px;
Color: #0099FF;
Text-decoration:none;
Background-image:url (images/line02.jpg);
Background-repeat:no-repeat;
margin:0px 10px 0px 20px;
padding:0px;
font-family: "Verdana", "Arial", "Helvetica", "Sans-serif";
List-style-position:inside;
List-style-type:disc;
border-bottom-width:1px;
border-bottom-style:dotted;
Border-bottom-color: #0051A2;
}
#titleLiNews ul Li a {
Color: #FFFFFF;
Text-decoration:none;
font-size:12px;
}
#titleLiNews ul Li A:hover {
Color: #FFFF00;
Text-decoration:underline;
font-size:12px;
}

ID class, Pseudo class, look at these styles, I have to think of the web standards, I think the art in the Web Standard is also under the Kungfu, but he has more admiration. OK, with all the above heard, see, we are not difficult to come up with such a thought: the design of an ASP page, this page can accept parameters that show the number of pages, the page program query the database based on the parameters of the page and the results to the JS syntax output, the company news page only need to add a statement call can be.

Iii. Problem-solving

Suppose company news page filename: news.asp, query page filename: newslit.asp.

News.asp main code is as follows:

<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Company News </title>
<script language= "JavaScript" type= "Text/javascript" >
function ShowPage (n) {
DOCUMENT.SCRIPTS[1].SRC = "newslist.asp?page_no=" + N;
}
</script>
<script language= "JavaScript" type= "Text/javascript" "src=" "></script>
<body>
<div id= "Titlelinews" >
</div>
<a href= "javascript:showpage (1);" >1</a>& nbsp;<a href= "Javascript:showpage (2);" >2</a>& nbsp;<a href= "Javascript:showpage (3);" >3</a>
<script language= "JavaScript" type= "Text/javascript" >showpage (1);</script>
</body>

newslist.asp Code :

<%
Dim Conn
Set conn=server.createobject ("Adodb.connection")
Conn.connectionstring= "Provider=Microsoft.Jet.OLEDB.4.0; Data source= "& Server.MapPath (" Db1.mdb ")
Conn.Open
Dim Page_no,sqlstr,rs,i,str
Page_no = Request.QueryString ("Page_no")
SQLSTR = "SELECT * FROM News"
Set rs = Server.CreateObject ("ADODB.") RecordSet ")
Rs.Open sqlstr,conn,1,2
Rs.pagesize = 3
Rs.absolutepage = Page_no
STR = "document.getElementById" (' Titlelinews '). InnerHTML = "<Ul>"
If rs.eof then str = str & "<li> no news </li>" & "</Ul>";
i = 3
Do, not rs.eof and i > 0
i = I-1
str = str & "<li><a href= ' newsview.asp?id=" & RS ("id") & ">" & RS ("title") & "</a>& Lt;/li> "
Rs.movenext
Loop
str = str & "</Ul>" ";"
Set rs=nothing
Set conn = Nothing
Response.Write Str
%>

Four, PostScript

From "Dynamic network authentication Code" to "script invoke ASP implementation process" to "javascript+asp to create no refreshing news list", we can extrapolate, such as registration of users without refreshing to determine whether the user name is registered, no refresh form verification can be used javascript+ ASP to implement the.