bulletproof ajax 05: hijax

THE HIJAX APPROACH
I’d like to introduce you to a methodology I call Hijax. It’s a two-step plan for building Ajax applications that degrade gracefully:
1. Begin by building a regular Web page. The user can request information from and send information to the server using links and forms. The server  returns an updated version of the same page. Every time the user clicks on
a link or submits a form, the entire page is refreshed.

2. Use DOM Scripting to intercept (or hijack) the links and forms that are requesting information from and sending information to the server.Reroute these requests through the XMLHttpRequest object. Instead of  returning the entire page, the server just needs to send back the part of the page that changes.

Step 1 doesn’t require JavaScript, CSS, or any other client-side technology. All
the processing takes place on the server.

In Step 2, JavaScript is used to enhance the user experience. Instead of
refreshing the whole page, only part of the page is updated. It’s important to
note that all of the processing still takes place on the server.
The XMLHttpRequest object acts like a dumbwaiter(升降机）. It shuttles data to and
from the browser, but the business logic remains firmly on the server.

It is not a good idea to entrust core functionality to a client-side scripting
language. The browser is an unpredictable environment. You can’t be certain
what kind of browsers your visitors will be using, or whether JavaScript will
be turned on in those browsers. Your server environment is much more predictable.
You know its capabilities. You know what languages it can execute.
Wherever possible, get the server, not the browser, to do the important work

Hijax in Action

<h1>People</h1>
<ul id="person">
<li>
<a href="?person=andy">Andy</a>
</li>
<li>
<a href="?person=richard">Richard</a>
</li>
<li>
<a href="?person=jeremy">Jeremy</a>
</li>
</ul>

<div id="details">
<?php include("person.php"); ?> 
</div>

person脚本如下：

<?php
if(isset($_GET['person']))
{
    switch($_GET['person'])
    {
        case "andy":
             include("files/andy.html");
            break;
        case "richard":
        include "files/richard.html";
        break;
        case "jeremy":
        include "files/jeremy.html";
        break;
    }
}

?>

This is a small, self-contained script. In a real-world situation, it would probably
be more complex. Scripts like this might extract contact details from a
database or by parsing an XML file. The end result is the same. The file displays
some HTML with a person’s contact details.
The markup that gets displayed looks like this:
<h2><a href="mailto:jeremy@clearleft.com">Jeremy Keith</a>
</h2>
<a href="http://adactio.com/">http://adactio.com/</a>

Clicking on any name in the list refreshes the page and displays the contact
details for that person. Everything works fine without JavaScript.
Next, I’m going to layer some Ajax on top of the existing functionality. When a
person’s name is clicked, I want to display his details without refreshing the
whole page. To do that, I need to intercept the default browser behavior and
replace it with the behavior I want.

I begin by getting all the links in the “people” list:
var list = document.getElementById("person");
var links = list.getElementsByTagName("a");
I’m looping through each of these links and attaching an anonymous function
to its onclick event handler:
   for (var i=0; i<links.length; i++) {
  links[i].onclick = function() {

When the link is clicked, I want to extract the query string from its href attribute.
I can do this using JavaScript’s split function, which splits a string into
an array. I’m going to split the href attribute on the question mark character.
The first member in the resulting array will be everything before the question
mark. This has an index of zero. The second member, which has an index of
one, contains everything after the question mark:

var query = this.getAttribute("href").split("?")[1];

this指代当前对象。很重要的运用。

Now I can construct the URL that I want for my Ajax request. I’m requesting
the file people.php, followed by a question mark, followed by the query
string I’ve just extracted:
var url = "people.php?"+query;
This is the value I’m going to pass to the grabFile function that we wrote in
Chapter 4:
  grabFile(url);

I’m going to change the grabFile function slightly. It will return a value of
true if the browser is Ajax capable, and false otherwise. To stop the page
from refreshing, I’m going use this returned value. If grabFile returns a
value of true, then I will cancel the default browser behavior for the click
event like this:
return !grabFile(url);

function grabFile(file)
{
     var request=getHTTPObject();
     if(request)
     {
         var elem=document.getElementById("details");
         request.onreadystatechange = function() {
                parseResponse(request);
         };
         request.open("GET", file, true);
         request.send(null);
         return true;
     }
     else
     {
         return false;
     }
}

function prepareLinks()
{
    if(!document.getElementById("person")) return false;
    var list=document.getElementById("person");
    var links = list.getElementsByTagName("a");
    for(var i=0;i<links.length;i++)
    {
        links[i].onclick=function()
        {
             
            var query=this.getAttribute("href").split("?")[1];
            var url="person.php?"+query;
            return !grabFile(url);
        };
    }
}

The prepareLinks function needs to be executed as soon as the document
has finished loading:
window.onload = prepareLinks

The parseResponse function is exactly the same as before:

function parseResponse(request) {
if (request.readyState == 4) {
if (request.status == 200 || request.status == 304) {
var details = document.getElementById("details");
details.innerHTML = request.responseText;
}
}
}

经过试验，没有禁用javascript之前，采用的是ajax的方式，禁用后，刷新了整个页面。这才是所谓的hijax.