What is this JSON/AJAXless design pattern called?

I have seen websites which load a index.html page containing the开发者_运维百科 header, footer etc, then load all of the data using a single AJAX request and use Javascript to format and display it in a list.

eg. if a search engine were to do this, the JSON would look like this:

searchresults: [
    {website: aaa.com, blurb: "This is from aaa.com", title: "AAA"},
    {website: bbb.com, blurb: "This is from bbb.com", title: "BBB"},
    {website: ccc.com, blurb: "This is from ccc.com", title: "CCC"},
    ... 100 more rows...
]

And it would be formatted by javascript into a page which looks like the Google results page showing the first 20 results. The benefits are that clicking "page2" etc. can use javascript to show the next page without needing to do another AJAX request to the server or load a new page in the normal way. Popups / extended information can be shown in the same way without additional ajax requests to the server.

The point is that it only needs to do one AJAX query on pageload to load all of the data, then all processing is done by javascript in the browser. There's no need for multiple AJAX requests or regular requests to the server. Is there a name for this design pattern? Or javascript-frameworks which support this so that I don't need to code the entire thing in javascript myself?

It's probably called a bad idea.

If you push your entire database along (or a lot of data anyway), it might not be such a great idea. Pushing extra data along will just make the request take longer to load, both because it takes longer for the server to process it, and because there's more data to transmit - and in the end, the user might not really even need all of it.

Also, I'm not sure why would a JS library need to specifically support this. Most of them support performing Ajax requests, and many with UI components also allow you to use a datasource (Dojo for example), so you would just perform a request normally and assign your "in memory" database as the source for the list component.

There are apps which I've seen called "Single Page apps" (like Gmail). They don't change page in the regular round-trip way, and just update the DOM on the client-side. I think they'll generally do more than one AJAX request to get data as it's needed (because you don't usually want the entire DB to be loaded into the app at startup), and further AJAX requests to save data, but the principle is basically what you describe.

These didn't really exist at the time the question was asked, but now it's 2013 look at http://backbonejs.org/ (low-level) and Angular.js or Ember.js (higher level javascript frameworks for single-page apps).

You have models on the client side, and views displaying those models which are linked and automatically update to reflect changes in data, and these libraries can also handle the syncing to the server.