Using the Proxy in your Web Application
This section describes how to use the proxy in your web application.
Import ria.js
The first step is to import OpenLayers and the main JavaScript API library. To do this:
<script type="text/javascript" src="http://<server>:<port>/ria/openlayers/OpenLayers.js"></script>
<script type="text/javascript" src="http://<server>:<port>/ria/ria.js"></script>
Replace localhost:8080 with the actual hostname and port number the JavaScript API is installed on.
To publicly expose JavaScript API components in your web application, all javascript resources to be downloaded need to be in a publicly accessible URL (and any URLs within those js files must also be publicly accessible.
Define the Path to your Proxy
To indicate that cross-domain calls should be routed through a proxy, the path to the proxy has to be registered like this:
ria.RestService.addProxy("/riaproxy/?url=");
Rather than calling a URL to a different domain directly, the JavaScript library code will append the encoded URL to the end of the path registered above and use the result to perform the request. The proxy takes the URL from the request parameter (by default url) , requests the resource associated with it and sends the result back to the JavaScript library code without any modifications. The exact path passed to the addProxy() method depends on which proxy is being used and how the proxy was deployed.
Code Sample
A simple page for performing a Feature Search:
<!DOCTYPE html>
<html>
<head>
<script src="http://<server>:<port>/ria/openlayers/OpenLayers.js"></script>
<script src="http://<server>:<port>/ria/ria.js"></script>
</head>
<body>
<button onclick="search();">Search</button>
<script>
ria.RestService.addProxy("/riaproxy/?url=");
function search() {
var fs = new ria.search.FeatureService(
"http://<server>:<port>/rest/Spatial/FeatureService");
var d = fs.searchNearest({
table: "/Samples/NamedTables/WorldcapTable",
geometry: new OpenLayers.Geometry.Point(12.875977, 47.813155),
srs: "epsg:4326",
attributes: ["Capital"],
withinDistance: "2000 mi",
distanceAttributeName: "dist",
maxFeatures: 10
});
d.addCallback(function(result) {alert(result.features.length + " result(s)")});
}
</script>
</body>
</html
Test this sample web application by viewing it in your browser and clicking Search.
A dialog appears that displays the results of the Feature Search:
In a web debugger such as Fiddler, you can see a listing of the 10 results:
{"type":"FeatureCollection","Metadata":[{"type":"String","name":"Capital"},
{"type":"Double","name":"dist"}],"features":[{"type":"Feature","properties"
:{"Capital":"Ljubljana","dist":143.84489998699985}},{"type":"Feature","properties"
:{"Capital":"Vienna","dist":161.4848812627603}},{"type":"Feature","properties"
:{"Capital":"Vaduz","dist":163.332701859974}},{"type":"Feature","properties"
:{"Capital":"Prague","dist":173.87473824107374}},{"type":"Feature","properties"
:{"Capital":"Bratislava","dist":198.09553406882614}},{"type":"Feature","properties"
:{"Capital":"Zagreb","dist":201.31855154101802}},{"type":"Feature","properties"
:{"Capital":"Bern","dist":260.92616074609}},{"type":"Feature","properties"
:{"Capital":"San Marino","dist":267.4791030110629}},{"type":"Feature","properties"
:{"Capital":"Budapest","dist":290.00905102083885}},{"type":"Feature","properties"
:{"Capital":"Berlin","dist":325.56576583498344}}]}