motivation:
The query function is the most common and commonly used functional module we have seen on the website. In the past, information queries were connected to the database, and every click required the support of the backend database. However, in many cases, users often only operate on a certain part of the data, which not only increases the burden on the server, but also seriously affects the user's browsing speed.
In this case, we need to pass a certain part of the data that the user needs to the client in the form of XML, so that the user can easily operate on this data. It not only facilitates users, but also reduces the burden on the server database. Why not! And this function can be applied to many other modules, so this dynamic query function has been added.
Material:
The dynamic query of the XML volume has two files: search.xml and search.xsl.
The functions are:
Filter data without refreshing the page, effectively improving the data query function.
Effect:
Browse here
Code:
search.xml
<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="search.xsl" ?>
<BlueIdea>
<team>
<blue_ID>1</blue_ID>
<blue_name>Sailflying</blue_name>
<blue_text>A simple query</blue_text>
<blue_time>2002-1-11 17:35:33</blue_time>
<blue_class>XML topic</blue_class>
</team>
<team>
<blue_ID>2</blue_ID>
<blue_name>flyingbird</blue_name>
<blue_text>Marrying you will hurt you</blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class>Irrigation Essence</blue_class>
</team>
<team>
<blue_ID>3</blue_ID>
<blue_name>Kao Zi</blue_name>
<blue_text>Application of regular expressions in UBB forum</blue_text>
<blue_time>2001-11-23 21:02:16</blue_time>
<blue_class>Web Programming Essence</blue_class>
</team>
<team>
<blue_ID>4</blue_ID>
<blue_name>Tayilang</blue_name>
<blue_text>Year-end classic steering party complete manual v0.1</blue_text>
<blue_time>2000-12-08 10:22:48</blue_time>
<blue_class>Forum irrigation area</blue_class>
</team>
<team>
<blue_ID>5</blue_ID>
<blue_name>mmkk</blue_name>
<blue_text>Asp error message summary</blue_text>
<blue_time>2001-10-13 16:39:05</blue_time>
<blue_class>javascript</blue_class>
</team>
</BlueIdea>
search.xsl
<?xml version="1.0" encoding="gb2312" ?>
<xsl:stylesheet xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
<xsl:template match="/">
<html>
<head>
<title>XML Practical Tips (2): Dynamic Query</title>
<style>
body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ font: 12px "宋体", "Arial", "Times New Roman"; }
table { font-size: 12px; border: 0px double; border-color: #99CC99 #99CC99 #CCCCCC #CCCCCC; cellpadding:3;cellspacing:3; bgcolor:#eeeeee; text-decoration: blink}
span { font-size: 12px; color: red; }
</style>
<script>
function searchtext(x)
{
stylesheet=document.XSLDocument;
source=document.XMLDocument;
sortField=document.XSLDocument.selectNodes(" //@select ");
if (x!="")
{
sortField[1].value="team[blue_ID='"+x+"']";
Layer1.innerHTML=source.documentElement.transformNode(stylesheet);
}
else {alert("Please enter filter criteria!");}
}
</script>
</head>
<body>
<p align="center"><span>XML Volume Practical Tips (2): Dynamic Query</span></p>
<div id="Layer1" name="Layer1">
<xsl:apply-templates select="BlueIdea" />
</div>
<hr size="1" width="500" />
<table align="center" cellpadding="0" cellspacing="0" border="0" >
<tr>
<td>
<span>Please enter filter criteria: </span>
blue_ID= <input type="text" name="searchtext" size="1" maxlength="1" />
<input type="button" class="button" onClick="searchtext(document.all.searchtext.value)" value="Search" name="button" />
</td>
</tr>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="BlueIdea">
<table width="500" border="1" align="center" cellpadding="1" cellspacing="1" bordercolordark="#ffffff" bordercolorlight="#ADAAAD">
<tr bgcolor="#FFCC99" align="center">
<td>Number</td>
<td>Name</td>
<td>Theme</td>
<td>Publish time</td>
<td>Classification</td>
</tr>
<xsl:apply-templates select="team" order-by="blue_ID"/>
</table>
</xsl:template>
<xsl:template match="team">
<tr align="center">
<xsl:apply-templates select="blue_ID" />
<xsl:apply-templates select="blue_name" />
<xsl:apply-templates select="blue_text" />
<xsl:apply-templates select="blue_time" />
<xsl:apply-templates select="blue_class" />
</tr>
</xsl:template>
<xsl:template match="blue_ID">
<td bgcolor="#eeeeee">
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_name">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_text">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_time">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_class">
<td>
<xsl:value-of />
</td>
</xsl:template>
</xsl:stylesheet>
explain:
1) search.xml is a data file, I believe everyone will have no problem.
2) search.xsl is a format file, there are several things to pay attention to.
(1) In the script:
sortField=document.XSLDocument.selectNodes(" //@select ");
The function is: find all nodes with the attribute select. This is what I said in dynamic sorting
sortField=document.XSLDocument.selectSingleNode(" //@order-by ");
Something is different. Please pay attention to this small difference and their respective functions.
sortField[1].value="team[blue_ID='"+x+"']";
Therefore sortField[1] is the second node found, and its corresponding node is
<xsl:apply-templates select="team" order-by="blue_ID"/>
Parameter x is the value entered in the text box.
We modified the search condition of select="team" to select="team[blue_ID='x']"
The function is to add a judgment condition, and only the XML data whose blue_ID value is equal to x will be displayed.
Of course, you can enrich the conditions for judgment. The simple judgment I make here is to make it easier for everyone to understand.
Finally, the new sorted content is displayed by redisplaying the innerHTML value of Layer1.
(2) In the text:
select="team"
In my case it's sortField[1], but that may change as you go.
Then you must calculate accurately and make no mistakes, otherwise you will find another company!
I provide a commonly used method: in the code, you can use a loop to determine whether it is the node you need.
One more thing:
XML has extremely strict case requirements. So if your writing is not standardized, it will catch a cold!
postscript:
After everyone is familiar with the idea of completing dynamic sorting and dynamic query, you will find that our implementation method is actually very simple.
Just modify a certain value and then display it again.
In the dynamic paging function, we still follow this idea.