Hide Table of Contents
View Access data (text) sample in sandbox
Access data (text)

Description

This sample shows how to use esriRequest to download plain text content to retrieve earthquake information in text format from USGS. Note that the sample specifies "text" for the handleAs property to indicate that the content being downloaded is in text 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.

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. Instructions for installing and configuring a proxy can be found here.

After installing the proxy make sure that it is configured to handle request to the server that contains the content you are downloading. 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>Plain Text Content</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" href="https://js.arcgis.com/3.29/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;
      -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; 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.29/"></script>
  <script>
    require([
      "dojo/dom", 
      "dojo/on", 
      "dojo/dom-class", 
      "dojo/_base/json", 
      "esri/config", 
      "esri/request", 
      "dojo/domReady!"
    ], function(dom, on, domClass, dojoJson, esriConfig, esriRequest) {

      // Use CORS
      esriConfig.defaults.io.corsEnabledServers.push("earthquake.usgs.gov"); // supports CORS

      // Use proxy if the server doesn't support CORS
      // esriConfig.defaults.io.proxyUrl = "/proxy/";  

      dom.byId("url").value = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_day.csv";
      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": "text"
        });
        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 <b>Plain Text</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>
 
          
Show Modal