title: Difference between URL and Loader on Vector Source - OpenLayers 3
body: <p>I have to load a  WFS layer from my Geoserver to my website with Openlayers 3.9.0.</p>
  <p>According to <a href="http://openlayers.org/en/v3.10.1/apidoc/ol.source.Vector.html" rel="nofollow noreferrer">the manual</a> there are two options to load features, <code>loader</code>(<a href="http://openlayers.org/en/v3.10.1/apidoc/ol.html#.FeatureLoader" rel="nofollow noreferrer">ol.FeatureLoader</a>) and <code>url</code> (<a href="http://openlayers.org/en/v3.10.1/apidoc/ol.html#.FeatureUrlFunction" rel="nofollow noreferrer">ol.FeatureUrlFunction</a>).</p>
  <p>I dont get the difference between the two. They both used to load features, <code>loader</code>, does not set any URL and looks more complicated.</p>
  <p>I tried:</p>
  <pre class="lang-js prettyprint-override"><code>    var url =  'http://localhost:8080/geoserver/mapname/wfs?service=WFS&amp;'+'version=1.0.0&amp;request=GetFeature&amp;typeName=mapname:awesomelayer&amp;'+'outputFormat=application/json&amp;maxFeatures=50'    
      var vectorSource = new ol.source.Vector({
                format: new ol.format.GeoJSON(),
                loader: function(extent){
                      $.ajax({
                      url: url,
                      type:'GET',
                      dataType: 'jsonp'
                      }).done(loadFeatures);
                 },
                strategy: new ol.loadingstrategy.tile(ol.tilegrid.createXYZ({maxZoom: 20}))
      });
      
      var loadFeatures = function(response) {
        var features = vectorSource.readFeatures(response);
        vectorSource.addFeatures(features);
      };
  </code></pre>
  <p>...and no errors at all, but also no features.</p>
  <p>Then I simply set:</p>
  <pre class="lang-js prettyprint-override"><code>    var url =  'http://localhost:8080/geoserver/mapname/wfs?service=WFS&amp;'+'version=1.0.0&amp;request=GetFeature&amp;typeName=mapname:awesomelayer&amp;'+'outputFormat=application/json&amp;maxFeatures=50'    
      var vectorSource = new ol.source.Vector({
                format: new ol.format.GeoJSON(),
                strategy: new ol.loadingstrategy.tile(ol.tilegrid.createXYZ({maxZoom: 20})),
                url: function(extent, resolution, projection){return url}
      });
  </code></pre>
  <p>....which worked.</p>
  <p>I do not get the difference, <code>url</code> is similar, quicker and does not require a <code>loadFeatures</code> function. I read the manual, but in practice, in terms of code, I cannot understand  it. What is <code>loader</code> for, why it does not set a URL and when to use it? What am I missing here?</p>