4

This may be simple question but I can't get started. This tutorial from pen state university has xml request

<wfs:GetFeature service="WFS"  version="1.0.0"
  outputFormat="GML2"  – we would like gml2 as the return format
  xmlns:topp="http://www.openplans.org/topp"
  xmlns:wfs="http://www.opengis.net/wfs"
  xmlns:ogc="http://www.opengis.net/ogc"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.opengis.net/wfs
  http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd">
  <wfs:Query typeName="topp:bc_roads">  we want to query 
                bc_roads features
    <ogc:Filter>
      <ogc:FeatureId fid="bc_roads.1"/> only return features 
                                        with an ID of bc_roads.1
    </ogc:Filter>
    </wfs:Query>
</wfs:GetFeature>

My question here is how do I send this request to geoserver using geoext or javascript?

2 Answers 2

9

I'm going to make the following assumptions:

  • url = http://insert.your.url.com/path (which will be wrong)
  • your not using any library, i.e. no jQuery, no AJAX
  • you're interested in the built in XMLHttpRequest() object
  • you would like to handle asynchronous requests (instead of synchronous)
  • you can replace the error / success handler with something else
  • you wan't to see a minimal but complete working HTML

Here's the starter code in HTML / JavaScript:

<html>
<head>
<title>WMS Test</title>
<script language="JavaScript">
  function doit()
  {
    var url = 'http://insert.your.url.com/path';
    var method = 'POST';
    var postData =
      '<wfs:GetFeature\n'
      + '  service="WFS"\n'
      + '  version="1.0.0"\n'
      + '  outputFormat="GML2"\n'
      + '  xmlns:topp="http://www.openplans.org/topp"\n'
      + '  xmlns:wfs="http://www.opengis.net/wfs"\n'
      + '  xmlns:ogc="http://www.opengis.net/ogc"\n'
      + '  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"\n'
      + '  xsi:schemaLocation="http://www.opengis.net/wfs\n'
      + '  http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd">\n'
      + '  <wfs:Query typeName="topp:bc_roads">\n'
      + '    <ogc:Filter>\n'
      + '      <ogc:FeatureId fid="bc_roads.1"/>\n'
      + '    </ogc:Filter>\n'
      + '    </wfs:Query>\n'
      + '</wfs:GetFeature>\n';
    var req = new XMLHttpRequest();
    req.open("POST", url, true);
    req.setRequestHeader('User-Agent', 'XMLHTTP/1.0');
    req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    req.onreadystatechange = function () {
      if (req.readyState != 4) return;
      if (req.status != 200 && req.status != 304) {
        alert('HTTP error ' + req.status);
        return;
      }
      alert(req.responseText);
    }
    if (req.readyState == 4) return;
    req.send(postData);
  }
</script>
</head>
<body>
<input type="button" value="doit" onclick="doit()"/>
</body>
</html>
2
  • 2
    +1 ...and probably using jQuery would not be a bad idea! Commented Feb 23, 2012 at 17:20
  • Great suggestion, but the OP wanted to use GeoExt ;)
    – Chau
    Commented Feb 24, 2012 at 8:54
8

You can do a post request in OpenLayers like this:

var postData = ""; //insert your data to post here

var request = new OpenLayers.Request.POST({
    url: "http://host/path",
    data: postData,
    headers: {
        "Content-Type": "text/xml;charset=utf-8"
    },
    callback: function (response) {
        //read the response from GeoServer
        var gmlReader = new OpenLayers.Format.GML({ extractAttributes: true });
        var features = gmlReader.read(response.responseText);
        // do what you want with the features returned...
    },
    failure: function (response) {
        alert("Something went wrong in the request");
    }
});

You can see more examples of how to request data in OpenLayers here:

Requesting Remote Data

2
  • great I will try this but I wanted to use geoext
    – kinkajou
    Commented Feb 24, 2012 at 6:36
  • 2
    Since GeoExt is an extension to combine ExtJS and OpenLayers, you might as well use OpenLayers to perform the request. You could use the XMLHttpRequest like BicycleDude suggest, but you could also use ExtJS to do the same. You have several API's at your hand - each capable of requesting :)
    – Chau
    Commented Feb 24, 2012 at 8:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.