YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: JSON Utility: JSON with Connection Manager

# JSON Utility: JSON with Connection Manager

A natural fit for the JSON Utility is working with the Connection Manager. In this example, we'll request JSON data from the server using Connection Manager's `asyncRequest` and parse the resulting JSON string data for processing.

Click the Get Messages button to send the request to the server.

View example in new window.

## Use `YAHOO.lang.JSON.parse` in the success handler

Pass the XHR `responseText` to `YAHOO.lang.JSON.parse` and capture the return value. Note that the parse method can throw a `SyntaxError` exception, so be sure to wrap the call in a `try/catch` block.

var callbacks = { // Successful XHR response handler success : function (o) { var messages = []; // Use the JSON Utility to parse the data returned from the server try { messages = YAHOO.lang.JSON.parse(o.responseText); } catch (x) { alert("JSON Parse failed!"); return; } // The returned data was parsed into an array of objects. // Add a P element for each received message for (var i = 0, len = messages.length; i < len; ++i) { var m = messages[i]; var p = document.createElement('p'); var message_text = document.createTextNode( m.animal + ' says "' + m.message + '"'); p.appendChild(message_text); msg_section.appendChild(p); } }, ... }; // Make the call to the server for JSON data YAHOO.util.Connect.asyncRequest('GET',"assets/jsonConnect.php", callbacks);

The `parse` method returns the native JavaScript object representation of the string data returned from the `asyncRequest`. In this case, the data is an array of object literals in this form:

[ { "animal" : "Cat", "message" : "Meow" }, { "animal" : "Dog", "message" : "Woof" }, { "animal" : "Cow", "message" : "Moo" }, { "animal" : "Duck", "message" : "Quack" }, { "animal" : "Lion", "message" : "Roar" } ]

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### YUI Logger Output:

### JSON Utility Examples:

### More JSON Utility Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings