HTML

P!ng Média

P!ng Média hivatalos blogja.

Légy Facebook fanunk!

Friss topikok

Linkblog

2009.11.10. 21:14 nemkene

|MNK| 10# jQuery XML olvasó. JS

Címkék: js jquery mnk

A PHP-s kódok után most egy kicsit a kliens oldali programozás vizeire vezünk, mégpedig a jQuery JavaScript könyvtár vizeire. Első kódunk egy nagyon hasznos XML olvasó mellyel bármely XML file-t kezelni tudjuk.

Ami kell:

  - a legfrisebb jQuery
  - jParse:

/*
 * jParse (Beta) v0.1
 * jparse.kylerush.net
 *
 * Copyright (c) 2009 Kyle Rush
 * Licensed under the MIT license.
 * http://creativecommons.org/licenses/MIT/
 *
 * Date: Wednesday, 7 Oct 2009
 */
(function($){$.fn.extend({jParse:function(l){var m={ajaxOpts:{dataType:($.browser.msie)?"text":"xml",contentType:'text/xml'},
parentElement:'item',elementTag:['title','link','description'],output:'<div><h2><a href="jpet1">jpet0</a></h2><p>jpet2</p></div>'};settings=$.extend(true,m,l);if(settings.precallback!==undefined){runPreFunc=eval(settings.precallback)}var p=$(this);var q=/\:/;settings.ajaxOpts.success=function(b){var c;if(typeof b=="string"){c=new ActiveXObject("Microsoft.XMLDOM");c.async=false;c.loadXML(b)}else{c=b}var o=settings;var d=$(c).find(o.parentElement);var e='';var f=0;function nodeChecker(a){if(q.test(a)===true){elemTagName='[nodeName='+a+']'}else{elemTagName=a}}
for(var i=0;i<d.length;i++){if(f>=settings.limit){$(p).append(e);if(settings.callback!==undefined){runPostFunc=eval(settings.callback)}return false}var g=o.output;var h=false;for(var n=0;n<o.elementTag.length;n++){var j=new RegExp('jpet'+[n]);if(typeof(o.elementTag[n])=='string'){nodeChecker(o.elementTag[n]);elemTagValue=$(d[i]).find(elemTagName).text();elemTagValue=elemTagValue.replace(/^\[CDATA\[/,'').replace(/\]\]$/,'')}else{nodeChecker(o.elementTag[n].elem);if(o.elementTag[n].attr===undefined){elemTagValue=$(d[i]).find(elemTagName).text()}
else{elemTagValue=$(d[i]).find(elemTagName).attr(o.elementTag[n].attr)}
if(o.elementTag[n].exclude!==undefined){var k=new RegExp(o.elementTag[n].exclude);if(k.test(elemTagValue)===true){h=true}}}g=g.replace(j,elemTagValue)}if(h!==true){e+=g;f++}}$(p).append(e);if(settings.callback!==undefined){runPostFunc=eval(settings.callback)}};return this.each(function(){$.ajax(settings.ajaxOpts)})}})})(jQuery);
                   
Kód:

<script type='text/javascript'>
$('#digg-feed').jParse({
    ajaxOpts: {url: 'http://feeds.digg.com/digg/popular.rss'},
    elementTag: ['title', 'link', 'digg:category', 'digg:diggCount'],
    output: '<div class="digg-entry-cont"><h4><a href="jpet1">jpet0</a></h4><p>Category: jpet2 | Comments: jpet3</p></div>',
    count: '#count'
});
</script>
<div id='digg-feed'></div>
Ebben a példában a digg.com rss-ét formázzuk és iratjuk ki.
Az ajaxOpts: url rész után kell megadni a feldolgozni kívánt xml file-t.
Az elementTag részben azokat az xml tageket kell megadnunk amit kiolvasni kívánunk.
Az output részben pedig megformázzuk a kimenetet. itt a jpet változók az elementTag-ban megadott tag-eket azonosítják. Jelen esetben a jpet0 a title-t azonosítja.

Szólj hozzá!

A bejegyzés trackback címe:

http://pingmedia.blog.hu/api/trackback/id/tr491516528

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben.

Nincsenek hozzászólások.