4

So I'm sure a bunch of you have seen or even use sites that load pages seemingly dynamically, without ever actually changing pages. As well as changing the url in the address bar.

Some great examples are reverbnation.com and rdio.com, I'm sure there are more where that came from but that's just off the top of my head.

So my question is... How do they do it? What coding language are they using? is it a combination of languages. Do you know any tutorials that may be helpful.

I think it maybe a combination of ajax, jquery, and php. Possibly utilizing iFrames? But i was just curious if there was a framework or jquery plugin that Im missing.

Thanks ahead of time for any help.

Jerry
  • 41
  • 1
  • 1
  • 2

5 Answers5

1

I quick review of their code learns that http://www.reverbnation.com/ is using a lot of javascript to get that working.

Basically you need: - A database backend, which can be MySQL. - A markup language for the presentation, lets say HTML - A programming language like PHP to do the logic

What you are asking is about AJAX, which means asynchronous JavaScript. Here you have a good sources to learn the basics of AJAX: http://www.w3schools.com/Ajax/ajax_intro.asp

DelphiLynx
  • 911
  • 1
  • 16
  • 41
  • Nice that's what I sorta planned to use, just was sure if they all were simply using AJAX to accomplish this effect. – Jerry Mar 21 '11 at 15:36
  • right, but a database is not needed in all cases, depending on his needs..., same with programming language like php, if everything is very simple even plain html might do what he asked for... (in theory) – Flo Mar 21 '11 at 16:17
1

I can see a very complex way to do this by using the server to create content for you an getting it to the page in bits ore as a whole block.

I started trying this out the other day for a very simple client project, just creating something simple. There reson I'm doing it this way is to be able to create animation to change content.

This is my idea;

 var href = window.location.href;

This will get the whole href from the address bar.

href = href.split("#/");

this can also bee # to split from an has tag

item = href[1].split("/");

this can be anything you like to use to split each paremeter item.

lastitem = item[item.length-1]

This will add the last item of the array to an var. At this time its the only thing I need to find the correct page with the content I want.

This way I have the link in two parts, the first is the href after the hash tag, the last one, the "item", is each end link.

So there is just one index file, everything else is added into the content area with an jquery ajax url. At the start I check what the link is and find. Each content is just in another php file. But jquery can just as well get an html file an add its content anywhere you want with ajax url.

When the document is ready I check what the last item in the parameter (after /) is. I then have a php file with the same name, I find it and add it the the content area.

$.ajax({
  url: lastitem'.php',
  success: function(data) {
    $('.content').html(data);
  }
});

The links will then use a jquery .click(). If there is a site called "about" the the href of that link can be <a href="#/about">About us</a> . This will then ofcorse add this to the end of the url in the address bar.

The click event can than be like this

$("a").click(function() {

   var href = $(this).attr(href);
   href = href.split(#/);
   href = href[href.length-1];

  $.ajax({
    url: href'.php',
    success: function(data) {
      $('.content').html(data);
    }

  });


});

This is just a quick simple idea that I'm going to try out.

Einar Ólafsson
  • 3,036
  • 1
  • 19
  • 24
0

The general category of such solutions is called "ajax".

The idea is that you don't close the connection to the web server after asking for some data, and the web server pushes replacement "portions of the web page". Depending on how fancy you get, those replacement items are listened for by the non-replaced portion of the web page and processed accordingly by either the web browser (simple html changes) or the javascript engine in the web browser (code triggered on replacement).

This technique can be done in any language on the web server side, but it must be done in javascript on the web client side. That is because javascript is the only language guaranteed to be built into every modern web browser.

While simplistic, this resource should get you started.

Edwin Buck
  • 69,361
  • 7
  • 100
  • 138
  • That is one explanation, but I've seen sites where the URL changes but the page doesn't reload. GitHub, for example, go here and click through the files/folders: https://github.com/rails/jquery-ujs – mattsven Mar 21 '11 at 15:26
  • "as well as the url" makes people think the URL doesn't change, when what you were talking about before was other things not changing. If you want the URL to change, then do a http redirect. – Edwin Buck Mar 21 '11 at 15:38
  • @Edwin Thanks! I figured it they used ajax just wasn't sure if there was some other cool piece of technology im missing out on, they all seem to work it very fluidly. – Jerry Mar 21 '11 at 15:38
  • @Jerry Think of AJAX as a technique, the sites are all probably using a lot of slightly different cool technologies to pull off the AJAX framework. It is possible to do AJAX with very little, or with a lot. – Edwin Buck Mar 21 '11 at 15:40
  • Changing the URL can be done with the `location.hash`, which also relates to AJAX: http://stackoverflow.com/questions/1457/modify-address-bar-url-in-ajax-app-to-match-current-state – Wukerplank Mar 22 '11 at 14:26
  • @Wukerplank, thanks for the info. I haven't had the need to ajax alter a URL yet, so it wasn't in my common knowledge. – Edwin Buck Mar 22 '11 at 14:37
0

Question answered already: Change browser URL and page content without reload and without using fragments

Community
  • 1
  • 1
mattsven
  • 22,305
  • 11
  • 68
  • 104
  • Great Thanks! Wouldn't have thought that it's History pushState via HTML5 ---- is that what i see on alot of other sites like lifehacker/twitter that use the /#!/ symbols. – Jerry Mar 21 '11 at 15:35
  • Ditto, that's what I thought. :) Check my answer if this solves your problem. – mattsven Mar 21 '11 at 15:37
0

Dont be misleaded, because a javascript framework is made using javascript, meaning anything can be done using only vanilla js.

In my experience, it can be possible that when a script is loaded the whole rendered view will also change, this is because it is possible to create HTML markup using javascript inside javascript file.

let's say in script1.js you have a markup like

let template = `<div>Loaded in script1</div>`
document.body.innerHTML = template;

in script2.js

let template = `<div>Loaded in script2</div>`
document.body.innerHTML = template;

as you can see, when either of the two script file is loaded the must be unload, if so, the rendered view will change dynamically depending on the loaded script.

Cedrick Campoto
  • 121
  • 1
  • 3