집 > 기사 > php教程 > jQuery를 사용하여 브라우저에서 XML 처리

jQuery를 사용하여 브라우저에서 XML 처리

黄舟원래의: 2016-12-15 09:38:141311검색

XML은 웹의 SGML이지만 XML 커뮤니티만큼 웹에 공개되지는 않았습니다. 웹에서 XML의 가장 눈에 띄는 업적인 XHTML은 정치 및 위원회 디자인에 얽혀 있었고 XForms 및 SVG와 같은 기타 야심차고 기술적으로 건전한 사양은 사용률이 낮아 문제를 겪었습니다. 때로는 XML 형식의 웹 피드(예: RSS 유형 및 Atom)의 인기를 포함하여 XML이 예상치 못한 방식으로 웹에서 성공하는 경우가 있습니다.

일반적인 약어

Ajax: 비동기 JavaScript + XML

API: 애플리케이션 프로그래밍 인터페이스

CSS: Cascading Style Sheets

DOM: 문서 개체 모델

HTML: Hypertext Markup Language

RSS: Real Simple Aggregation

SGML: Standard Generalized Markup Language

SVG: 있음 벡터 그래픽 크기 조정

URI: 통일 자원 식별자

URL: 통일 자원 로케이터

W3C: 월드 와이드 웹 컨소시엄

XHTML: 확장 가능한 하이퍼텍스트 마크업 언어

XML: 확장 가능한 마크업 언어

웹의 다른 기술과 마찬가지로 웹의 XML은 브라우저 중심이지만 웹의 XML 처리에 대한 대부분의 논의는 서버 측에 중점을 두고 있습니다. DeveloperWorks Firefox 및 XML 시리즈에서는 Firefox 브라우저에서 XML을 사용하는 여러 가지 방법을 다룹니다. 불행하게도 브라우저 전반에 걸쳐 XML을 처리하는 것은 브라우저 전반에 걸쳐 HTML을 처리하는 것보다 훨씬 더 이상합니다. 이는 웹에서 너무 많은 XML 처리가 상대적으로 안전한 서버 측 영역에 머무르는 이유 중 하나입니다.

많은 동적 HTML 개발자는 브라우저 간 문제와 브라우저 간 스크립팅의 특이성에 지쳤습니다. 여러 가지 뛰어난 JavaScript 라이브러리의 출현으로 개발자의 삶이 더욱 편리해졌습니다. 이러한 라이브러리 중 가장 인기 있는 라이브러리 중 하나는 jQuery입니다. 이는 DeveloperWorks의 여러 기사에서 다루어진 바 있습니다. 이러한 큰 함정을 피하는 방법을 알고 있다면 jQuery를 사용하여 XML을 처리할 수도 있습니다. 이 기사에서는 실제 시나리오에서 jQuery와 XML을 함께 사용하는 방법, Atom 웹 피드를 사용하는 방법, jQuery에서 XML 작업을 위한 실용적인 패턴을 소개하고 불행한 실제 문제를 해결하는 방법을 보여 드리겠습니다. XML, XML 네임스페이스, HTML, JavaScript 및 jQuery 라이브러리에 대한 기본적인 이해가 필요합니다.

XML 네임스페이스 문제

가장 심각한 문제부터 먼저 다루겠습니다. jQuery는 XML 네임스페이스 문제를 완전히 해결하지 못합니다. 이 잘 알려진 문제는 오랫동안 존재해 왔으며 다양한 해결 방법이 시도되었지만 만족스럽지 못한 결과가 있었습니다. 이상적인 솔루션은 CSS 레벨 3 네임스페이스 선택기에 대한 jQuery의 지원을 활용하여 다음과 같은 새로운 선택기를 추가하는 것일 수 있습니다.

@namespace　ex　url(http://example.com)
ex| quote　{font-weight:bold　}

첫 번째 줄은 http://example.com 네임스페이스의 접두사 선언이고, 두 번째 줄은 새로운 네임스페이스 구성 요소인 A 선택자를 사용하는 타입입니다. 선언된 접두사와 로컬 이름은 파이프 기호로 구분됩니다. 안타깝게도 jQuery는 이 접근 방식을 지원하지 않으므로 네임스페이스 문제를 처리하기 위해 다양한 접근 방식이 취해졌습니다.

위장된 접두사의 중요성

jQuery에서 XML 및 네임스페이스를 처리할 때 가장 일반적인 해킹 중 하나는 네임스페이스를 무시하고 전체 qname(접두사 및 로컬 부분)을 선택하는 것입니다.

$(xml).find("x\:quote").each(function()　{
　　//process　each　node
　});

이 코드는 통과합니다. jQuery의 노드 이름 개념 선택, 즉 DOM nodeName 속성입니다. 여기에는 jQuery 선택기용으로 예약된 기호인 콜론이 포함되어 있으며 백슬래시로 이스케이프해야 합니다. 백슬래시는 JavaScript 스크립트용으로 예약된 기호이며 쌍으로 이루어져야 합니다. 이 해킹은 다른 접두사를 사용하는 네임스페이스와 동등한 문서에서는 작동하지 않습니다.
속성 필터 사용

누군가 다음 방법의 변형, 즉 의사 속성 nodeName에 jQuery 속성 필터를 사용하여 성공적으로 사용했다고 합니다.

$(xml ).find( "[nodeName=x:quote]").each(function()　{
　　//process　each　node
　});

1.3.x 이전 버전의 jQuery를 사용하는 경우, nodeName을 지정해야 합니다. 앞에 @를 추가하세요. 그러나 그렇게 하면 이전 섹션인 접두사 가장의 중요성에서 언급한 접근 방식과 동일한 기본 문제가 발생합니다. 이는 많은 실제 네임스페이스 시나리오를 깨뜨릴 것입니다. 다음 변형을 시도했는데 더 의미가 있습니다.

$(xml).find("[namespaceURI='http://example.com'][localName='quote']")
.each(function()　{
　　//process　각　노드
　});

안타깝게도 이 방법은 작동하지 않습니다.

좋은 플러그인을 찾고 있습니다

这种混乱不完全是 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 例子

　　　　
　　　　　　　　jQuery　XML　workbench
　　　　　　　　
　　　　　　　　
　　　　　　　　
　　　　　　　　
　　　　
　　　　
　　　　
　　　　

A　few　quotations　for　your　enjoyment

jQuery, 워크벤치 JavaScript 및 애플리케이션별 스크립트를 자동으로 로드하려면 스크립트 요소가 필요합니다. target_XML에서 사용하는 XML 파일을 식별하려면 link 요소도 필요합니다. 여러 XML 파일로 작업해야 하는 경우 워크벤치 설정을 쉽게 확장할 수 있습니다. 목록 2(workbench.js)는 워크벤치 스크립트입니다.

목록 2(workbench.js). jQuery XML 워크벤치 JavaScript

/*　
workbench.js
*/
// jQuery 후크가 준비되었습니다
$(document).ready(function(){
　 // 대상 XML 파일 내용 가져오기(Ajax 호출)
var fileurl = $("link[rel='target_XML']" ).attr('href ');
$.ajax({
url: fileurl,
유형: "GET",
dataType: "xml",
완료: 🎜>　error: error_func
　} );
});

// Ajax 호출로 인해 오류가 발생한 경우를 위한 콜백

function error_func(result) {
Alert(result .responseText);
}　

//ns_filter, XML 네임스페이스 쿼리를 위한 jQuery 확장.

(function($) {
$.fn.ns_filter = function(namespaceURI, localName) {
return $(this) .filter(function() {
var domnode = $(this)[0];
　});
　};

})(jQuery);

워크벤치 코드에는 주석이 잘 달렸지만 여기서는 몇 가지 참고할 사항이 있습니다. 네임스페이스 필터는 목록의 마지막 기능입니다. 첫 번째 함수는 홈페이지 DOM이 완전히 준비된 후 호출되는 일반 jQuery 후크입니다. 대상 XML의 URL을 검색하고 Ajax를 호출하여 파일을 로드합니다. dataType: "xml"은 Ajax 메커니즘에 XML 응답 파일을 구문 분석하도록 지시합니다. 오류가 발생하면 error_func 콜백 함수를 호출하고, 그렇지 않으면 사용자가 애플리케이션 동작을 위해 제공하는 xml_ready 콜백 함수를 호출합니다. 이 콜백 함수는 responseXML 속성을 사용하여 XML을 검색할 수 있는 결과 스키마를 사용합니다. 목록 3(quotes.js)은 이 경우의 애플리케이션 코드입니다.

목록 3. (quotes.js) 동적 인용 뷰어용 애플리케이션 코드

quotes.js

*/
function xml_ready(result){
var　xml = result.responseXML;
//데이터 삽입 대상 영역이 명확한지 확인 .find('*').ns_filter('http://example.com', 'q').each( function(){
　var　quote_text　=$(this).text()

　　$('

')
　　.html(quote_text)
　　　. appendTo('#update-target　ol');

　}); //close　each(

}

목록 4(quotes1.xml)는 인용문 목록이 포함된 XML 파일입니다.

목록 4. (quotes1.xml)은 인용 목록이 포함된 XML 파일입니다

단어에는 의미가 있고 이름에는 힘이 있습니다

막대기 모래돌은 내 뼈를 부러뜨릴 것이지만 이름은 결코 나에게 해를 끼치지 않습니다.

지혜의 시작은 사물의 올바른 이름을 부르는 것입니다.
말을 듣는 것보다 얼굴을 보는 것이 더 좋습니다. name.

x 접두사를 사용했다는 점에 유의하세요. 이는 이론적으로 언급된 접두사 기반 해킹을 시도할 수 있음을 의미합니다. 위에. 그러나 이렇게 하면 Listing 4와 정확히 동일한 네임스페이스 및 동일한 Canonical XML인 Listing 5(quotes2.xml)의 따옴표 파일로 바꾸면 손상됩니다.

목록 5. (quotes2.xml) 목록 4와 동일하며 인용 목록이 포함된 XML 파일

뼈는 있지만 이름은 결코 아프지 않습니다.

지혜의 시작은 올바른 이름으로 사물을 불러보세요.

이름을 듣는 것보다 얼굴을 보세요.

如果您替代清单 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 页面

　　　　
　　　　　　　　jQuery　XML　workbench
　　　　　　　　
　　　　　　　　
　　　　　　　　
　　　　　　　　
　　　　
　　　　
　　　　
　　　　

Caesar's　home　page

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.

My　Web　feed

清单 7(atom1.xml)是引사용적 Atom 文件。

清单 7.(atom1.xml) Atom 文件示例

　　　xml:lang="en"
　　　xml:base="http://www.example.org">
　http://www.example.org/myfeed< /id>
　내　Simple　피드
　2005-07-15T12:00:00Z
　
　
　Uche　Ogbuji
　　　http://www.example.org/entries/1
　　A　simple　blog　entry
　　
　　2005-07-14T12:00:00Z
　　

이것이　　　간단　블로그　항목

　
　
　　http://www.example.org/entries/2
　　
　　< ;link　href="/blog/2005/07/2"　/>
　　2005-07-15T12:00:00Z
　　

이것이　　간단　블로그　항목입니다　없이 제목

　

清单 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('*') .ns_filter(ATOM_NS,　'요약').clone();

　　　　//　　　사건　　　a　　　title
　　　　if　(!title_elem.text()){
　　　　　　title_elem　=　'[No　제목]';
　　　　}　

　　　　//　rel='alternate'　is　생략된　　　를 처리　
　　　　if　(!link_text){
　　　　　　link_text　=　$(this) .find('*')
　　　　　　　　　　　　　　　　.ns_filter(ATOM_NS,　'link ')
　　　　　　　　　　　　　　　　.not('[rel]')
　　　　　　　　　　　　　　　　.attr( 'href');
　　　　}　

　　　　//　　대상　지역　　　　항목　정보
　　　　$( '

')
　　　　　　.append(
　　　　　　　　$('')
　　　　　　　　.append (title_elem)
　　　　　　)
　　　　　　.append('　-　')
　　　　　　.append(summary_elem.clone())
　　　　　　.fadeIn('느린')　//bonus　animation
　　　　　　.appendTo(' #업데이트-대상');
　　});　//close　각(
}

다시 한번 이 파일에 댓글을 달았지만 몇 가지 강조할 점이 있습니다. Atom에는 허용 가능한 요소 변형이 많이 있으며 대부분은 선택 사항입니다. 이는 예외를 처리해야 함을 의미합니다. 두 가지 일반적인 예외를 인용하겠습니다. 필수 링크의 선택적인 rel="alternate"와 제목이 선택 사항이라는 사실입니다. 보시다시피 jQuery는 이러한 상황을 처리하는 데 엄청난 유연성을 제공하므로 이 불규칙한 XML 형식도 처리할 수 있어야 합니다. 어떤 경우에는 구조를 XML에서 기본 문서(호스팅 HTML)로 직접 복사했습니다. 이를 위해서는 세심한 주의가 필요하며, 한 문서에서 다른 문서로 노드를 접목하지 않도록 하기 위해 clone() 메서드를 사용한다는 점을 알 수 있을 것입니다. 그렇지 않으면 DOM 예외 WRONG_DOCUMENT_ERR이 발생합니다. 또한 추가된 콘텐츠가 보기에서 천천히 사라지도록 jQuery 메서드 fadeIn을 사용했습니다. 그림 2는 home.html의 브라우저 디스플레이입니다.

위 내용은 jQuery를 사용하여 브라우저에서 XML을 처리하는 내용입니다. 더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

성명：

jQuery를 사용하여 브라우저에서 XML 처리

A few quotations for your enjoyment

Caesar's home page

My Web feed

관련 기사

A　few　quotations　for　your　enjoyment

Caesar's　home　page

My　Web　feed