How do they do it? Dynamic Loading pages/websites ... Framework, script? PHP, jQuery, Ruby?

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开发者_StackOverflow社区 just curious if there was a framework or jquery plugin that Im missing.

Thanks ahead of time for any help.

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

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.

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.

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

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.