jQuery 및 JSON으로 자신만의 웹 사이트 배지를 만드십시오.

Flickr, Delicious 및 Twitter와 같은 서비스는 모두 사이트에 추가 할 수있는 JavaScript 배지 또는 위젯을 제공합니다. 그러나 jQuery와 같은 사이트에서 이미 JavaScript 프레임 워크를 사용하고 있다면 왜 더 많은 JavaScript를 추가하고 싶습니까? 게다가, 직접 만드는 것이 더 재미 있습니다. 이러한 모든 서비스는 JSON 형식의 피드 API도 제공하며 자신의 위젯을 롤링하는 것은 쉽습니다. JQuery를 사용하여 Twitter를 위해 시간이 지남에 따라 내가 휘젓는 것이 있습니다. 코드가 거의 필요하지 않은 것에 놀랄 것입니다.

Twitter JSON API를 사용하는 데 필요한 것은 URL입니다.

http://twitter.com/status/user_timeline/sitepointdotcom.json?call=5&callback=yourfunction

SitePointDotcom을 트위터 사용자 이름으로 바꾸고 카운트 = 5 번호를 검색하려는 트윗 수로 변경하고 콜백 함수의 이름으로 기능을 변경하면 준비가되었습니다. 해당 URL을 브라우저의 주소 필드에 복사하면 JSON 데이터를 다운로드하여 다음을 살펴볼 수 있습니다.

출력은 JavaScript 기능을 호출하는 것입니다. JSON 개체 모음이 포함 된 배열 (각 트윗 당 하나)이 단일 인수로 전달됩니다. 아이디어는 위의 URL을 소스로 웹 페이지에 스크립트 요소를 추가한다는 것입니다. 이는 JavaScript가 현재 도메인 이외의 도메인을 호출 할 수없는 대부분의 브라우저에 존재하는 AJAX 보안 제한을 우회해야합니다. 그러나 다른 도메인에서 JavaScript 소스 파일을 포함해도 괜찮습니다. 이것이 이러한 종류의 배지가 작동하는 표준 방법입니다.

yourfunction([ ... ]);

그러나 다른 스크립트 태그를 추가하고 콜백 함수가 나에게 지저분한지 확인하기 때문에 다른 접근 방식을 사용합니다. 우리는 jQuery에서 매우 편리한 GetJson 기능을 사용할 것입니다. 먼저 위젯 데이터를 넣을 수있는 HTML이 필요합니다.

아이디어는 모든 트위터 업데이트가 별도의 단락 요소로 해당 DIV 요소로 슬롯을 제작한다는 것입니다. 멋지고 간단합니다. JavaScript가 어떤 이유로 실행되지 않으면 절대 끝나지 않는로드 애니메이션 대신 페이지에 의미있는 콘텐츠가 남아 있기 때문에 좋아합니다.

<div>
  <p>
    <a href="http://twitter.com/sitepointdotcom">
        Follow me on Twitter
    </a>
  </p>
</div>

따라서 페이지가 준비되면이 스크립트가 발사되기를 원하며 jQuery에서이를 수행하는 가장 좋은 방법은 $ (Document)를 사용하는 것입니다.

모든 getjson 메소드가 필요한 것은 URL입니다. 이 기능의 장점은 쿼리 문자열 매개 변수를 추가하면 콜백 =? URL이 끝날 무렵, jQuery는 다음과 같은 콜백 기능을 처리합니다.

$(document).ready(function(){
  //our code goes here...
});

JQuery는 JSON 데이터를 두 번째 인수에 데이터 변수로 지정된 함수로 전달합니다. 그런 다음 각 방법을 사용하여 모든 트윗을 통해 반복하여 페이지의 HTML에 삽입 할 수 있습니다.

$(document).ready(function(){
  var tweeturl = "http://twitter.com/status/"
      +"user_timeline/sitepointdotcom.json?count=5"
      +"&callback=?";
  $.getJSON(tweeturl, function(data){
    //read the JSON data here...  
  });
});

yourfunction([ ... ]);

데모를 확인하면 데모를 확인하면 트위터 데이터를 가져 오는 위젯이있어 각 트윗을 HTML 단락으로 변환하여 페이지의 HTML에 삽입합니다. 또한 CSS에서 교대 배경색을 구현할 수 있도록 홀수 또는 트윗에 클래스 값을 추가합니다. 지금까지 너무 좋았지 만 무엇이 빠졌습니까? 트위터 배지는 @replies, 해시 태그 및 URL을 링크해야한다고 생각합니다. 그리고 일부 JavaScript 정규 표현식을 추가하면 우리를 위해 그 일을 잘합니다.

<div>
  <p>
    <a href="http://twitter.com/sitepointdotcom">
        Follow me on Twitter
    </a>
  </p>
</div>

그게 다야! 가서 완제품을 살펴보십시오. 얼마나 간단 했습니까?

같은 접근 방식은 맛있고 Flickr, Last.fm 및 Yahoo Pipes로 수행 할 수 있습니다. 개선의 여지가 충분합니다. 시간 정보를 추가하고 트윗 URL에 링크하고 아바타 추가 등을 추가 할 수 있습니다. Sitepoint의 다른 기술 편집자 인 Raena는 모든 서비스의 데이터를 리버스 초대 순서로 함께 병합하여 Lifestream 스타일 디스플레이를 만들 수 있다고 제안했습니다. 당신이 직접 만들려면, 의견을 남기고 알려주세요.

위 내용은 jQuery 및 JSON으로 자신만의 웹 사이트 배지를 만드십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!