搜尋

熱門關鍵字:

最新文章

  1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. jQuery教學－jQuery讀取XML整合與應用

jQuery教學－jQuery讀取XML整合與應用

2010/11/03

梅問題-jQuery教學-jQuery讀取XML檔

　　使用jQuery已有好一段時間，透過jQueyr除了可跨瀏覽器外，再來就是透過它就可輕鬆的製作出各種的酷炫的特效，一點也不輸給Flash，這也是讓梅干喜歡jQuery的地方，再加上也不用什麼開發工具，記事本就很好用了，但梅干平常在寫時總是習慣把素材資訊寫在網頁中，雖然說這樣子簡單易懂，但每次若遇到要更新時，就得開啟網頁找到相關區塊再作修改，實在有些不便，所以梅干就在想，以前用Flash時最常使用xml來餵資料，若jQuery也可以話，那日後更新不就更加的方便，所以梅干今天花了點時間，研究了一下jQuery讀取xml檔的方式，把讀取出來的資訊寫到網頁中，這樣以後更新時，那只要改xml就好囉！

Step1
首先得先準備好一份XML檔，這邊梅干將這xml命名為source.xml。
source.xml

<?xml version=“1.0” encoding=“UTF-8”?>
<photolist>
    <photo>
        <adsrc>images/ad03.jpg</adsrc>
        <adurl>http://buy.minwt.com/index.php?route=product/product&product_id=56</adurl>
    </photo>
     <photo>
        <adsrc>images/ad02.jpg</adsrc>
        <adurl>http://buy.minwt.com/index.php?route=product/product&product_id=57</adurl>
    </photo>
    <photo>
        <adsrc>images/ad01.jpg</adsrc>
        <adurl>http://buy.minwt.com/index.php?route=product/product&product_id=55</adurl>
    </photo>
</photolist>
Step2
接下來先來看一下jQuery讀取xml檔的基本語法。

$.ajax({
    url:‘source.xml’,
    type: ‘GET’,
    dataType: ‘xml’,//資料型態可以不設定，且此型態不可是text或html
    timeout: 1000,
    error: function(xml){
        alert(‘讀取xml錯誤’+xml); //當xml讀取失敗
    },
    success: function(xml){
      $(xml).find(“photo”).each(function(i){  //取得xml父節點

        var total=$(xml).find(“photo”).length;//xml的總筆數
        var photosrc=$(this).children(“adsrc”).text(); //取得子節點中的src資料
        var photourl=$(this).children(“adurl”).text(); //取得子節點中的url資料
        alert(total+“|”+photosrc+“|”+photourl); //秀出總筆數與xml檔與抓到的欄位
Step3
其實這樣就已經大告成了，接下來梅干就整合運用了一下好友男丁的【[jQ]用 jQuery 做畫廊 – 圖片展示之左右隱藏箭頭】範例，讓裡面的資料是抓外部的xml，這樣以後更新就方便許多囉～
放到<head>~</head>之間：

<script type=“text/javascript” src=“http://code.jquery.com/jquery-latest.pack.js"></script>
<style type=“text/css”>
    .abgne_product_arrow_silder {
        width: 450px;
        height: 250px;
        position: relative;
        border: 1px solid #ccc;
        overflow: hidden;
    }
    .abgne_product_arrow_silder ul, .abgne_product_arrow_silder ul li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .prev {
        background:url(images/prev.gif) no-repeat;
        width: 38px;
        height: 48px;
        position: absolute;
        left: -48px;    /* 先藏在左邊 /
        top: 101px;     / (區塊高-圖片高) / 2 /
        z-index: 100;
    }
    .next {
        background:url(images/next.gif) no-repeat;
        width: 38px;
        height: 48px;
        position: absolute;
        right: -48px;   / 先藏在右邊 /
        top: 101px;     / (區塊高-圖片高) / 2 /
        z-index:100;
    }
    .abgne_product_arrow_silder ul li {
        position: absolute;
        z-index: 1;
    }
    .abgne_product_arrow_silder ul li.selected {
        z-index: 99;
    }
    a img {
        border: none;
    }
</style>
<script type=“text/javascript”>
    / 讀取xml 開始 —————————————————————————— /
    $.ajax({
    url:‘source.xml’,
    type: ‘GET’,
    dataType: ‘xml’,//資料型態可以不設定，且此型態不可是text或html
    timeout: 1000,
    error: function(xml){
        alert(‘讀取xml錯誤’+xml); //當xml讀取失敗
    },
    success: function(xml){
        $(xml).find(“photo”).each(function(i){  //取得xml父節點

            var total=$(xml).find(“photo”).length;//xml的總筆數
            var photosrc=$(this).children(“adsrc”).text(); //取得子節點中的src
            var photourl=$(this).children(“adurl”).text(); //取得子節點中的url

            if(i==0){

              　 $(‘.abgne_product_arrow_silder ul’).append(’<li class=selected><a href=‘+photourl+’ target=blank><img src=‘+photosrc+’ /></a></li>’);
            }else{
                $(‘.abgne_product_arrow_silder ul’).append(’<li><a href=‘+photourl+’ target=blank><img src=‘+photosrc+’ /></a></li>’);
            }

    / 讀取xml結束 —————————————————————————— */

        //當xml讀取完畢時，就載入男丁大的特效【http://abgne.tw/jquery/apply-jquery/hide-left-right-arrow-gallery.html】
        if(i == total-1){
            // 先取得必要的元素並用 jQuery 包裝
            // 並設定箭頭圖片的寬度及其透明度
            // 接著產生兩個放置箭頭用的空白超連結
            var $silder = $(‘.abgne_product_arrow_silder’),
                $li = $(‘ul li’, $silder).not(’:first’).css(‘opacity’, 0).end(),
                arrowWidth = 48 * -1,
                arrowOpacity = .3,
                $arrows = $(’<a href=“#” class=“prev”></a><a href=“#” class=“next”></a>’).css(‘opacity’, arrowOpacity),
                $prev = $arrows.filter(‘.prev’),
                $next = $arrows.filter(‘.next’),
                fadeSpeed = 400;

            // 把箭頭超連結加到 $silder 中
            // 並幫 $silder 加上 hover 事件
            $silder.append($arrows).hover(function(){
                var no = $li.filter(‘.selected’).index();
                arrowAction(no > 0 ? 0 : arrowWidth, no < $li.length - 1 ? 0 : arrowWidth);

            }, function(){
                arrowAction(arrowWidth, arrowWidth);

            });

            // 當滑鼠點擊左右箭頭時
            $arrows.click(function(){
                // 先取出目前顯示的 li 及其排行
                var $selected = $li.filter(‘.selected’),
                    no = $selected.index();

                // 判斷是要上一張還是下一張
                no = this.className==‘prev’ ? no - 1 : no + 1;
                $li.eq(no).stop().fadeTo(fadeSpeed + 100, 1, function(){
                    arrowAction(no > 0 ? 0 : arrowWidth, no < $li.length - 1 ? 0 : arrowWidth);
                }).addClass(‘selected’).siblings().fadeTo(fadeSpeed, 0).removeClass(‘selected’);

                return false;
            }).focus(function(){
                this.blur();
            });

            // 控制左右箭頭顯示或隱藏
            function arrowAction(l, r){
                $prev.stop().animate({ left: l });
                $next.stop().animate({ right: r });
            }
        }
    });
  }
});
</script>
放到<body>~</body>之間：

<div class=“abgne_product_arrow_silder”> <ul></ul> </div>
　　透過讀取外部的xml方便多多，這樣就算一般的空間就可使用，除此之外若日後也可透過server端程式，固定產生xml檔，一來也可減少對主機的負擔，二來也可加快網頁的執行速度，從上方的碼中，可看到其實透過jQuery讀取XML檔相當的簡單喔！若有時常需要更新的朋友們，不坊可試試xml喔！

[範例預覽]　[範例下載]


jquery ajax, jquery應用, jQuery教學, jquery讀取xml, xml教學,