XML ist das SGML des Webs, aber es ist im Web noch nicht so sichtbar geworden wie die XML-Community. Die bedeutendste Errungenschaft von XML im Web – XHTML – war in die Gestaltung von Politik und Gremien verwickelt, und andere ehrgeizige, technisch einwandfreie Spezifikationen – wie XForms und SVG – wurden nur selten genutzt. Manchmal ist XML im Web auf unerwartete Weise erfolgreich, einschließlich der Beliebtheit XML-formatierter Web-Feeds (wie RSS-Typen und Atom).
Gemeinsame Abkürzungen
Ajax: Asynchrones JavaScript + XML
API: Application Programming Interface
CSS: Cascading Style Sheets
DOM: Dokumentobjektmodell
HTML: Hypertext Markup Language
RSS: Real Simple Aggregation
SGML: Standard Generalized Markup Language
SVG: Ja Skalierung von Vektorgrafiken
URI: Uniform Resource Identifier
URL: Uniform Resource Locator
W3C: World Wide Web Consortium
XHTML: Extensible Hypertext Markup Languages
XML: Extensible Markup Language
Wie andere Technologien im Web ist XML im Web browserzentriert, aber die meisten Diskussionen über die Verarbeitung von XML im Web konzentrieren sich auf die Serverseite. In der DeveloperWorks Firefox- und XML-Reihe beschreibe ich verschiedene Möglichkeiten, XML im Firefox-Browser zu verwenden. Leider ist die browserübergreifende Verarbeitung von XML noch seltsamer als die browserübergreifende Verarbeitung von HTML, was einer der Gründe dafür ist, dass so viel XML-Verarbeitung im Web im relativ sicheren Bereich der Serverseite verbleibt.
Viele dynamische HTML-Entwickler haben genug von den browserübergreifenden Problemen und den Eigenheiten der Skripterstellung zwischen Browsern. Das Aufkommen mehrerer hervorragender JavaScript-Bibliotheken hat das Leben der Entwickler einfacher gemacht. Eine der beliebtesten dieser Bibliotheken ist jQuery, die in mehreren Artikeln auf DeveloperWorks behandelt wurde. Wenn Sie wissen, wie Sie diese großen Fallstricke umgehen können, können Sie auch jQuery zur Verarbeitung von XML verwenden. In diesem Artikel zeige ich Ihnen, wie Sie jQuery und XML in einem realen Szenario zusammen verwenden, wie Sie Atom-Web-Feeds verwenden, ein praktisches Muster für die Arbeit mit XML in jQuery vorstelle und unglückliche Probleme aus der realen Welt löse. Sie benötigen ein grundlegendes Verständnis von XML, XML-Namespaces, HTML, JavaScript und der jQuery-Bibliothek.
XML-Namespace-Probleme
Ich werde zuerst die schwerwiegendsten Probleme behandeln. jQuery löst das XML-Namespace-Problem nicht vollständig. Dieses bekannte Problem besteht schon seit langem und es wurden verschiedene Lösungen ausprobiert, die jedoch zu unbefriedigenden Ergebnissen führten. Die ideale Lösung könnte darin bestehen, die Unterstützung von jQuery für CSS Level 3-Namespace-Selektoren zu nutzen, wodurch ein neuer Selektor wie dieser hinzugefügt wird:
@namespace ex url(http://example.com);
ex| quote {font-weight: Bold }
Die erste Zeile ist die Präfixdeklaration des http://example.com-Namespace und die zweite Zeile ist ein Typ, der die neue Namespace-Komponente verwendet. Ein Selektor, in dem die Deklariertes Präfix und lokaler Name werden durch ein Pipe-Symbol getrennt. Leider unterstützt jQuery diesen Ansatz nicht, daher wurden verschiedene Ansätze zur Lösung von Namespace-Problemen gewählt.
Bedeutung verschleierter Präfixe
Einer der häufigsten Hacks beim Umgang mit XML und Namespaces in jQuery besteht darin, den Namespace zu ignorieren und den vollständigen qname (Präfix und lokaler Teil) auszuwählen.
$(xml).find("x\:quote").each(function() {
//process each node
});
Dieser Code wird übergeben Auswahl des Knotennamenkonzepts von jQuery, dh des DOM-NodeName-Attributs. Es enthält einen Doppelpunkt, der ein reserviertes Symbol für jQuery-Selektoren ist und mit einem Backslash maskiert werden muss. Backslashes sind reservierte Symbole für JavaScript-Skripte und müssen paarweise vorhanden sein. Dieser Hack funktioniert nicht in Namespace-äquivalenten Dokumenten, die unterschiedliche Präfixe verwenden.
Attributfilter verwenden
Es heißt, dass jemand erfolgreich eine Variation der folgenden Methode verwendet hat, nämlich die Verwendung eines jQuery-Attributfilters für das Pseudoattribut nodeName:
$(xml ).find( "[nodeName=x:quote]").each(function() {
//process each node
});
Verwendung von jQuery-Versionen vor 1.3.x, Sie müssen „nodeName“ und „@“ vorne angeben. Dies birgt jedoch das gleiche grundlegende Problem wie der im vorherigen Abschnitt erwähnte Ansatz: Die Bedeutung der Maskierung von Präfixen. Es wird viele echte Namespace-Szenarien zerstören. Ich habe die folgende Variante ausprobiert, die sinnvoller ist:
$(xml).find("[namespaceURI='http://example.com'][localName='quote']")
.each(function() {
//process each node
});
Leider funktioniert das nicht.
Auf der Suche nach einem guten Plugin
这种混乱不完全是 jQuery 的错。DOM 为寻找节点提供了有效的方法：getElementsByTagName 和 getElementsByTagNameNS。后者旨在感知名称空间，接受名称空间的 URI 并忽略前缀，但遗憾的是，尽管其他浏览器都支持它，但 Microsoft® Internet Explorer® 除外。然而，jQuery 的目的是处理此类浏览器问题，以便消除人们的此类烦恼。一种可能的、牵强的理由是，jQuery 很大程度上以 CSS 作为其选择器的基础，并且即使是 W3C CSS Level 3 名称空间选择器也无法使它通过工作草案阶段。jQuery bug #155，“Get Namespaced Elements in XML Documents”，涵盖了这些问题，但是问题在 3 年之内没有得到解决。
Ryan Kelly 遇到此问题并做了一次大胆的尝试，为 XML Namespace Selector 创建了一个 jQuery 插件 jquery.xmlns.js。它试图支持以下代码。
$.xmlns["ex"] = "http://example.com";
$(doc).find("ex|quote").each(...);
第一行是对该插件的全局名称空间声明 — 由于底层 jQuery 机制的局限性。它的确用典型的 jQuery 用语为名称空间范围提供一个非全局块。 遗憾的是，我在使用这种扩展时成败参半。我希望它能够改变，并最终找到合适的方法进入 jQuery 。
一个更简单的插件
我最终选择的解决方案是创建一个简单插件，它不使用 jQuery 选择器做任何特殊工作，而是添加一个新的过滤器。您可以直接传递一个名称空间和本地名称到该过滤器，从而使结果集与节点匹配。请您按以下方法使用它：
$(xml).find('*').ns_filter('http://example.com', 'quote').each(function(){
.each(function() {
//process each node
});
ns_filter 是我写的特殊过滤器。执行一个单独的 find('*') 的需求看起来可能不优雅，更简单的变化可能是：
$(xml).find('quote').ns_filter('http://example.com').each(function(){
.each(function() {
//process each node
});
然而，这样做并不可行，因为您不能相信 jQuery 能够以名称空间中立（即作为本地名称选择器）的方式来处理查询，例如 find('quote')。我的过滤器实现将在下一节提供，作为安装 jQuery 来处理 XML 的一般系统的一部分。我在 Mac OS X Snow Leopard 操作系统下的 Firefox 3.5.5 和 Safari 4.0.4 ，以及 Windows® XP 操作系统最新的 Internet Explore 7 和 Internet Explorer 8 浏览器中对它进行了测试。
jQuery XML 工作台
名称空间问题只是以下事实的症状：说到底，jQuery 是一个 HTML 工具。我发现，使用 jQuery 处理 XML 最实用的方式就是为 XML 文档创建一个 HTML 工作台，通过可靠地跨浏览器方法引用脚本，然后建立需要的暂时性解决方案，例如针对 XML 名称空间问题的解决方案。您可以用工作台模式准备并测试您基于浏览器的 XML 处理的模式和技术，您甚至还可以把工作台作为基于浏览器的应用程序本身的基础。
清单 1 （quotes.html）是 HTML 使用工作台的简单例子。它能够动态地从 XML 文件加载引用。
清单 1 （quotes.html）. 使用 jQuery XML 工作台的 HTML 例子
Sie benötigen das Skriptelement, um jQuery, Workbench-JavaScript und Ihre anwendungsspezifischen Skripte automatisch zu laden. Sie benötigen außerdem ein Link-Element, um die von target_XML verwendete XML-Datei zu identifizieren. Wenn Sie mit mehreren XML-Dateien arbeiten müssen, können Sie Ihr Workbench-Setup problemlos erweitern. Listing 2 (workbench.js) ist das Workbench-Skript.
Listing 2 (jQuery XML Workbench JavaScript
/*
workbench.js
*/
// Der jQuery-Hook ist bereit
$(document).ready(function(){
// Den Inhalt der Ziel-XML-Datei abrufen (Ajax-Aufruf)
var fileurl = $("link[rel='target_XML']" ).attr('href ');
$.ajax({
url: fileurl,
Typ: „GET“,
Datentyp: „xml“,
vollständig: 🎜> Fehler: error_func
} );
});
function error_func(result) {
warning(result .responseText);
}
(function($) {
$.fn.ns_filter = function(namespaceURI, localName) {
return $(this) .filter(function() {
var domnode = $(this)[0];
});
};
})(jQuery);
Der Workbench-Code wurde gut kommentiert, es gibt jedoch einige Dinge, die hier beachtet werden müssen. Der Namespace-Filter ist die letzte Funktion in der Auflistung. Die erste Funktion ist ein normaler jQuery-Hook, der aufgerufen wird, nachdem das Homepage-DOM vollständig vorbereitet ist. Es ruft die URL für das Ziel-XML ab und ruft Ajax auf, um die Datei zu laden. Beachten Sie, dass dataType: „xml“ den Ajax-Mechanismus anweist, die XML-Antwortdatei zu analysieren. Wenn ein Fehler auftritt, ruft es die Rückruffunktion error_func auf, andernfalls ruft es die Rückruffunktion xml_ready auf, die vom Benutzer für das Anwendungsverhalten bereitgestellt wird. Diese Rückruffunktion verwendet das Ergebnisschema, aus dem Sie mithilfe des Attributs „responseXML“ XML abrufen können. Listing 3 (quotes.js) ist in diesem Fall der Anwendungscode.
Listing 3. (quotes.js) Anwendungscode für den dynamischen Zitat-Viewer
/*
quotes.js*/
function xml_ready(result){
var xml = result.responseXML;
//Stellen Sie sicher, dass der Zielbereich zum Einfügen von Daten frei ist .find('*').ns_filter('http://example.com', 'q').each( function(){
var quote_text =$(this).text()
$('
}
Listing 4 (quotes1.xml) ist eine XML-Datei mit einer Zitatliste
Listing 4. (quotes1.xml) ist eine XML-Datei mit einer Zitatliste
meine Knochen, aber Namen werden mir nie schaden.
Der Anfang der Weisheit ist Nennen Sie Dinge beim richtigen Namen.
das Gesicht, anstatt den Namen zu hören.
如果您替代 清单 1 中的 quotes2.xml，您将发现它还起作用，这是一个针对名称空间的重要测试。图 1 是 quotes.html 的浏览器显示。
图 1. 使用 jQuery XML 工作台展示的引用
Atom XML 的动态显示
一旦您开始在 jQuery 中进行 XML 处理，您就能够处理更多有用的 XML 格式，包括 Web 提要格式，例如 RSS 和 Atom。在此部分我将使用 jQuery XML 工作台来显示来自一个 Web 页面上 Atom 提要的最新条目。清单 6 是 HTML 页面。
清单 6. （home.html）托管动态 XML 的 Web 页面
GALLIA est omnis divisa in partes tres, quarum unam incolunt Belgae,
aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli
appellantur. Hi omnes lingua, institutis, legibus inter se differunt.
Gallos ab Aquitanis Garumna flumen, a Belgis Matrona et Sequana dividit.
Horum omnium fortissimi sunt Belgae, propterea quod a cultu atque
humanitate provinciae longissime absunt, minimeque ad eos mercatores saepe
commeant atque ea quae ad effeminandos animos pertinent important,
proximique sunt Germanis, qui trans Rhenum incolunt, quibuscum continenter
bellum gerunt. Qua de causa Helvetii quoque reliquos Gallos virtute
praecedunt, quod fere cotidianis proeliis cum Germanis contendunt, cum aut
suis finibus eos prohibent aut ipsi in eorum finibus bellum gerunt.
清单 7（atom1.xml）是引用的 Atom 文件.
清单 7. （atom1.xml ） Atom 文件示例
xml:base="http://www.example.org">
< ;link href="/blog/2005/07/2" />
清单 8 是 home.js, 包含了加载到工作台上的动态应用程序代码。
清单 8. （home.js）主页 Web 提要显示的应用程序代码
home.js
*/var ATOM_NS = 'http://www. w3 .org/2005/Atom';
function xml_ready(result){
var xml = result.responseXML;
$( "#update-target").empty();
$(xml).find('*').ns_filter(ATOM_NS, 'entry').each(function(){
var title_elem = $( this).find('*').ns_filter(ATOM_NS, 'title').clone();
var link_text = $(this).find('[rel="alternate"]')
. ns_filter(ATOM_NS, 'link')
.attr('href');
var summary_elem = $(this).find('*').n s_filter(ATOM_NS, 'summary').clone();
//Behandeln den Fall eines fehlenden Titels
if (!title_elem.text()){
}
//Deal with the case where rel='alternate' is omitte ('*')
.ns_filter(ATOM_NS, 'link ')
.attr ('href');
}
//Aktualisieren den Zielbereich mit den Eintragsinformationen
$( '
)
.append(' - ')
.append(summary_elem.clone())
.fadeIn('slow') //bonus animation
.appendTo(' #update-target');
}); //close each(
}
Ich habe diese Datei noch einmal kommentiert, aber es gibt ein paar Punkte, die es wert sind, hervorgehoben zu werden. Atom verfügt über viele akzeptable Elementvariationen, von denen die meisten optional sind. Das bedeutet, dass Sie Ausnahmen behandeln müssen. Ich nenne zwei häufige Ausnahmen: optionales rel="alternate" für einen erforderlichen Link und die Tatsache, dass der Titel optional ist. Wie Sie sehen, bietet jQuery eine enorme Flexibilität bei der Handhabung dieser Situationen, sodass Sie selbst mit diesem unregelmäßigen XML-Format umgehen können sollten. In einigen Fällen habe ich die Struktur direkt aus XML in das Hauptdokument (gehostetes HTML) kopiert. Dies erfordert große Sorgfalt, und Sie werden feststellen, dass ich die Methode clone() verwende, um sicherzustellen, dass ich keine Knoten von einem Dokument auf ein anderes übertrage, da andernfalls eine DOM-Ausnahme WRONG_DOCUMENT_ERR ausgegeben wird. Zusätzlich habe ich die jQuery-Methode fadeIn verwendet, damit der hinzugefügte Inhalt langsam aus der Ansicht verschwindet. Abbildung 2 ist die Browseranzeige von home.html.
Das Obige verwendet jQuery, um XML im Browser zu verarbeiten. Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.cn)!
