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 retrieve earthquake information in XML format from USGS. Note that the code specifies "xml" for the "handleAs" property to indicate that the content being downloaded is in XML format. We also set the second argument to the "esriRequest" method to true to indicate that the request will be posted through a proxy.
Once the content is loaded we can access and display this information.
The response argument is an XML DOM node. If your application needs to traverse this node you can do so using dojo/query to loop through the NodeList.
XMLHttpRequest objects are subject to the browser same origin security policy. This means that when downloading content with this method you need to setup a proxy if the content is from another origin. The proxy acts as an intermediary between the browser and the server that contains the content you want to download. The proxy is not required if the HTML page and the content are hosted on the same web server.
Code
<!DOCTYPE html>
<html>
<head>
<title>XML 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",
"dojox/xml/parser",
"esri/config",
"esri/request",
"dojo/domReady!"
], function(dom, on, domClass, dojoJson, xmlParser, esriConfig, esriRequest) {
// Use CORS
esriConfig.defaults.io.corsEnabledServers.push("earthquake.usgs.gov"); // supports CORS
dom.byId("url").value = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_day.quakeml";
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,
"handleAs": "xml"
});
requestHandle.then(requestSucceeded, requestFailed);
}
function requestSucceeded(response, io){
dom.byId("status").innerHTML = "";
dojoJson.toJsonIndentStr = " ";
dom.byId("content").value = xmlParser.innerXML(response);
}
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 <b>XML</b> content 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>