php - Update whole page on Ajax request

Question

I have an AJAX request that can have two possible outcomes:

1. The server responds with a message which I should place in a <div>
2. The server responds with an HTML page, in this case I need to substitute current page with a new one and change the address (the client knows the address before a request).

What would be the solution if I have the AJAX request that needs to handle both of these cases?

 url = "http://example.com"
 ajax.request(callback)

 function callback(response) {
     if (case2(response)) {
           history.pushState({}, "New page", url);
           document.innerHTML = response
     } else {
            updateDiv(response)
     }
 }

I'm interested in a correct way to implement the first branch, or if the server can somehow compose a headers that will make browser to handle a response as a usual HTTP response and update a page location and content, something like redirect with given content.

I understand that the server can return a link instead of a page, but in this case one additional stage will be needed on a client - redirect and then populating the new page on the server.

Answer 1

Quite frankly, I think that approach is basically broken by design. You shouldn't have to make that decision at that place. For example, the ajax response could only signal that a whole new page should be loaded and the new content then be generated on a second (non-ajax) request to a new URL.

In case you're forced to take the way you already go, and provided the response content is not very large, you could try Javascript-URIs. Basically, an URI in the form of javascript:"string" will load a new page which that string is the source code for. So, if response already is a string, just assigning javascript:response to window.location.href should suffice. Maybe you have to do some escaping beforehand. And I don't know, how cross-browser-compatible this approach is.

<a href="javascript:response">load</a>

is also possible.

A variant of this is building the URL not with the variable name, but with the actual string data. Like

function source2url(src) {
    // make valid javascript string from source text
    var esc1 = src
        .replace(/\/g, '\\')
        .replace(/'/g, '\'')
        .replace(/x0A/g, '\x0A')
        .replace(/x0D/g, '\x0D');

    // make valid url from that
    return "javascript:'" + encodeURIComponent(esc1) + "'";
}

window.location.href = source2url(response);

This will, of course, generate pretty large URIs. And you'll always have the Javascript-URI in the address bar.

UPDATE

A similar approach is to use base64 encoding in a data URI. The Wikipedia entry explains how it works, including a javascript example. However, you'd have to base64-encode the content somehow. (Note: You can use data URIs with or without the base64 encoding. You have to see what gives you shorter URIs for your specific content.)