Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample shows how to use esriRequest to download content in JSONP format. The snippet below uses this method to retrieve pictures from a Flickr feed. Note that the request property callbackParamName is set to"jsoncallback". The Flickr API requires the callback function name to be passed in a URL query parameter named 'jsoncallback'. If you are working with theArcGIS REST API, set the parameter name to "callback". For other APIs consult their documentation to determine the proper callback function name.
Once the content is loaded we can access and display this information. The dojo.toJson method is used to convert the JavaScript object and its properties and values into simple text.
The other "Access data" samples in this folder require a proxy since they call out to other servers to access content. This sample does not require a proxy because it downloads content in JSONP format. JSONP is a subset of JavaScript Object Notation (JSON) which lets the server provide information quickly in an easy to read format. JSONP requests are padded, hence the P, to make calls to another server.
Code
<!DOCTYPE html>
<html>
<head>
<title>JSONP Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<style>
body{
font-family: "Arial Unicode MS, Arial, sans-serif";
}
#content {
width: 800px; height: 350px; padding: 5px; overflow: auto;
border: solid 2px #AAAAAA; background-color: #FFFFFF;
border-radius: 5px;
-moz-box-shadow: 0 0 0.5em black; -webkit-box-shadow: 0 0 0.5em black; -o-box-shadow: 0 0 0.5em black; box-shadow: 0 0 0.5em black;
}
.failure { color: red; }
#status { font-size: 12px; }
</style>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
require(["dojo/dom", "dojo/on", "dojo/dom-class", "dojo/_base/json", "esri/request", "dojo/domReady!"], function(dom, on, domClass, dojoJson, esriRequest) {
dom.byId("url").value = "https://api.flickr.com/services/feeds/photos_public.gne";
dom.byId("content").value = "";
//handle the Go button's click event
on(dom.byId("submitRequest"), "click", getContent);
function getContent(){
var contentDiv = dom.byId("content");
contentDiv.value = "";
domClass.remove(contentDiv, "failure");
dom.byId("status").innerHTML = "Downloading...";
//get the url
var url = dom.byId("url").value;
var requestHandle = esriRequest({
"url": url,
"content": {
"tags": "dog,us",
"tagmode": "all",
"format": "json"
},
"handeAs": "json",
"callbackParamName": "jsoncallback"
});
requestHandle.then(requestSucceeded, requestFailed);
}
function requestSucceeded(response, io){
dom.byId("status").innerHTML = "";
dojoJson.toJsonIndentStr = " ";
dom.byId("content").value = dojoJson.toJson(response, true);
}
function requestFailed(error, io){
domClass.add(dom.byId("content"), "failure");
dom.byId("status").innerHTML = "";
dojoJson.toJsonIndentStr = " ";
dom.byId("content").value = dojoJson.toJson(error, true);
}
});
</script>
</head>
<body>
<p>Download content available in <b>JSONP</b> format using esriRequest. </p>
<p>
<input type="text" disabled="true" id="url" size="100"/>
<input id="submitRequest" type="button" value="GO" />
<span id="status"></span>
</p>
<h2>Content</h2>
<textarea id="content"></textarea>
</body>
</html>