~bcsaller/juju-gui/update-reductions

<p>In the example below, IO is employed to make a cross-domain request to <a href="http://pipes.yahoo.com">Yahoo! Pipes</a>. The output of the Pipe is an RSS-style feed formatted as JSON. We pass that output to the JSON Utility's <code>parse</code> method for sanitization and then display the contents of the Pipe in a list.</p>

<p>This example demonstrates how IO can use the Cross-Origin Resource Sharing (http://www.w3.org/TR/cors/) mechanism for making cross-domain requests.</p>

<p><strong>Please note: </strong> All the browsers listed in the Browser Test Baseline (http://developer.yahoo.com/yui/articles/gbs/) support CORS with the exception of IE 6.0 and IE 7.0, and Webkit on iOS 3. In addition to browser capability, the requested resource must respond with the proper Access-Control headers for the request to succeed.</p>

</div>

<button id="pipes">Load RSS news feed from Yahoo! Pipes.</button>

<ul>

<li>Content from Yahoo! Pipes feed will display here.</li>

</ul>

</div>

YUI({ filter:'raw' }).use("io-xdr", "substitute", "json-parse", "node",

function(Y) {

//Data fetched will be displayed in a UL in the

//element #output:

var output = Y.one("#output ul");

//Event handler called when the transaction begins:

var handleStart = function(id, a) {

Y.log("io:start firing.", "info", "example");

output.set("innerHTML", "<li>Loading news stories via Yahoo! Pipes feed...</li>");

}

//Event handler for the success event -- use this handler to write the fetched

//RSS items to the page.

var handleSuccess = function(id, o, a) {

//We use JSON.parse to sanitize the JSON (as opposed to simply performing an

//JavaScript eval of the data):

var oRSS = Y.JSON.parse(o.responseText);

//From here, we simply access the JSON data from where it's provided

//in the Yahoo! Pipes output:

if (oRSS && oRSS.count) {

var s = "",

//t in this case is our simple template; this is fed to

//Y.Lang.substitute as we loop through RSS items:

t = "<li><a href='{link}'>{title}</a>, {pubDate}</li>";

for (var i=0; i<oRSS.count; i++) {

s += Y.Lang.substitute(t, oRSS.value.items[i]);

}

//Output the string to the page:

output.set("innerHTML", s);

output.addClass("yui-null");

} else {

//No news stories were found in the feed.

var s = "<li>The RSS feed did not return any items.</li>";

}

//In the event that the HTTP status returned does not resolve to,

//HTTP 2xx, a failure is reported and this function is called:

var handleFailure = function(id, o, a) {

Y.log("ERROR " + id + " " + a, "info", "example");

}

//With all the apparatus in place, we can now configure our

//IO call. The method property is defined, but if omitted,

//IO will default to HTTP GET.

var cfg = {

method: "GET",

xdr: {

use:'native'

on: {

//Our event handlers previously defined:

100

start: handleStart,

101

success: handleSuccess,

102

failure: handleFailure

103

}

104

};

105

106

//Wire the button to a click handler to fire our request each

107

//time the button is clicked:

108

var handleClick = function(o) {

109

Y.log("Click detected; beginning io request to Yahoo! Pipes.", "info", "example");

110

// Remove the default "X-Requested-With" header as this will

111

// prevent the request from succeeding; the Pipes

112

// resource will not accept user-defined HTTP headers.

113

Y.io.header('X-Requested-With');

114

var obj = Y.io(

115

//this is a specific Pipes feed, populated with cycling news:

116

"http://pipes.yahooapis.com/pipes/pipe.run?_id=giWz8Vc33BG6rQEQo_NLYQ&_render=json",

117

cfg

118

);

119

}

120

121

//add the click handler to the Load button.

122

Y.on("click", handleClick, "#pipes");

123

}

124

);

125

</script>

126

</div>

127

128

<h3 class="first">Implementing a Cross-Domain Request for JSON Data</h3>

129

130

<p>In this example, we begin with a YUI instance that loads the <code>io-xdr</code>, <code>json-parse</code>, <code>substitute</code> and <code>node</code> modules. The <code>io-xdr</code> module is the key module. The other modules are used to process and output the results:</p>

131

132

<pre class="code prettyprint">//Create a YUI instance including support for IO and JSON modules:

133

YUI().use("io-xdr", "substitute", "json-parse", "node", function(Y) {

134

// Y is the YUI instance.

135

// The rest of the following code is encapsulated in this

136

// anonymous function.

137

});</pre>

138

139

140

<p>We'll also get a Node reference to the container we'll be using to output the data we retrieve:</p>

141

142

<pre class="code prettyprint">//element #output:

143

var output = Y.one("#output ul");</pre>

144

145

146

<p>handleSuccess is the function responsible for handling the response data. The first thing we do is sanitize the data to ensure we have valid JSON.</p>

147

<pre class="code prettyprint">var oRSS = Y.JSON.parse(o.responseText);</pre>

148

149

<p>Next, we create a simple markup template and use Y.Lang.substitute to fill in the data, as we iterate through the JSON and output the results.</p>

150

<pre class="code prettyprint">//From here, we simply access the JSON data from where it's provided

151

//in the Yahoo! Pipes output:

152

if (oRSS && oRSS.count) {

153

var s = "",

154

//t in this case is our simple template; this is fed to

155

//Y.Lang.substitute as we loop through RSS items:

156

t = "<li><a href='{link}'>{title}</a>, {pubDate}</li>";

157

158

for (var i=0; i<oRSS.count; i++) {

159

s += Y.Lang.substitute(t, oRSS.value.items[i]);

160

}

161

162

//Output the string to the page:

163

output.set("innerHTML", s);

164

output.addClass("yui-null");

165

}</pre>

166

167

168

<p>Create the configuration object for the cross-domain request, setting up the event handlers and instructing IO to use the browser's native cross-domain transport.</p>

169

170

<pre class="code prettyprint">var cfg = {

171

method: "GET", //If omitted, the default is HTTP GET.

172

xdr: {

173

use:'native'//For browsers that support CORS.

174

175

on: {

176

//Our event handlers previously defined:

177

start: handleStart,

178

success: handleSuccess,

179

failure: handleFailure

180

}

181

};</pre>

182

183

184

<p>Create an event handler that will make the IO call to Yahoo! Pipes when the Load button is clicked:</p>

185

186

<pre class="code prettyprint">//Wire the button to a click handler to fire our request each

187

//time the button is clicked:

188

var handleClick = function(o) {

189

Y.log("Click detected; beginning io request to Yahoo! Pipes.", "info", "example");

190

// Remove the default "X-Requested-With" header as this will

191

// prevent the request from succeeding; the Pipes

192

// resource will not accept user-defined HTTP headers.

193

Y.io.header('X-Requested-With');

194

var obj = Y.io(

195

//this is a specific Pipes feed, populated with cycling news:

196

"http://pipes.yahooapis.com/pipes/pipe.run?_id=giWz8Vc33BG6rQEQo_NLYQ&_render=json",

197

cfg

198

);

199

}

200

201

//add the click handler to the Load button.

202

Y.on("click", handleClick, "#pipes");</pre>

203

204

205

<h4>Full Script</h4>

206

207

<p>The full script source for this example is as follows:</p>

208

209

<pre class="code prettyprint"><button id="pipes">Load RSS news feed from Yahoo! Pipes.</button>

210

211

<ul>

212

<li>Content from Yahoo! Pipes feed will display here.</li>

213

</ul>

214

</div>

215

216

217

YUI({ filter:'raw' }).use("io-xdr", "substitute", "json-parse", "node",

218

function(Y) {

219

220

//Data fetched will be displayed in a UL in the

221

//element #output:

222

var output = Y.one("#output ul");

223

224

//Event handler called when the transaction begins:

225

var handleStart = function(id, a) {

226

Y.log("io:start firing.", "info", "example");

227

output.set("innerHTML", "<li>Loading news stories via Yahoo! Pipes feed...</li>");

228

}

229

230

//Event handler for the success event -- use this handler to write the fetched

231

//RSS items to the page.

232

var handleSuccess = function(id, o, a) {

233

234

//We use JSON.parse to sanitize the JSON (as opposed to simply performing an

235

//JavaScript eval of the data):

236

var oRSS = Y.JSON.parse(o.responseText);

237

238

//From here, we simply access the JSON data from where it's provided

239

//in the Yahoo! Pipes output:

240

if (oRSS && oRSS.count) {

241

242

var s = "",

243

//t in this case is our simple template; this is fed to

244

//Y.Lang.substitute as we loop through RSS items:

245

t = "<li><a href='{link}'>{title}</a>, {pubDate}</li>";

246

247

for (var i=0; i<oRSS.count; i++) {

248

s += Y.Lang.substitute(t, oRSS.value.items[i]);

249

}

250

251

//Output the string to the page:

252

output.set("innerHTML", s);

253

output.addClass("yui-null");

254

255

} else {

256

//No news stories were found in the feed.

257

var s = "<li>The RSS feed did not return any items.</li>";

258

}

259

}

260

261

//In the event that the HTTP status returned does not resolve to,

262

//HTTP 2xx, a failure is reported and this function is called:

263

var handleFailure = function(id, o, a) {

264

Y.log("ERROR " + id + " " + a, "info", "example");

265

}

266

267

//With all the apparatus in place, we can now configure our

268

//IO call. The method property is defined, but if omitted,

269

//IO will default to HTTP GET.

270

var cfg = {

271

method: "GET",

272

xdr: {

273

use:'native'

274

275

on: {

276

//Our event handlers previously defined:

277

start: handleStart,

278

success: handleSuccess,

279

failure: handleFailure

280

}

281

};

282

283

//Wire the button to a click handler to fire our request each

284

//time the button is clicked:

285

var handleClick = function(o) {

286

Y.log("Click detected; beginning io request to Yahoo! Pipes.", "info", "example");

287

// Remove the default "X-Requested-With" header as this will

288

// prevent the request from succeeding; the Pipes

289

// resource will not accept user-defined HTTP headers.

290

Y.io.header('X-Requested-With');

291

var obj = Y.io(

292

//this is a specific Pipes feed, populated with cycling news:

293

"http://pipes.yahooapis.com/pipes/pipe.run?_id=giWz8Vc33BG6rQEQo_NLYQ&_render=json",

294

cfg

295

);

296

}

297

298

//add the click handler to the Load button.

299

Y.on("click", handleClick, "#pipes");

300

}

301

);

302

</script></pre>

303

304

</div>

305

</div>

306

</div>

307

308

309

310

311

312

313

314

315

<h2 class="no-toc">Examples</h2>

316

</div>

317

318

319

320

321

322

323

<a href="get.html">HTTP GET to request data</a>

324

</li>

325

326

327

328

329

<a href="weather.html">Request XML data from Yahoo! Weather</a>

330

</li>

331

332

333

334

335

<a href="xdr.html">Request JSON using Yahoo! Pipes</a>

336

</li>

337

338

339

340

341

</ul>

342

</div>

343

</div>

344

345

346

347

348

349

<h2 class="no-toc">Examples That Use This Component</h2>

350

</div>

351

352

353

354

355

356

357

358

359

360

361

362

363

<a href="../overlay/overlay-io-plugin.html">IO Plugin</a>

364

</li>

365

366

367

</ul>

368

</div>

369

</div>

370

371

</div>

372

</div>

373

</div>

374

</div>

375

376

377

378

379

</body>

380

</html>

Older »