Edit in JSFiddle

var layerWFS = new ol.layer.Vector({
  source: new ol.source.Vector({
    loader: function(extent) {
      $.ajax('http://demo.opengeo.org/geoserver/wfs', {
        type: 'GET',
        data: {
          service: 'WFS',
          version: '1.1.0',
          request: 'GetFeature',
          typename: 'water_areas',
          srsname: 'EPSG:3857',
          bbox: extent.join(',') + ',EPSG:3857'
        }
      }).done(function(response) {
        layerWFS
        .getSource()
        .addFeatures(new ol.format.WFS()
          .readFeatures(response));
      });
    },
    strategy: ol.loadingstrategy.bbox,
    projection: 'EPSG:3857'
  })
});

var map = new ol.Map({
  target: 'map',
  controls: [],
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    layerWFS
  ],
  view: new ol.View({
    center: [-8908887.277395891, 5381918.072437216],
    zoom: 14
  })
});
html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
}

.map {
  height: 100%;
  width: 100%;
<div id="map" class="map"></div>