כיצד ליצור קורא RSS App ב - JavaScript

RSS (סינדיקציה פשוטה באמת) הוא פורמט סטנדרטי בשימוש על ידי שותפים באינטרנט כדי להפיץ את התוכן שלהם אל אתרי אינטרנט ושירותים אחרים. An מסמך, הידוע גם בשם הזנה, הוא מסמך XML נושא את התוכן שהמו"ל מבקש להפיץ.

הזנות RSS זמינים כמעט בכל אתרי חדשות באינטרנט ובלוגים עבור הקוראים שלהם להישאר מעודכן עם התוכן שלהם. ניתן גם למצוא אותם אתרים שאינם מבוססי טקסט כגון YouTube, שבו תוכל להשתמש בעדכון של ערוץ YouTube הודיע על הסרטונים האחרונים.

תוכניות הזנות אלה הזנות, לקרוא ולהציג את התוכן שלהם נקראים קוראי RSS. אתה יכול ליצור פשוט קורא RSS התוכנית ב- JavaScript. במדריך זה, נראה כיצד.

מבנה של עדכון RSS

עדכון RSS יש מרכיב שורש שקוראים לו , דומה ל התג נמצא במסמכי HTML. בתוך ה תג, יש אלמנט, סוג של כמו ב- HTML, זה כולל הרבה תת אלמנטים המכיל את התוכן המופץ של האתר.

הזנה בדרך כלל נושא כמה מידע בסיסי כגון הכותרת, כתובת האתר והתיאור של האתר ושל הודעות, מאמרים או תוכן אחר של אתר זה. מידע זה נמצא ב </code>, <code><link></code>, ו <code><description></code> אלמנטים בהתאמה. כאשר התגים האלה הם ישירות פנימה <code><channel></code>, הם מחזיקים את הכותרת, כתובת האתר, ואת התיאור של האתר. כאשר הם נוכח בפנים <code><item></code> כי מחזיקה את המידע על ההודעות המעודכנות, הם מייצגים את אותו מידע כמו קודם, אבל זה של התוכן היחיד שכל אחד מהם <code><item></code> מייצג. יש גם כמה רכיבים אופציונליים אשר עשוי להיות נוכח עדכון RSS, מתן מידע משלים כגון תמונות או זכויות יוצרים על תוכן מבוזר. אתה יכול ללמוד עליהם על זה RSS 2.0 מפרט at cyber.harvard.edu. הנה דוגמה של איך הזנת RSS של אתר אינטרנט עשוי להיראות כך: <pre name="code"> <rss version="2.0"> <channel> <title>הונגקיאט https://www.hongkiat.com/ עיצוב טיפים, הדרכה והשראות en-us דמיינו כל גיליון סגנונות CSS עם סטטיסטיקת CSS תהית פעם כמה כללי CSS נמצאים בגיליון סגנונות? או האם אי פעם רצית לראות ... 18/05/2017 https://www.hongkiat.com/blog/css-stylesheet-with-css-stats/ אמזון הד - האחרונה אמזון אינה זרה לרעיון של מערכות בית חכם עם עוזר דיגיטלי מוטבע. אחרי הכל… 17/05/2017 https://www.hongkiat.com/blog/alexa-device-amazon-echo-show/

`מאחזר את העדכון`

 אנחנו צריכים הבא את ההזנה עם יישום קורא RSS שלנו. באתר אינטרנט, כתובת האתר של עדכון RSS יכול להיות נמצא בתוך  תג באמצעות יישום / rss + xml הקלד. לדוגמה, תמצא את הקישור הבא RSS Feed על Hongkiat.com.
   
 ראשית, בואו נראה איך לקבל את כתובת האתר של עדכון של אתר אינטרנט באמצעות.
  (htmlTxt) => var domParser = חדש DOMParser () תן doc = domParser.parseFromString (htmlTxt, 'טקסט / html') var [=] => console.error ('שגיאה בהבאת האתר')). 
 ה אחזור () השיטה היא שיטה גלובלית אסינכרוני מביאה משאב. היא לוקחת את כתובת האתר של המשאב כארגומנט (כתובת האתר של האתר בקוד שלנו). זה מחזירה א הבטחה אובייקט, ולכן כאשר השיטה מוצלחת להביא את האתר (כלומר הבטחה הוא מילא), את הפונקציה הראשונה בתוך לאחר מכן() הצהרה מטפל בתגובה שנלקחה (ייצור בקוד לעיל).
  התגובה שנלקחה היא אז לקרוא במלואו לתוך מחרוזת טקסט משתמש ב טקסט () שיטה. טקסט זה מייצג את טקסט HTML של אתר האינטרנט שלנו. כמו אחזור (), טקסט () גם מחזירה א הבטחה אובייקט. לכן, כאשר הוא יוצר בהצלחה טקסט תגובה מתוך זרם התגובה, לאחר מכן() יטפל באותו טקסט תגובה (htmlText בקוד לעיל).
 לאחר טקסט HTML של האתר זמין, אנו משתמשים ממשק API של DOMParser ל לנתח אותו למסמך DOM. DOMParser מנתח מחרוזת טקסט XML / HTML למסמך DOM. השיטה שלה, parseFromString (), לוקח שני טיעונים: ה טקסט שיש לנתח וה סוג תוכן.
 לאחר מכן, מתוך מסמך DOM שנוצר, אנחנו למצוא את ה href הערך הרלוונטי  תג משתמש ב querySelector () שיטה כדי לקבל את כתובת האתר של העדכון.
 ניתוח והצגה של העדכון
 לאחר שקיבלנו את כתובת האתר של עדכון האתר, אנחנו צריכים לאחזר ולקרוא את מסמך ה- RSS נמצא בכתובת אתר זו.
  אחזור (feedUrl). אז ((res) => res.text () ולאחר מכן ((xmlTxt => var domParser = חדש DOMParser () תן doc = domParser.parseFromString (xmlTxt, 'text / XML') doc htextContent = item.querySelector ('כותרת'). textContent document.querySelector ('פלט'). appendChild (h1))) 
 באותו אופן שבו הבאנו וניתוח האתר, עכשיו אנחנו לקבל ולנתח את עדכון XML למסמך DOM. כדי להשיג זאת, אנו משתמשים 'text / XML' סוג תוכן parseFromString () שיטה.
 במסמך מנותח, אנחנו בחר את כל  אלמנטים משתמש ב השאילתה השיטה לולאה דרך כל אחד.
 בתוך כל אלמנט, אנחנו יכולים תגי גישה כמו </code>, <code><description></code>, ו <code><link></code>, כי הם נושאים את התוכן להאכיל. ו, פשוט שלנו קורא RSS היישום נעשה, אתה יכול לסגנון את התוכן של הזנות שנלקחו כפי שאתה רוצה.</p> <h4>גיטאב הדגמה</h4> <p>אתה יכול לבדוק את <strong>גרסה מפורטת יותר</strong> של הקוד המשמש בפוסט זה ב- ריטו Github שלנו. גרסה מפורטת יותר <strong>מביא שלוש הזנות</strong> (Mozilla Hacks, Hongkiat ובבלוג Webkit) <strong>באמצעות קובץ JSON</strong> וגם מוסיף כמה סגנונות CSS לקורא RSS.</p>


			<div class="rek-block">
				<center>
						<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-6284591903398394"
     data-ad-slot="6432271471"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
				</center>
			</div>

		</div>
	</div>

	<div class="col-md-4">
<div class="bar">

    <div class="rek-block">
        <center>
                <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-6284591903398394"
     data-ad-slot="6432271471"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
        </center>
    </div>

    
    <div class="barpost">
            <div class="bar-post-img"><a href="/articles/howto/how-to-create-a-secretly-disguised-folder-without-extra-software.html"><img src="//savtec.org/img/images_7/how-to-create-a-secretly-disguised-folder-without-extra-software_11.png" alt=""></a></div>
            <div class="bar-post-h1"> <a href="/articles/howto/how-to-create-a-secretly-disguised-folder-without-extra-software.html">כיצד ליצור חשאי מוסווית התיקייה ללא תוספת תוכנות</a> </div>
    </div>
    

    
    <div class="barpost">
            <div class="bar-post-img"><a href="/articles/computer-tips/how-to-create-a-secured-and-locked-folder-in-windows-xp.html"><img src="//savtec.org/img/images/how-to-create-a-secured-and-locked-folder-in-windows-xp.jpg" alt=""></a></div>
            <div class="bar-post-h1"> <a href="/articles/computer-tips/how-to-create-a-secured-and-locked-folder-in-windows-xp.html">כיצד ליצור תיקיה מאובטחת נעול ב - Windows XP</a> </div>
    </div>
    

    
    <div class="barpost">
            <div class="bar-post-img"><a href="/articles/coding/how-to-create-a-responsive-navigation.html"><img src="//savtec.org/img/images_2/how-to-create-a-responsive-navigation.jpg" alt=""></a></div>
            <div class="bar-post-h1"> <a href="/articles/coding/how-to-create-a-responsive-navigation.html">כיצד ליצור ניווט תגובה</a> </div>
    </div>
    
        

</div>
	</div>

</div>
</div>

<div class="prevnext">
<div class="container">
<div class="row">

		<div class="col-md-6">
			
				<div class="post">
                        <div class="prevnext-title">המאמר הבא</div>
					<div class="post-img"><a href="/articles/howto/how-to-create-a-search-shortcut-on-the-desktop-in-windows-8-1.html">

						
						<img src="//savtec.org/img/images_7/how-to-create-a-search-shortcut-on-the-desktop-in-windows-81_6.png" alt="">
						
					
					</a></div>
					<div class="post-h1"> <a href="/articles/howto/how-to-create-a-search-shortcut-on-the-desktop-in-windows-8-1.html">כיצד ליצור קיצור דרך חיפוש על שולחן העבודה ב - Windows</a> </div>
				</div>
			
			</div>


			<div class="col-md-6">
				
					<div class="post">
                            <div class="prevnext-title">המאמר הקודם</div>
						<div class="post-img"><a href="/articles/smart-home/how-to-create-a-routine-with-amazon-alexa.html">
							
								
								<img src="//savtec.org/img/images/how-to-create-a-routine-with-amazon-alexa.jpg" alt="">
								
						
						</a></div>
						<div class="post-h1"> <a href="/articles/smart-home/how-to-create-a-routine-with-amazon-alexa.html">כיצד ליצור שגרה עם אמזון</a> </div>
					</div>
				
				</div>

</div>
</div>
</div>


<footer>
	<div class="container">
    <div class="langs-block">
      <ul class="langs-list">
        <li class="site-lang"><a href="https://www.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-TH"></i></a></li>  
          <li class="site-lang"><a href="https://de.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-DE"></i></a></li>
          <li class="site-lang"><a href="https://ar.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-AE"></i></a></li>
          <li class="site-lang"><a href="https://bg.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-BG"></i></a></li>
          <li class="site-lang"><a href="https://cs.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-CZ"></i></a></li>
          <li class="site-lang"><a href="https://da.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-DK"></i></a></li>          
          <li class="site-lang"><a href="https://el.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-GR"></i></a></li>
          <li class="site-lang"><a href="https://es.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-ES"></i></a></li>
          <li class="site-lang"><a href="https://et.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-EE"></i></a></li>
          <li class="site-lang"><a href="https://fi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-FI"></i></a></li>
          <li class="site-lang"><a href="https://fr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-FR"></i></a></li>
          <li class="site-lang"><a href="https://he.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IL"></i></a></li>
          <li class="site-lang"><a href="https://hi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IN"></i></a></li>
          <li class="site-lang"><a href="https://hr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-HR"></i></a></li>
          <li class="site-lang"><a href="https://hu.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-HU"></i></a></li>
          <li class="site-lang"><a href="https://id.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-ID"></i></a></li>
          <li class="site-lang"><a href="https://it.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-IT"></i></a></li>
          <li class="site-lang"><a href="https://ja.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-JP"></i></a></li>
          <li class="site-lang"><a href="https://ko.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-KR"></i></a></li>
          <li class="site-lang"><a href="https://lt.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-LT"></i></a></li>
          <li class="site-lang"><a href="https://lv.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-LV"></i></a></li>
          <li class="site-lang"><a href="https://ms.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-MY"></i></a></li>
          <li class="site-lang"><a href="https://nl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-NL"></i></a></li>
          <li class="site-lang"><a href="https://no.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-NO"></i></a></li>
          <li class="site-lang"><a href="https://pl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-PL"></i></a></li>
          <li class="site-lang"><a href="https://pt.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-PT"></i></a></li>
          <li class="site-lang"><a href="https://ro.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RO"></i></a></li>
          <li class="site-lang"><a href="https://ru.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RU"></i></a></li>
          <li class="site-lang"><a href="https://sk.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SK"></i></a></li>
          <li class="site-lang"><a href="https://sl.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SI"></i></a></li>
          <li class="site-lang"><a href="https://sr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-RS"></i></a></li>
          <li class="site-lang"><a href="https://sv.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-SE"></i></a></li>        
          <li class="site-lang"><a href="https://tr.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-TR"></i></a></li>
          <li class="site-lang"><a href="https://ua.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-UA"></i></a></li>
          <li class="site-lang"><a href="https://vi.savtec.org/articles/coding/how-to-create-a-rss-reader-app-in-javascript.html"><i class="flag flag-VN"></i></a></li>          

      </ul>
    </div>
	<div class="row align-items-center">
		<div class="col-md-3">
			© <script>
                    var currentTime = new Date();
                    var year = currentTime.getFullYear();

                    document.write(year);
            </script> <a href="/">Savtec</a>
		</div>

		<div class="col-md-9">
			מידע שימושי וטיפים לפיתוח אתרים. תכנות, עיצוב אתרים, CSS, HTML, JAVASCRIPT. הגדר והתקן מחדש את WINDOWS. יצירת אתרים ויישומים מאפס.
		</div>
	</div>
 </div>
</footer>

<link rel="stylesheet" href="css/flags.css">

<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
        SimpleJekyllSearch({
          searchInput: document.getElementById('search-input'),
          resultsContainer: document.getElementById('results-container'),
          json: '/search.json',
          searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
        })
</script>

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#edeff5",
      "text": "#838391"
    },
    "button": {
      "background": "#4b81e8"
    }
  },
  "theme": "classic",
  "position": "bottom-right"
})});
</script>

</body>
</html>