javascript

Chapter 17: Ajax and JSON
(continued)
});
}
case “author”: return undefined;
default: return value;
alert(object.age); //30
alert(object.author); //undefined
In this code, the filter function increments every “ age ” value by one and removes any “ author ” key it
comes across. All other values are returned directly. The resulting object has an age property equal to 30
but no author property. This parsing functionality is used frequently with data returned from the server.
Suppose that the file addressbook.php returns a JSON structure in the following format:
[
]
{
},
{
“name”: “Nicholas C. Zakas”,
“email”: “nicholas@some-domain-name.com”
“name”: “Jim Smith”,
“email”: “jimsmith@some-domain-name.com”
}, {
“name”: “Michael Jones”,
“email”: “mj@some-domain-name.com”
}
An Ajax request can be made to retrieve this data and populate a < ul/ > element on the client using the
following code:
var xhr = createXHR();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if ((xhr.status > = 200 & & xhr.status < 300) || xhr.status == 304){
var contacts = JSON.parse(xhr.responseText);
var list = document.getElementById(“contacts”);
for (var i=0, len=contacts.length; i < len; i++){
var li = document.createElement(“li”);
li.innerHTML = “ < a href=\”mailto:” + contacts[i].email + “\” > ” +
contacts[i].name + “ < /a > ”;
list.appendChild(li);
}
}
}
};
xhr.open(“get”, “addressbook.php”, true);
xhr.send(null);
This code receives a JSON string from the server and parses it into a JavaScript array. From that point, it ’ s
easy to iterate over each object in the structure to insert those values into the DOM. The < ul/ > element is
filled with several < li/ > elements, each containing a link to send an e-mail message to a person.
584