JSONP + Push State: Youtube Application Example

Improve Performance for MySQL CALC_FOUND_ROWS with LIMIT OFFSET

Push State

Push state is html5 technology that records browsing history in javascript without actual page refresh.
Push state is useful for recording Ajax request, which cannot record the browsing history normally, and telling the corresponding url for the Ajax request to browser.

The minimum push state code is below:

// push the browser state
if (typeof(history.replaceState) !== "undefined") {
  history.pushState({prop1: "a", prop2:"b"}, null, "/url/?param1=param");
}

// when browser back button is pressed, pop state event is fired
// pop state handler is registered in the folloing code
window.onpopstate = function (event) {
  if (event.state == null) {
    return;
  }
  // do something nice ;)
  // using "event.state.prop1" for example
};

The usage of push state is quite simple.
One thing you should remember is that when pop state event is fired, the browser simply change back to the previous pushed url.
So, your main work is recovering the page contents corresponding to the previous url using saved states or re-generating the page contents corresponding to the previous url.

JSONP

JSONP is communication technique used in JavaScript programs running in web browsers to request data from a server in a different domain.
Here is JSONP code example using JQuery.

$.ajax({
 url: url,
 jsonp: "callback",
 dataType: "jsonp",
 success: function(res){
   // do something nice ;)
 },
    error: function(res){
      // error handing if you need
    }
});

JSONP and Push State: Youtube Application Example

Okay then, I will show you the actual application example using JSONP and Push State.
Key points of this application are:

Push state to browser when user click "Search On Youtube" button
Using JSONP request when retrieving video from Youtube Video API v3
There is no server side implementation in my side
When you click "Search On Youtube" button, please check address bar in your browser, you should find "keyword" parameter is added to this blog post address

Example screenshot of example application is below.

Full Code of JSONP + Push State Youtube Application

#youtube_result{
    margin: 0 auto;
    width: 720px;
}
#youtubeVideo_keyword{
    width:200px;
}
#search_form{
    margin: 10 auto;
    width: 720px;
    text-align: center;
}
div.video span.play{
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5HO7zgAO9tqMfqJ8loPERdkVkpPYFVx8shCEaEl0e0zLTq_Y3he6qFfipAPvPLDdJ0B6YA-MWN5dmvtK1pPf5R45q7gGwee-ddkR2twMv6Ns5jhyG-u_7xC4i4jySa-5eY4CWEu4DL_w/s80/play.png) no-repeat; 
 position: absolute;
 width: 80px;
 height: 80px;
 right: 120px;
 top: 80px;
}
div.video{
 cursor:pointer;
    position: relative;
}
div.container{
    float: left;
}
div.container p{
    text-align: center;
    max-width: 320px;
    height: 3em;
    margin-top: 0em;
}
.post-body iframe{
    padding: 5px;
    border: 1px solid #eeeeee
}
</style>
</head>
<body>
<div id="search_form">
<p>Search youtube video from text below! </p>
<form>
<input type="text" id="youtubeVideo_keyword">
<input id="search_button" type="submit" value="Search On Youtube">
</form>
</div>
<div id="youtube_result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 
// Push State Initilization 
if (typeof(history.replaceState) !== "undefined") {
    history.replaceState({
      keyword: ""
    }, null, null);
}

// back or forward button clicked
window.onpopstate = function (event) {
  if (event.state == null) {
    return;
  }
  buildHtml(event.state.keyword);
};
  
$("#search_button").click(function(e){
  var keyword = $("#youtubeVideo_keyword").val();
  if(keyword != "")
  {
   buildHtml(keyword);
   
      // Push State
   if (typeof history.pushState !== "undefined") {
    history.pushState({keyword: keyword}, null, "?keyword="+encodeURIComponent(keyword));
   }
  }
  
  return false;
});

// building youtube result
function buildHtml(keyword)
{
  $("div#youtube_result").empty();
  if(keyword == "") return; // do nothing if keyword is not specified
  search(keyword, 12, 
     function(response){
   if(response.items.length > 0)
   {
    var arr = $.map(response.items, function(item, i){
     if(item.id.kind == "youtube#video")
     {
        return "<div class=\"container\"><div class=\"video\" video_id=\""+item.id.videoId+"\"><span class=\"play\"></span><img width=\"320\" height=\"240\" alt=\""+
               escapeHTML(item.snippet.title)+"\" src=\""+item.snippet.thumbnails.high.url+"\"></div><p>"+escapeHTML(item.snippet.title)+"</p></div>";
     }
     return "";
    }
    );
    $("div#youtube_result").append(arr.join(""));
   }
   else
   {
    $("div#youtube_result").append("<p>No Result</p>");
   }
  },
  function(response){
   $("div#youtube_result").append("<p>Ooops Something Wrong :(</p>");
  }
  );
}

// Youtube search by JSONP
function search(q, maxResults, success, error)
{
 var url = "https://www.googleapis.com/youtube/v3/search?key={your_youtube_browser_api_key}&part=snippet";
 url += "&maxResults="+maxResults+"&q="+encodeURIComponent(q);
 $.ajax({
  url: url,
  jsonp: "callback",
  dataType: "jsonp",
  success: success,
     error: error
 });
}

// click thumbnail then swap image to video
$("#youtube_result").on("click", "div.video", function(){
    var id = $(this).attr("video_id");
    var youtubeurl = 'http://www.youtube.com/embed/' + id + '?rel=0&amp;showinfo=0&autoplay=1';
    $(this).html('<iframe width="320" height="240" src="'+ youtubeurl + '" frameborder="0" allowfullscreen></iframe>');
});

function escapeHTML(s) { 
    return s.replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
}
});

Information Technology Tips

このブログを検索