Explication détaillée des exemples de code pour la création d'un carnet d'adresses via XML Data Island et Dom

黄舟
Libérer: 2017-03-25 10:36:08
original
1541 Les gens l'ont consulté

En général, si vous souhaitez fournir un programme de carnet d'adresses pour un site Web, vous devez utiliser CGI combiné à une technologie de base de données en arrière-plan. Cela nécessite des exigences relativement élevées sur le serveur WEB et ne peut même pas être implémenté sur de nombreux hôtes virtuels qui ne le font pas. fournir des fonctions de base de données. Bien sûr, nous pouvons également utiliser le texte TXT pour remplacer la base de données, mais le texte TXT est plus difficile à utiliser. Nous devons lire et juger ligne par ligne, et également utiliser des chaînes délimitées pour séparer les champs, et des opérations complexes ne peuvent pas être effectuées.
Maintenant, nous pouvons utiliser le "Extensible Markup Language (xml)" pour enregistrer les données du carnet d'adresses, reflétant ainsi les avantages du XML : une méthode structurée de représentation des données, très utile pour enregistrer des fichiers avec de nombreuses structures de données relationnelles. .

1. Principes de base :
Dans Microsoft Internet Explorer 5.0 et les versions ultérieures, nous pouvons utiliser des éléments XML pour créer des îlots de données sont des données XML référencées ou incluses dans des pages HTML. peut être inclus dans un fichier HTML ou dans un fichier externe. L'utilisation d'îlots de données XML peut nous éviter d'avoir à écrire des scripts complexes. DOM peut analyser les documents XML. Tous les éléments, entités, attributs, etc. du document peuvent être représentés par un modèle objet. La structure logique de l'ensemble du document est similaire à une arborescence. Chaque objet contient également En plus des méthodes et des attributs, DOM fournit de nombreuses méthodes pour rechercher des nœuds. En utilisant DOM, les développeurs peuvent créer dynamiquement du XML, parcourir des documents et ajouter (supprimer/modifier) ​​du contenu de document. L'API fournie par DOM n'a rien à voir avec les langages de programmation, il n'y a donc pas d'interfaces clairement définies dans certaines normes DOM, ni avec l'implémentation. les méthodes des différents analyseurs peuvent varier.

2. Le processus spécifique est :
1. Définissez le fichier XML comme suit :

<?xml version="1.0" encoding="gb2312"?> 
    <中国计算机世界出版服务公司通信录> 
      <计算机世界 contactID="2"> 
        <部门名称>计算机室</部门名称> 
        <电话号码>139</电话号码> 
        <电子邮件>fsdos@163.net</电子邮件> 
      </计算机世界> 
    </中国计算机世界出版服务公司通信录>
Copier après la connexion

Enregistrez le document XML ci-dessus en tant que fichier tele.xml, et en même temps. temps, enregistrez le document XML ci-dessus. Laissez le contenu du champ vide en tant que données de trame d'initialisation et enregistrez-le en tant que fichier newid.xml.
2. Le client charge le document XML et lie le fichier XML à la table via DATASRC='#xmldso' dans la table où est placé le carnet d'adresses. L'attribut DATASRC est en fait transmis via l'attribut ID de l'élément XML. à traiter. Ceci est obtenu en ajoutant # devant, afin que nous puissions spécifier les champs spécifiques qui doivent être affichés au milieu de l'élément TD
3 Utilisez la technologie DOM pour ajouter et supprimer des enregistrements dans le carnet d'adresses ; ;
4. Connectez-vous au carnet d'adresses via le serveur de protocole XMLhttp, enregistre les documents XML.

3. Brève description de la programmation XML DOM :
1. Page client dom.htm :

<HTML><BODY bgColor=#a1bae6> 
<XML id=xmldso src="tele.xml"></XML> 
<XML id=newid></XML> <!--加载xml数据--> 
<SCRipT Language=javaScript> 
newid.async = false; 
newid.load("newid.xml"); 
//增加记录; 
function addID(){ 
var doc=xmldso.XMLDocument 
var rootnode=doc.documentElement 
var sortNode = rootnode.selectNodes("//部门名称") 
var currentid = sortNode.length-1 
var cc=sortNode.item(currentid).text; 
if ((cc=="尚未输入")||(cc=="")) 
{ 
alert("请将最后一行数据填写完毕后再增加新的记录!"); 
} 
else 
{  
var node= newid.documentElement.childNodes(0).cloneNode(true); 
var contactID=parseInt(sortNode.item(currentid).parentNode.getAttribute("contactID"))+1;  
node.setAttribute("contactID",contactID);  
xmldso.documentElement.appendChild(node); 
} 
} 
//删除记录 
function delID(whichFld){ 
var sortNode = xmldso.selectSingleNode("//计算机世界[@contactID=&#39;"+whichFld+"&#39;]"); 
if (sortNode.parentNode.childNodes.length>1) sortNode.parentNode.removeChild(sortNode);  
} 
</SCRIPT> 
<script language="vbscript"> 
Sub cc_onmouseup &#39;保存记录; 
Dim objXML, objXSL, objfso,strFile, strFileName, strXSL,strURL,TheForm 
set SaveXMLDoc=xmldso.XMLDocument 
strURL="dns2.asp" 
Set objXML = CreateObject("Microsoft.XMLHTTP") &#39;创建MS的XMLHTTP组件; 
objXML.Open "post",strURL,false &#39;采用Post提交方式; 
objXML.setrequestheader "content-type","application/x-www-form-urlencoded" 
objXML.send SaveXMLDoc &#39; 发送信息,保存XML数据; 
&#39;xmlGet = objXML.responsebody &#39;稍等片刻后,得到服务器端传回来的结果; 
msgbox "保存成功!"  
Set objXML = Nothing 
end sub  
</SCRIPT> 
<center><b>计算机世界----通信录</b><br><br> 
<TABLE id="table" DATASRC=&#39;#xmldso&#39; BORDER CELLPADDING=3> 
<!--进行数据绑定--> 
<THEAD><TH>编号</TH><TH>部门名称</TH><TH>电话号码</TH><TH>电子邮件</TH></THEAD> 
<TR> 
<TD><acronym title=&#39;点击即可删除该记录&#39;><INPUT TYPE=button size=4 DATAFLD="contactID" onclick="delID(this.value)"></acronym></TD> 
<TD><INPUT TYPE=TEXT DATAFLD="部门名称"></TD> 
<TD><INPUT TYPE=TEXT DATAFLD="电话号码"></TD>  
<TD><INPUT TYPE=TEXT DATAFLD="电子邮件"></TD> 
</TR> 
</TABLE> 
<INPUT TYPE=BUTTON name=dd id=dd VALUE="增加记录" onmouSEOver="this.focus()" onmousedown="addID();"> 
<INPUT TYPE=BUTTON name=cc id=cc VALUE="保存"></center></BODY></HTML>
Copier après la connexion

2. Le programme dns2.asp côté serveur est relativement simple. XML Après avoir collecté les données, créez un objet fichier et enregistrez-le dans tele.xml :

< 
Set ReceivedDoc = CreateObject("Microsoft.XMLDOM") &#39;创建 XML DOM实例; 
ReceivedDoc.async=False 
ReceivedDoc.load Request &#39;接收XML数据; 
Set files=Server.CreateObject("Scripting.FileSystemObject") 
Set numtxt=files.CreateTextFile(Server.MapPath("tele.xml"),True) 
numtxt.WriteLine(replace(ReceivedDoc.xml,"?>"," encoding=""gb2312""?>")) &#39;将XML数据写入文件 
numtxt.Close 
response.write ReceivedDoc.xml 
>
Copier après la connexion

3 Lors de l'utilisation réelle, vous devez également ajouter une page Web index.htm qui affiche le carnet d'adresses, qui est en fait le dom.htm ci-dessus Une version simplifiée qui supprime toutes les fonctions d'ajout, de suppression, de modification et d'enregistrement, et utilise uniquement LABEEL pour afficher les données dans les cellules du tableau :

<HTML><BODY bgColor=#a1bae6> 
<XML id=xmldso src="tele.xml"></XML> 
<center><b>计算机世界----通信录</b><br><br> 
<TABLE id="table" DATASRC=&#39;#xmldso&#39; BORDER CELLPADDING=3> 
<THEAD><TH>编号</TH><TH>部门名称</TH><TH>电话号码</TH><TH>电子邮件</TH> 
</THEAD> 
<TR> 
<TD><label DATAFLD="contactID"></label></TD> 
<TD><label DATAFLD="部门名称"></label></TD> 
<TD><label DATAFLD="电话号码"></label></TD>  
<TD><label DATAFLD="电子邮件"></label></TD> 
</TR> 
</TABLE> 
</center></BODY></HTML>
Copier après la connexion

4. Avantages de l'utilisation de XML des îlots de données combinés à la technologie Dom :
1. Tout d'abord, bien sûr, il y a les avantages apportés par XML lui-même. XML brise le monopole des définitions de balises. Vous pouvez personnaliser les noms de champs. Dans le fichier XML utilisé dans cet article, même les noms de champs peuvent être en chinois. Les données sont très simples et claires, car les informations qu'ils contiennent ne sont pas une description. l'affichage, mais une description sur l'affichage. C'est la signification sémantique de l'information qui améliore grandement la lisibilité du document. L'utilisation de XML facilite également le transfert d'informations entre différents systèmes.
2. XML Data Island permet aux utilisateurs d'accéder et de manipuler des ensembles de données sur le client sans interaction fréquente avec le serveur, ce qui est très utile pour réduire la charge sur le serveur. Dans le même temps, grâce aux caractéristiques de l'îlot de données XML lui-même, les opérations sur les données sur le client sont très simples et la quantité de programmation est réduite.
3. DOM force l'utilisation d'un modèle arborescent pour accéder aux informations dans les documents XML. Puisque XML est essentiellement une structure hiérarchique, cette méthode de description est assez efficace. Grâce à l'interface DOM, l'application peut accéder à tout moment à n'importe quelle partie des données du document XML et le contrôle est assez flexible.
4. Utilisez l'objet xmlhttp pour transmettre des données XML au serveur et la page client s'actualisera sans scintillement.

Ce programme fonctionne avec succès sur IIS5.0 et IE5.0 basés sur la plateforme Windows 2000. Dans le processus de candidature réel, vous pouvez également utiliser DOM combiné à la technologie XSL pour ajouter des fonctions telles que le tri, la conversion de format et la recherche de données au carnet d'adresses. Utilisez l'attribut datapagesize de l'îlot de données XML et les fonctions PReviousPage et nextPage pour ajouter. fonctions de pagination au carnet d'adresses. Utiliser DTD et XML Schema valide dynamiquement les données du carnet d'adresses.

------------------------LA FIN------------------ ----

Joindre : (tous les programmes sources)
****************************** **********************************************
一, index.htm (afficher le carnet d'adresses) :

<HTML><BODY bgColor=#a1bae6> 
<XML id=xmldso src="tele.xml"></XML> 
<center><b>计算机世界----通迅录</b><br><br> 
<TABLE id="table" DATASRC=&#39;#xmldso&#39; BORDER CELLPADDING=3> 
<THEAD><TH>编号</TH><TH>部门名称</TH><TH>电话号码</TH><TH>电子邮件</TH> 
</THEAD> 
<TR> 
<TD><label DATAFLD="contactID"></label></TD> 
<TD><label DATAFLD="部门名称"></label></TD> 
<TD><label DATAFLD="电话号码"></label></TD>  
<TD><label DATAFLD="电子邮件"></label></TD> 
</TR> 
</TABLE> 
</center></BODY></HTML>
Copier après la connexion

********************************* ***** ********************************************

2.dom.htm (carnet d'adresses d'édition en ligne) :

<HTML><BODY bgColor=#a1bae6> 
<XML id=xmldso src="tele.xml"></XML> 
<XML id=newid></XML> 
<SCRIPT Language=Javascript> 
newid.async = false; 
newid.load("newid.xml"); 
function addID(){ 
var doc=xmldso.XMLDocument 
var rootnode=doc.documentElement 
var sortNode = rootnode.selectNodes("//部门名称") 
var currentid = sortNode.length-1 
var cc=sortNode.item(currentid).text; 
if ((cc=="尚未输入")||(cc=="")) 
{ 
alert("请将最后一行数据填写完毕后再增加新的记录!"); 
} 
else 
{  
var node= newid.documentElement.childNodes(0).cloneNode(true); 
var contactID=parseInt(sortNode.item(currentid).parentNode.getAttribute("contactID"))+1;  
node.setAttribute("contactID",contactID);  
xmldso.documentElement.appendChild(node); 
} 
} 
function delID(whichFld){ 
var sortNode = xmldso.selectSingleNode("//计算机世界[@contactID=&#39;"+whichFld+"&#39;]"); 
if (sortNode.parentNode.childNodes.length>1) sortNode.parentNode.removeChild(sortNode);  
} 
</SCRIPT> 
<script language="vbscript"> 
Sub cc_onmouseup &#39;当点击“保存”按钮时触发; 
Dim objXML, objXSL, objFSO,strFile, strFileName, strXSL,strURL,TheForm 
set SaveXMLDoc=xmldso.XMLDocument 
strURL="dns2.asp" 
Set objXML = CreateObject("Microsoft.XMLHTTP") &#39;创建MS的XMLHTTP组件; 
objXML.Open "post",strURL,false &#39;采用Post提交方式; 
objXML.setrequestheader "content-type","application/x-www-form-urlencoded" 
objXML.send SaveXMLDoc &#39; 发送信息 
&#39;xmlGet = objXML.responsebody &#39;稍等片刻后,得到服务器端传回来的结果; 
msgbox "保存成功!"  
Set objXML = Nothing 
end sub  
</SCRIPT> 
<center><b>计算机世界----通信录</b><br><br> 
<TABLE id="table" DATASRC=&#39;#xmldso&#39; BORDER CELLPADDING=3> 
<THEAD> 
<TH>编号</TH> 
<TH>部门名称</TH> 
<TH>电话号码</TH> 
<TH>电子邮件</TH> 
</THEAD> 
<TR> 
<TD><acronym title=&#39;点击即可删除该记录&#39;><INPUT TYPE=button size=4 DATAFLD="contactID" onclick="delID(this.value)"></acronym></TD> 
<TD><INPUT TYPE=TEXT DATAFLD="部门名称"></TD> 
<TD><INPUT TYPE=TEXT DATAFLD="电话号码"></TD>  
<TD><INPUT TYPE=TEXT DATAFLD="电子邮件"></TD> 
</TR> 
</TABLE> 
<INPUT TYPE=BUTTON name=dd id=dd VALUE="增加记录" onmouseover="this.focus()" onmousedown="addID();"> 
<INPUT TYPE=BUTTON name=cc id=cc VALUE="保存"></center></BODY></HTML>
Copier après la connexion

*********************** ******* ******************************************* ***

3. dns2.asp (enregistrer le carnet d'adresses en arrière-plan) :

<% 
Set ReceivedDoc = CreateObject("Microsoft.XMLDOM") 
ReceivedDoc.async=False 
ReceivedDoc.load Request 
Set files=Server.CreateObject("Scripting.FileSystemObject") 
Set numtxt=files.CreateTextFile(Server.MapPath("tele.xml"),True) 
numtxt.WriteLine(replace(ReceivedDoc.xml,"?>"," encoding=""gb2312""?>")) 
numtxt.Close 
response.write ReceivedDoc.xml 
%>
Copier après la connexion

****************** ************ ************************************* ************* *

4. tele.xml (document XML du carnet d'adresses) :

<?xml version="1.0" encoding="gb2312"?> 
<中国计算机世界出版服务公司通信录> 
<计算机世界 contactID="1"> 
<部门名称>电话总机</部门名称> 
<电话号码>010-68130909</电话号码> 
<电子邮件>webmaster@ccw.com.cn</电子邮件> 
</计算机世界> 
</中国计算机世界出版服务公司通信录>
Copier après la connexion

****************************************************************************

五、newid.xml(通讯录XML初始化文档):

<?xml version="1.0" encoding="gb2312"?> 
<中国计算机世界出版服务公司通信录> 
<计算机世界 contactID="1"> 
<部门名称>尚未输入</部门名称> 
<电话号码>保密</电话号码> 
<电子邮件>保密</电子邮件> 
</计算机世界> 
</中国计算机世界出版服务公司通信录>
Copier après la connexion

 以上就是用XML数据岛结合Dom制作通讯录的代码实例详解的内容,更多相关内容请关注PHP中文网(www.php.cn)!

相关文章:

php实现在线通讯录功能(附源码),通讯录源码

详解HTML5通讯录获取指定多个人的信息的示例代码

js实现做通讯录的索引滑动显示效果和滑动显示锚点效果

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!