동기 부여:
쿼리 기능은 우리가 웹사이트에서 본 가장 일반적이고 일반적으로 사용되는 기능 모듈입니다. 과거에는 정보 쿼리가 데이터베이스에 연결되었으며 모든 클릭에는 백엔드 데이터베이스의 지원이 필요했습니다. 그러나 많은 경우 사용자는 데이터의 특정 부분에만 작업을 수행하는 경우가 많으며 이는 서버의 부담을 증가시킬 뿐만 아니라 사용자의 탐색 속도에도 심각한 영향을 미칩니다.
이 경우 사용자가 이 데이터를 쉽게 조작할 수 있도록 사용자가 필요로 하는 데이터의 특정 부분을 XML 형식으로 클라이언트에 전달해야 합니다. 이는 사용자를 용이하게 할 뿐만 아니라 서버 데이터베이스의 부담을 줄여줍니다. 왜 안 돼! 그리고 이 기능은 다른 여러 모듈에도 적용이 가능하므로 동적 질의 기능을 추가하였습니다.
재료:
XML 볼륨의 동적 쿼리에는 search.xml과 search.xsl이라는 두 개의 파일이 있습니다
.
페이지를 새로 고치지 않고 데이터를 필터링하여 데이터 쿼리 기능을 효과적으로 개선합니다.
효과:
여기에서 찾아보세요
암호:
검색.xml
<?xml version="1.0" 인코딩="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="search.xsl" ?>
<블루아이디어>
<팀>
<blue_ID>1</blue_ID>
<blue_name>항해</blue_name>
<blue_text>간단한 쿼리</blue_text>
<blue_time>2002-1-11 17:35:33</blue_time>
<blue_class>XML 주제</blue_class>
</팀>
<팀>
<blue_ID>2</blue_ID>
<blue_name>날아다니는 새</blue_name>
<blue_text>당신과 결혼하면 당신에게 상처를 줄 것입니다</blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class>이리게이션 에센스</blue_class>
</팀>
<팀>
<blue_ID>3</blue_ID>
<blue_name>카오지</blue_name>
<blue_text>UBB 포럼에서 정규식 적용</blue_text>
<blue_time>2001-11-23 21:02:16</blue_time>
<blue_class>웹 프로그래밍 본질</blue_class>
</팀>
<팀>
<blue_ID>4</blue_ID>
<blue_name>타이랑</blue_name>
<blue_text>연말 클래식 스티어링 파티 완전 매뉴얼 v0.1</blue_text>
<blue_time>2000-12-08 10:22:48</blue_time>
<blue_class>포럼 관개 지역</blue_class>
</팀>
<팀>
<blue_ID>5</blue_ID>
<blue_name>mmkk</blue_name>
<blue_text>Asp 오류 메시지 요약</blue_text>
<blue_time>2001-10-13 16:39:05</blue_time>
<blue_class>자바스크립트</blue_class>
</팀>
</블루아이디어>
검색.xsl
<?xml version="1.0" 인코딩="gb2312" ?>
<xsl:스타일시트 xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
<xsl:템플릿 일치="/">
<html>
<머리>
<title>XML 실용적인 팁(2): 동적 쿼리</title>
<스타일>
body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ 글꼴: 12px "宋体", "Arial", "Times New Roman" }
테이블 { 글꼴 크기: 12px; 테두리: 0px double; 테두리 색상: #99CC99 #99CC99 #CCCCCC #CCCCCC;cellspacing:3; 텍스트 장식: 깜박임
범위 { 글꼴 크기: 12px; 색상: 빨간색 }
</style>
<스크립트>
함수 검색텍스트(x)
{
스타일시트=document.XSLDocument;
소스=document.XMLDocument;
sortField=document.XSLDocument.selectNodes(" //@select ");
만약 (x!="")
{
sortField[1].value="team[blue_ID='"+x+"']";
Layer1.innerHTML=source.documentElement.transformNode(스타일시트);
}
else {alert("필터 기준을 입력하세요!");}
}
</script>
</head>
<본문>
<p align="center"><span>XML 볼륨 실무 팁 (2): 동적 쿼리</span></p>
<div id="Layer1" name="Layer1">
<xsl:apply-templates select="BlueIdea" />
</div>
<시간 크기="1" 너비="500" />
<table align="center" cellpadding="0" cellpacing="0" border="0" >
<tr>
<TD>
<span>필터 기준을 입력하십시오: </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:템플릿>
<xsl:템플릿 일치="BlueIdea">
<table width="500" border="1" align="center" cellpadding="1" cellpacing="1" bordercolordark="#ffffff" bordercolorlight="#ADAAAD">
<tr bgcolor="#FFCC99" align="center">
<td>숫자</td>
<td>이름</td>
<td>테마</td>
<td>게시 시간</td>
<td>분류</td>
</tr>
<xsl:apply-templates select="팀" order-by="blue_ID"/>
</table>
</xsl:템플릿>
<xsl:템플릿 매치="팀">
<tr 정렬="가운데">
<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:템플릿>
<xsl:템플릿 일치="blue_ID">
<td bgcolor="#eeeeee">
<xsl:값/>
</td>
</xsl:템플릿>
<xsl:템플릿 일치="blue_name">
<TD>
<xsl:값/>
</td>
</xsl:템플릿>
<xsl:템플릿 일치="blue_text">
<TD>
<xsl:값/>
</td>
</xsl:템플릿>
<xsl:템플릿 일치="blue_time">
<TD>
<xsl:값/>
</td>
</xsl:템플릿>
<xsl:템플릿 일치="blue_class">
<TD>
<xsl:값/>
</td>
</xsl:템플릿>
</xsl:스타일시트>
설명하다:
1) search.xml은 데이터 파일이므로 누구에게나 문제가 없을 것이라고 생각합니다.
2) search.xsl은 형식 파일이므로 주의할 점이 몇 가지 있습니다.
(1) 스크립트에서:
sortField=document.XSLDocument.selectNodes(" //@select ");
기능은 다음과 같습니다. select 속성이 있는 모든 노드를 찾습니다. 동적 정렬에서 내가 말한 내용은 다음과 같습니다.
sortField=document.XSLDocument.selectSingleNode(" //@order-by ");
뭔가가 다릅니다. 이 작은 차이점과 각각의 기능에 주의를 기울이십시오.
sortField[1].value="team[blue_ID='"+x+"']";
따라서 sortField[1]은 두 번째로 발견된 노드이고 해당 노드는 다음과 같습니다.
<xsl:apply-templates select="team" order-by="blue_ID"/>
매개변수 x는 텍스트 상자에 입력된 값입니다.
select="team"의 검색 조건을 select="team[blue_ID='x']"로 수정했습니다.
판정 조건을 추가하는 기능으로, blue_ID 값이 x와 동일한 XML 데이터만 표시됩니다.
물론, 판단의 조건을 풍부하게 할 수는 있습니다. 여기서 제가 하는 간단한 판단은 모든 사람이 이해하기 쉽도록 하기 위한 것입니다.
마지막으로 Layer1의 innerHTML 값을 다시 표시하여 새로 정렬된 콘텐츠가 표시됩니다.
(2) 본문에서:
select="team"
내 경우에는 sortField[1]이지만 상황에 따라 변경될 수 있습니다.
그렇다면 정확하게 계산하고 실수하지 않아야 합니다. 그렇지 않으면 다른 회사를 찾을 것입니다!
나는 일반적으로 사용되는 방법을 제공합니다. 코드에서 루프를 사용하여 필요한 노드인지 확인할 수 있습니다.
한 가지 더:
XML에는 매우 엄격한 대소문자 요구사항이 있습니다. 그래서 당신의 글이 표준화되지 않으면 감기에 걸릴 것입니다!
추신:
모두가 동적 정렬 및 동적 쿼리를 완료한다는 아이디어에 익숙해지면 구현 방법이 실제로 매우 간단하다는 것을 알게 될 것입니다.
특정 값을 수정한 다음 다시 표시하면 됩니다.
동적 페이징 기능에서 우리는 여전히 이 아이디어를 따릅니다.