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',
                    outputFormat: 'text/javascript',
                    bbox: extent.join(',') + ',EPSG:3857'
                },
                dataType: 'jsonp',
                jsonpCallback:'callback:loadFeatures',
                jsonp: 'format_options'
            })
        },
        strategy: ol.loadingstrategy.bbox,
        projection: 'EPSG:3857'
    })
});

window.loadFeatures = function (response) {
    layerWFS
    .getSource()
    .addFeatures(new ol.format.GeoJSON().readFeatures(response));
};

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>