RSS 피드를 JavaScript에서 가져 오는 방법

이 안내서는 JavaScript를 사용하여 RSS 피드를 검색하고 처리하는 방법을 보여줍니다. XML 기반 형식 인 RSS는 JSON에 비해 약간 더 복잡한 구문 분석 문제를 제시합니다. 많은 API는 JSON을 선호하지만 RSS는 널리 퍼져 있습니다. 이 튜토리얼은 유효성 검사, fetch API를 사용한 네트워크 요청 및 데이터 조작을 다룹니다.

먼저, 유효한 응답으로 작업 할 수 있도록 피드를 확인하십시오. 그런 다음 fetch 사용하여 네트워크 요청을하십시오.

1. RSS 피드 URL을 가져 오십시오.
2. 응답을 텍스트로 구문 분석합니다.
3. DOMParser() 사용하여 텍스트를 구문 분석하십시오.
4. 구문 분석 데이터를 활용합니다.

다음은 fetch API를 사용하는 예입니다.

 const rss_url =`https : // codepen.io/picks/feed/`;

페치 (RSS_URL)
  . then (response => response.text ())
  .
  . 그런데 (data => {
    const items = data.querySelectorall ( "항목");
    html =``;
    items.foreach (el => {
      html =`
        <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="RSS 피드를 JavaScript에서 가져 오는 방법">
        <h2>
          <a href="https://www.php.cn/link/b36745962d5a1345e1b6dc85e9a80405" link target="_blank" rel="noopener">
            https://www.php.cn/link/b36745962d5a1345e1b6dc85e9a80405칙
          </a>
        </h2>
      `;;
    });
    document.body.insertadjacenthtml ( "preciorend", html);
  });

RSS 데이터 구조는 중첩 된 HTML 요소와 유사합니다. 위의 코드는 대상입니다<item></item> 요소, link 및 title 과 같은 관련 데이터를 추출하고 HTML 요소를 동적으로 생성하여 피드 컨텐츠를 표시합니다.

또는보다 간결한 솔루션을 위해 jQuery를 사용할 수 있습니다.

 const rss_url =`https : // codepen.io/picks/feed/`;

$ .ajax (rss_url, {
  수락 : {xml : "application/rss xml"},
  데이터 유형 : "XML",
  성공 : 기능 (데이터) {
    $ (data) .find ( "항목"). 각 (function () {
      const el = $ (this);
      const 템플릿 =`
        <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="RSS 피드를 JavaScript에서 가져 오는 방법">
        <h2>
          <a href="https://www.php.cn/link/ea95de08542db1d94fe393abd1a5ce8d" link target="_blank" rel="noopener">
            https://www.php.cn/link/ea95de08542db1d94fe393abd1a5ce8d "title") .text ()}
          </a>
        </h2>
      `;;
      document.body.insertadjacenthtml ( "preverend", 템플릿);
    });
  }
});

생산 환경의 경우 캐싱으로 서버 측 처리를 고려하여 성능과 보안을 향상시킵니다. 이 접근법은 웹 사이트에서 중요한 콘텐츠를 렌더링하기 위해 타사 API에 직접 의존하지 않습니다. 서버 측 접근 방식은 예약 업데이트 (예 : CRON 작업 사용)를 허용하고보다 빠르고 신뢰할 수있는 사용자 경험을 제공합니다.

위 내용은 RSS 피드를 JavaScript에서 가져 오는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!