javascript

Chapter 17: Ajax and JSON
JSON is also a popular format for sending data to the server. This is typically done as the body of a POST
request, and the JSON object ’s stringify() method is provided for this purpose. This method accepts three
arguments: the object to serialize, an optional replacer function to replace unsupported JSON values, and an
optional indentation specifier that can be either the number of spaces to indent each level or a character with
which to indent. By default, stringify() returns an unindented JSON string as shown here:
var contact = {
name: “Nicholas C. Zakas”,
email: “nicholas@some-domain-name.com”
};
var jsonText = JSON.stringify(contact);
alert(jsonText);
The alert displays the following text:
{\”name\”:\”Nicholas C. Zakas\”,\”email\”:\”nicholas@some-domain-name.com \”}
Since not all JavaScript values can be represented in JSON, the result will include only those that are
officially supported. For instance, functions and undefined cannot be represented in JSON, so any key
containing them will be removed by default. You can override this default behavior by providing a
function as the second argument. The function is run within the scope of the object that is currently
being serialized and is passed each key and value as arguments whenever an unsupported data type is
encountered. The function is not called for known data types, which include strings, numbers, Booleans,
null , objects, arrays, and Date (the latter is converted into a string representation of the date). Here is an
example:
var jsonText = JSON.stringify([new Function()], function(key, value){
if (value instanceof Function){
return “(function)”;
} else {
return value;
}
});
alert(jsonText); //”[(function)]”
This example attempts to serialize an array containing a function. When the function value is
encountered, the second argument is used to convert the value into the string “ (function) ” that
appears in the final output.
JSON data can be sent to the server using a POST request and passing in the JSON text to the send()
method. Consider the following example:
var xhr = createXHR();
var contact = {
name: “Ted Jones”,
email: “tedjones@some-other-domain.com”
};
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if ((xhr.status > = 200 & & xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
(continued)
585