After careful research and analysis, the AJAX simulation browser function has finally reached a new peak.
The following is the source code for me. If you wish to repost the source code to a friend you like, it is a great respect for yourself and yourself.
I remember an article on AJAX's "seven sins" Said That AJAX cannot use the link favorites, that is, the browser's tag function when browsing the page, rather than using the browser's back-up. another article translated a foreigner's AJAX component and implemented the history record and rollback functions, but the semantics was a little incomprehensible. So after analyzing the component, I found the essence, then rewrite the ajax rss application and provide comments on the implementation methods of all functions.
Currently, this application cannot be used in Firefox, but it should be able to solve this problem quickly.
Click here to view the results:
Source code:
Page, saved as index.html:
Program code <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> AJAX primary application-RSS brushless negreader (RC 060221) </title>
<Style type = "text/css">
<! --
@ Import url ("read.css ");
-->
</Style>
<Script type = "text/javascript" src = "rss. js"> </script>
</Head>
<Body>
<Div class = "title"> AJAX primary application-RSS no-refreshing aggregator
<Div class = "close" id = "clobar" onclick = "closebar ('inclubar', 'clobar');"> close the sidebar </div>
</Div>
<Div class = "body">
<Div class = "sidebar" id = "sidebar">
<Div class = "spacecla">
<! -- Add the required connection in the same format here -->
<A href = "javascript: ent ('clear');"> Hu Dongping personal space </a> <br/>
<A href = "javascript: ent ('A-fei');"> OM-Space </a> <br/>
<A href = "javascript: ent ('ryanxia ');"> RYAN Graphics </a> <br/>
<A href = "javascript: ent ('awflasher');"> living </a> <br/>
<A href = "javascript: ent ('seles ');"> seles space </a> <br/>
<A href = "javascript: ent ('wawa ');"> wawa-Fairy's blog </a> <br/>
<A href = "javascript: ent ('dreammx ');"> Prague </a> <br/>
<A href = "javascript: setlist (12);"> debugging mode </a> <br/>
</Div>
<Div class = "special">
<Div class = "spetit"> special thanks: </div>
<Br/>
<H4> <a href = "#"> LT </a> -- So far, I have been able to do what I think I like, because it is powerful background support for me. So I can despise all unfair phenomena, because the cause of unfair phenomena is always people, and this person is usually the kind of self-righteous spam. <Br/>
<Br/>
<H4> <a href = "http://www.ryanxia.com" target = "_ blank"> Xia Rui </a> -- He took me into the magic field of web design, and made me realize CSS, and then let me enter a miracle-filled world. Although he cannot work with us for some reason, his enlightenment to me will always be remembered! <Br/>
<Br/>
<H4> <a href = "#"> Zhang tianming </a> -- If one day I became a good programmer, his credit should be the greatest and he will never bother to explain some very mentally retarded questions to me, but with this spirit, taking me into the door of programming, I have benefited for my life! The concept of AJAX is what he conveyed to me. <Br/>
</Div>
</Div>
<Div class = "main" id = "main">
<Div class = "maintit" id = "listnum"> </div>
<Div class = "nonetab"> </div>
<Div class = "mainbg" id = "prolist">
<H5> <a href = "#"> help information </a> <Span> posting time: 2006.02.21 </span>
<Div class = "article"> if you see the text, I think you may be in trouble! See if you need some help information below! </Div>
<Div class = "bottom"> <a href = "#"> author: Hu Dongping </a> </div>
<H5> <a href = "#"> help </a> <Span> posting time: 2005.02.21 </span>
<Div class = "article"> This example is original. If you need to reprint it, contact the author QQ: 100829912 <br/>
<Br/>
1. If you see this page all the time, nothing appears: <br/>
<Br/>
Please follow the steps (tools-Internet Options-security-Custom Level-access data resources through domain-enable )! <Br/>
This is because this work is intended to familiarize everyone with the key functions of AJAX, so this problem may occur. <Br/>
<Br/>
If it still doesn't work, you need to check your browser. Because of the time, I only tested it on IE6 sp1. I have not tried any other browser, however, it is estimated that some problems may occur in other browsers. After all, new technologies still need time to support them. <Br/>
<Br/>
2. I hope that when you see this code, you will like ajax technology. This example is only a basic application, but the author has paid a certain amount of time and energy, I hope you can respect the author's Labor achievements. If you need it, you can use it for free, but it is best not to use it for commercial purposes and to indicate the reprinted source. Thank you! </Div>
<Div class = "bottom"> <a href = "#"> author: Hu Dongping </a> </div>
</Div>
</Div>
</Div>
<Div class = "footer"> the source must be indicated in the reprinted personal space of Hu Dongping. <br/>
<A href = "http://blog.cnrui.cn" target = "_ blank"> CopyRight By Clear Online Space </a> </div>
<! -- Prompt window -->
<Div id = "loadifo" style = "display: none" onclick = "ent (delChar ();"> </div>
<Iframe id = "historyFrame" style = "display: none" src = "blank.html"> </iframe>
</Body>
</Html>
Hide Ifream:
Save as blank.html:
Program code <Script language = "JavaScript">
Function pageLoaded (){
Window. parent. dhtmlHistory. iframeLoaded (window. location );
}
</Script>
<Body onLoad = "pageLoaded ()">
<H1> blank.html-this is very important, bro! </H1>
</Body>
</Html>
Css section:
Save as read.css:
Program code body {
Margin: 0px;
Padding: 0px;
Font-size: 9pt;
}
H4 {
Font-size: 9pt;
Display: inline;
}
H5 {
Display: inline;
Margin-left: 10px;
}
Span {
Margin-left: 20px;
Color: #666;
}
A {
Text-decoration: none;
Color: #900;
}
A: hover {
Color: # F90;
}
. Title {
Filter: progid: DXImageTransform. Microsoft. Gradient (startColorStr = "# 0099FF", endColorStr = "#003366", gradientType = "0 ");
Height: 30px;
Font-weight: bold;
Color: # FFF;
Padding-top: 20px;
Padding-left: 20px;
Border-bottom: 2px solid # FFF;
}
. Close {
Float: right;
Margin-right: 50px;
Cursor: pointer;
}
. Body {
Clear: both;
Width: 1002px;
}
. Sidebar {
Width: 200px;
Float: left;
Top: 20px;
Padding-top: 10px;
Filter: progid: DXImageTransform. Microsoft. Gradient (startColorStr = "# 0066CC", endColorStr = "# FFFFFF", gradientType = "0 ");
Text-align: center;
}
. Spacecla {
Font-weight: bold;
Color: # E1F1FF;
Text-decoration: none;
Float: left;
Width: 120px;
Padding: 5px 5px 3px;
Border-bottom: 1px dashed # 6FF;
}
. Spacecla a: hover {
Color: # FFF;
Background: # 09F;
}
. Special {
Margin-top: 50px;
Width: 150px;
Color: #666;
Line-height: 15px;
Padding-top: 5px;
Padding-bottom: 5px;
Text-align: left;
}
. Spetit {
Font-weight: bold;
Color: # FFFFFF;
Border-bottom: 2px solid # EEE;
}
. Spacecla {
Width: 150px;
}
. Special {
Color: #000;
}
. Nonetab {
Height: 10px;
Background: # EEE;
}
. Main {
Width: 800px;
Float: right;
}
. Maintit {
Background: #000;
Height: 17px;
Color: # FFF;
Text-align: center;
Padding-top: 3px;
}
. Mainbg {
Background: # EEE;
Float: left;
Width: 100%;
Overflow: hidden;
}
. Mainbg2 {
Background: # EEE;
Float: left;
Width: 100%;
Filter: Alpha (Opacity = 30 );
}
. Article img {
Border-width: 0px;
Border-style: none;
}
. Article {
Padding: 5px;
Text-indent: 2em;
Border-top: 1px solid # 06F;
Margin-left: 10px;
}
. Bottom {
Filter: progid: DXImageTransform. Microsoft. Gradient (startColorStr = "# eeeeeeee", endColorStr = "# FFFFFF", gradientType = "1 ");
Height: 13px;
Text-align: right;
Padding-right: 20px;
Padding-top: 3px;
Margin-bottom: 10px;
}
. Footer {
Height: 30px;
Filter: progid: DXImageTransform. Microsoft. Gradient (startColorStr = "# 0066CC", endColorStr = "# B9E3FF", gradientType = "1 ");
Text-align: center;
Padding-top: 5px;
Line-height: 15px;
Color: # FFF;
Clear: both;
}
. Footer {
Color: # EEE;
}
# Loadifo {
Position: absolute;
Top: 200px;
Width: 120px;
Background: # F69;
Padding: 10px;
Filter: Alpha (Opacity = 90 );
Text-align: center;
Color: # FFF;
Border: 1px dashed #909;
Left: 400px;
}
Key: Core code:
Save as rss. js:
Program code <! --
// Control ID
Function getId (objId ){
Return document. getElementById (objId)
}
// Link corresponding array, please indicate Reprinted from http://www.cnrui.cn/blog
Function urlArrary (urlName ){
Switch (urlName ){
Case "clear ":
Return "http://www.cnrui.cn/blog/feed.asp"
Case "a-fei ":
Return "http://www.a-fei.net/blog/rss.xml"
Case "ryanxia ":
Return "http://www.ryanxia.com/blog/feedrss2.asp"
Case "awflasher ":
Return "http://www.awflasher.com/blog/feed.asp"
Case "seles ":
Return "http://www.cnrui.cn/seles/feedrss2.asp"
Case "wawa ":
Return "http://a-fei.net/wawa/blog/rss2.php"
Case "dreammx ":
Return "http://www.dreammx.com/xhyl/feed.asp"
Default:
Return false
}
}
// Sidebar control, which must be reprinted from http://www.cnrui.cn/blog
Function closebar (targetid, objId ){
If (document. getElementById ){
Target = getId (targetid );
Objsty = getId (objId );
If (target. style. display = "none "){
Target. style. display = "";
Main. style. width = "800px ";
Objsty. innerHTML = "Close sidebar"
} Else {
Target. style. display = "none ";
Main. style. width = "100% ";
Objsty. innerHTML = "enable sidebar"
}
}
}
// The load is grayed out, indicating that it is reprinted from http://www.cnrui.cn/blog.
Function listen (){
GetId ("prolist"). className =;
}
Function btnSty (objId, objStyle)
{
GetId (objId). style. display = objStyle
}
// Prompt window control
Function ifodis (){
BtnSty ("loadifo", "none ");
}
Function settime (){
SetTimeout (a, 1000 );
}
Function loadtime (){
GetId ("loadifo"). innerHTML + = "."
}
// Data entry
Function ent (urlName ){
Window. location. hash = urlName
Var frmUrl = saveState (urlName); // write information to ifream
Var gamestart = loadrss (urlName); // AJAX Data Process
}
// XML Data Binding
Var xmldoc = false;
Function loadrss (urlName ){
Var myurl = urlArrary (urlName)
If (myurl ){
Listen ("mainbg2 ");
// Generate a random number and limit the number of refreshes
Var Num = Math. floor (Math. random () * 100 );
// Define the forward Parameters
Url = myurl + "? Id = "+ Num;
// Defined as asynchronous transmission mode
Xmldoc = false;
// The XMLHttp class that needs to be created when the browser such as Safari is killed
If (window. XMLHttpRequest ){
Xmldoc = new XMLHttpRequest ();
If (xmldoc. overrideMimeType ){
Xmldoc. overrideMimeType ('text/xml ');
}
}
// XMLHttp class created in IE browser
Else if (window. ActiveXObject ){
Try {
Xmldoc = new ActiveXObject ("Msxml3.XMLHTTP ");
}
Catch (e ){
Try {
Xmldoc = new ActiveXObject ("Msxml2.XMLHTTP ");
}
Catch (e ){
Try {
Xmldoc = new ActiveXObject ("Microsoft. XMLHTTP ");
}
Catch (e ){}
}
}
}
// Return when the XMLHTTP class cannot be created
If (! Xmldoc ){
Return false;
}
// Call the CheckState Function
Xmldoc. onreadystatechange = CheckState;
Xmldoc. open ('get', url, true );
Xmldoc. send (null );
} Else {
GetId ("listnum"). innerHTML = "the address you entered is incorrect. Please try again! "
}
}
// Status detection
Function CheckState (){
Var response = xmldoc.responseXML.doc umentElement;
BtnSty ("loadifo", "block ")
// Receives the complete Server Response
If (xmldoc. readyState = 1 ){
GetId ("loadifo"). innerHTML = "connect to server"
}
Else if (xmldoc. readyState = 2 ){
GetId ("loadifo"). innerHTML = "start to load data"
}
Else if (xmldoc. readyState = 3 ){
GetId ("loadifo"). innerHTML = "loading data"
Settime (loadtime)
}
Else if (xmldoc. readyState = 4 ){
// The HTTP server response value is successful.
If (xmldoc. status = 200 ){
// Write the string returned by the server to the area where the ID is showdiv in the page.
GetId ("loadifo"). innerHTML = "loaded"
Settime (ifodis)
Num (response)
}
Else {
GetId ("loadifo"). innerHTML = "error" + xmldoc. status + "Click here to refresh ";
}
}
}
// Check Data Validity
Function trydata (nodeName, nodeName2 ){
Try {
Var nodeV = nodeName. firstChild. nodeValue;
} Catch (e ){
Try {
Var nodeV = nodeName2.firstChild. nodeValue;
} Catch (e ){
Var nodeV = "no available information"
}
}
Return nodeV;
}
// Total number of Record Sets
Function num (B ){
Try {
Var titleNode = B. selectNodes ("// rss/channel/title ");
Var a = B. getElementsByTagName ("item"). length
TitleV = trydata (titleNode (0 ));
GetId ("listnum"). innerHTML = "Total" + a + "Source:" + titleV;
Setlist (a, B );
} Catch (e ){}
}
If (top. location! = Self. location) top. location = self. location;
// Show the program list
// Defines the variables that receive node information pointing to each element.
Var titleNode, linkNode, categoryNameNode, authorNode, pubDateNode, descriptionNode
// Define the variable for receiving element values
Var titleV, linkV, categoryNameV, authorV, pubDateV, descriptionV
// Classification Aggregation
Function setlist (a, B)
{
Var prograNode = B. getElementsByTagName ("item ");
Var adminlinkNode = B. selectNodes ("// rss/channel/link ");
Var titleNode = B. selectNodes ("// rss/channel/item/title ");
Var linkNode = B. selectNodes ("// rss/channel/item/link ");
Var categoryNode = B. selectNodes ("// rss/channel/item/category ");
Var authorNode = B. selectNodes ("// rss/channel/item/author ");
Var pubDateNode = B. selectNodes ("// rss/channel/item/pubDate ");
Var descriptionNode = B. selectNodes ("// rss/channel/item/description ");
Var category2sNode = B. selectNodes ("// rss/channel/item/dc: subject ");
Var author2sNode = B. selectNodes ("// rss/channel/item/dc: creator ");
Var pubDate2sNode = B. selectNodes ("// rss/channel/item/dc: date ");
Var listchar = ""
// Use the for loop to generate list information
For (I = 0; I <a; I ++)
{
TitleV = trydata (titleNode (I ))
LinkV = trydata (linkNode (I ))
CategoryV = trydata (categoryNode (I), category2sNode (I ))
AuthorV = trydata (authorNode (I), author2sNode (I ))
PubDateV = trydata (pubDateNode (I), pubDate2sNode (I ))
DescriptionV = trydata (descriptionNode (I ))
AdminlinkV = trydata (adminlinkNode (0 ))
// Load the obtained element value to the string that generates the table
Listchar + = "}
// Output the generated table to the DIV element of the page
GetId ("prolist"). innerHTML = listchar;
Listen ("mainbg ")
}
// Browser rollback
// Rewrite the IFREAM link to focus the browser back
Function saveState (message ){
Var hisFrm = getId ("historyFrame ")
HisFrm. src = "blank.html? "+ Message
}
// Detect IFREAM
Window. dhtmlHistory = {
IframeLoaded: function (newLocation ){
Var hash = new String (newLocation. search)
If (hash. length> = 2 & hash. charAt (0) = "? "& Hash. substring (1 )! = DelChar ()){
Hash = hash. substring (1)
Window. location. hash = hash;
Var hisFrmdata = loadrss (hash)
}
}
}
// Link to the browser
// Remove the symbol. Please indicate http://www.cnrui.cn/blog
Function delChar (){
Var a = window. location. hash
Return a. substring (1)
}
Window. onload = function (){
If (window. location. hash. length> = 2 ){
Ent (delChar ())
}
}
// -->
Click to download
