[Geoserver-users] a question about Ajax+geoserver

Hello!

I am a new user of geoserver, I am using geoserver 1.3.2 and ajax, I want to use the post method to request WMS, and get the map. But when I get the XMLHttpRequest object's response, I find that it is a stream of gif picture. I don't know how to connect the stream to a image object.

This is my test page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>ÎÞ±êÌâÎĵµ</title>
</head>

<script language="JavaScript">
function doLoadMap(){
  var Url = "http://" + window.location.host + "/geoserver/wms/GetMap";
  var Sld = GetSld();
/* var newurl = "http://" + window.location.host + "/geoserver/wms?" + Sld;
  map.src = newurl;*/
  send_request_post(Url, Sld);
}
function GetSld(){
  // maybe a SLD XML
  var sldstr = "LAYERS=tiger:giant_polygon,tiger:poly_landmarks,tiger:tiger_roads,tiger:poi"

    + "&FORMAT=image/gif&TRANSPARENT=TRUE&HEIGHT=406&REQUEST=GetMap&WIDTH=810&STYLES=,&SRS=EPSG:4326&VERSION=1.1.1"

    + "&BBOX=-74.02924949245278,40.70060354838641,-73.9883552568504,40.72110115289822";

  return sldstr;
}
function processRequestPost(){
    if (http_request.readyState == 4) { // Åж϶ÔÏó״̬
      if (http_request.status == 200) { // ÐÅÏ¢ÒѾ­³É¹¦·µ»Ø£¬¿ªÊ¼´¦ÀíÐÅÏ¢
      alert(http_request.responseText);
    map.src = http_request.responseText;
/* var mapobj = document.getElementById('map');
    mapobj.src = http_request.responseText;*/
      } else { //Ò³Ãæ²»Õý³£
        alert("ÄúËùÇëÇóµÄÒ³ÃæÓÐÒì³£¡£");
      }
    }
}
function getXmlRequest(){
    http_request = false;
    //¿ªÊ¼³õʼ»¯XMLHttpRequest ¶ÔÏó
    if(window.XMLHttpRequest) { //Mozilla ä¯ÀÀÆ÷
      http_request = new XMLHttpRequest();
      if (http_request.overrideMimeType) {//ÉèÖÃMiME Àà±ð
        http_request.overrideMimeType("text/xml");
      }
    }
    else if (window.ActiveXObject) { // IE ä¯ÀÀÆ÷
      try {
        http_request = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          http_request = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
      }
    }
    if (!http_request) { // Òì³££¬´´½¨¶ÔÏóʵÀýʧ°Ü
      window.alert("²»ÄÜ´´½¨XMLHttpRequest ¶ÔÏóʵÀý.");
      return false;
    }
}
function send_request_post(url, sendStr) {
  getXmlRequest();
    http_request.onreadystatechange = processRequestPost;
    // È·¶¨·¢ËÍÇëÇóµÄ·½Ê½ºÍURL ÒÔ¼°ÊÇ·ñͬ²½Ö´ÐÐ϶δúÂë
  
   http_request.open("POST", url, true);
  http_request.setRequestHeader("Content-Length",sendStr.length);
  
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //SetRequestHeaderÇ°±ØÐëÏÈopen
    http_request.send(sendStr);
  
/* var newurl = "http://" + window.location.host + "/geoserver/wms?" + sendStr;
    http_request.open("GET", newurl, true);
    http_request.send(null);*/
}
</script>

<body onLoad="doLoadMap()">
<img src="Loading.gif" name="map" id="map">
</body>
</html>

"map.src = http_request.responseText;" in the function "processRequestPost" is where I am puzzling, or are there any other errors?

Otherwise, the function "GetSld" is used to get the parameter of request, it will return a XML such as SLD in fact.

Help me! Thanking in advance!

youni

_________________________________________________________________
ÏíÓÃÊÀ½çÉÏ×î´óµÄµç×ÓÓʼþϵͳ¡ª MSN Hotmail¡£ http://www.hotmail.com

I don't know ajax that well, but you may try checking out openlayers -
http://openlayers.org. They have a nice ajax client for WMS (and WFS).
You can probably dig in to their code and figure out how they did it,
or even use their libraries directly.

best regards,

Chris

悠 妮 wrote:

Hello!

I am a new user of geoserver, I am using geoserver 1.3.2 and ajax, I
want to use the post method to request WMS, and get the map. But when I
get the XMLHttpRequest object's response, I find that it is a stream of
gif picture. I don't know how to connect the stream to a image object.
This is my test page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<script language="JavaScript">
function doLoadMap(){
    var Url = "http://" + window.location.host + "/geoserver/wms/GetMap";
    var Sld = GetSld();
/* var newurl = "http://" + window.location.host + "/geoserver/wms?"
+ Sld;
    map.src = newurl;*/
    send_request_post(Url, Sld);
}
function GetSld(){
    // maybe a SLD XML
    var sldstr =
"LAYERS=tiger:giant_polygon,tiger:poly_landmarks,tiger:tiger_roads,tiger:poi"

        +
"&FORMAT=image/gif&TRANSPARENT=TRUE&HEIGHT=406&REQUEST=GetMap&WIDTH=810&STYLES=,&SRS=EPSG:4326&VERSION=1.1.1"

        +
"&BBOX=-74.02924949245278,40.70060354838641,-73.9883552568504,40.72110115289822";

    return sldstr;
}
function processRequestPost(){
   if (http_request.readyState == 4) { // 判断对象状态
     if (http_request.status == 200) { // 信息已经成功返回,开始处理信息
          alert(http_request.responseText);
        map.src = http_request.responseText;
/* var mapobj = document.getElementById('map');
        mapobj.src = http_request.responseText;*/
     } else { //页面不正常
       alert("您所请求的页面有异常。");
     }
   }
}
function getXmlRequest(){
   http_request = false;
   //开始初始化XMLHttpRequest 对象
   if(window.XMLHttpRequest) { //Mozilla 浏览器
     http_request = new XMLHttpRequest();
     if (http_request.overrideMimeType) {//设置MiME 类别
       http_request.overrideMimeType("text/xml");
     }
   }
   else if (window.ActiveXObject) { // IE 浏览器
     try {
       http_request = new ActiveXObject("Msxml2.XMLHTTP");
     } catch (e) {
       try {
         http_request = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (e) {}
     }
   }
   if (!http_request) { // 异常,创建对象实例失败
     window.alert("不能创建XMLHttpRequest 对象实例.");
     return false;
   }
}
function send_request_post(url, sendStr) {
    getXmlRequest();
   http_request.onreadystatechange = processRequestPost;
   // 确定发送请求的方式和URL 以及是否同步执行下段代码
    
  http_request.open("POST", url, true);
    http_request.setRequestHeader("Content-Length",sendStr.length);
    
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//SetRequestHeader前必须先open
   http_request.send(sendStr);
    
/* var newurl = "http://" + window.location.host + "/geoserver/wms?"
+ sendStr;
   http_request.open("GET", newurl, true);
   http_request.send(null);*/
}
</script>

<body onLoad="doLoadMap()">
<img src="Loading.gif" name="map" id="map">
</body>
</html>

"map.src = http_request.responseText;" in the function
"processRequestPost" is where I am puzzling, or are there any other errors?

Otherwise, the function "GetSld" is used to get the parameter of
request, it will return a XML such as SLD in fact.

Help me! Thanking in advance!

youni

_________________________________________________________________
享用世界上最大的电子邮件系统— MSN Hotmail。 http://www.hotmail.com

!DSPAM:1003,453798da54209771116852!

------------------------------------------------------------------------

-------------------------------------------------------------------------
Using Tomcat but need to do more? Need to support web services, security?
Get stuff done quickly with pre-integrated technology to make your job easier
Download IBM WebSphere Application Server v.1.0.1 based on Apache Geronimo
http://sel.as-us.falkag.net/sel?cmd=lnk&kid=120709&bid=263057&dat=121642

!DSPAM:1003,453798da54209771116852!

------------------------------------------------------------------------

_______________________________________________
Geoserver-users mailing list
Geoserver-users@lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/geoserver-users

!DSPAM:1003,453798da54209771116852!

--
Chris Holmes
The Open Planning Project
http://topp.openplans.org

Hi Youni,

This is a well known problem with getmap requests, POST and HTML. Basically it
seems there is no way of setting the src attribute of an HTML img tag using
POST.

One solution would be to create a new map producer in geoserver for the
application/xml output format.

That way, you could formulate the getmap request like:
<server>://<wms
path>?request=GetMap&format=application/xml;imageformat=image/png&width=................

or the POST equivalent.

So the request would be catched up by this new producer, use the hint in the
format parameter to get a delegate producer, ask it for the image, write to a
temporary and web accesible directory, and finally return an xml message with
the URL to that file.

Then your ajax client could fetch the URL from the xml response and set the
src attribute on an <img> tag.

Of course a temp directory cleanup mechanism should be added too in geoserver.

If you feel like you can do that I will be happy of providing you directions
on how to create such a "plugin". It would have to be on trunk though, which
currently targets version 1.5.0

Cheers,

Gabriel

On Friday 20 October 2006 00:28, Chris Holmes wrote:

I don't know ajax that well, but you may try checking out openlayers -
http://openlayers.org. They have a nice ajax client for WMS (and WFS).
You can probably dig in to their code and figure out how they did it,
or even use their libraries directly.

best regards,

Chris

ÓĆ ÄÝ wrote:
> Hello!
>
> I am a new user of geoserver, I am using geoserver 1.3.2 and ajax, I
> want to use the post method to request WMS, and get the map. But when I
> get the XMLHttpRequest object's response, I find that it is a stream of
> gif picture. I don't know how to connect the stream to a image object.
> This is my test page:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
> <title>ÎŢąęĚâÎÄľľ</title>
> </head>
>
> <script language="JavaScript">
> function doLoadMap(){
> var Url = "http://" + window.location.host + "/geoserver/wms/GetMap";
> var Sld = GetSld();
> /* var newurl = "http://" + window.location.host + "/geoserver/wms?"
> + Sld;
> map.src = newurl;*/
> send_request_post(Url, Sld);
> }
> function GetSld(){
> // maybe a SLD XML
> var sldstr =
> "LAYERS=tiger:giant_polygon,tiger:poly_landmarks,tiger:tiger_roads,tiger:
>poi"
>
>
> +
> "&FORMAT=image/gif&TRANSPARENT=TRUE&HEIGHT=406&REQUEST=GetMap&WIDTH=810&S
>TYLES=,&SRS=EPSG:4326&VERSION=1.1.1"
>
>
> +
> "&BBOX=-74.02924949245278,40.70060354838641,-73.9883552568504,40.72110115
>289822";
>
>
> return sldstr;
> }
> function processRequestPost(){
> if (http_request.readyState == 4) { // ĹМϜÔĎó×´ĚŹ
> if (http_request.status == 200) { // ĐĹϢŇŃž­łÉšŚˇľťŘŁŹżŞĘź´ŚŔíĐĹϢ
> alert(http_request.responseText);
> map.src = http_request.responseText;
> /* var mapobj = document.getElementById('map');
> mapobj.src = http_request.responseText;*/
> } else { //ŇłĂ沝ŐýłŁ
> alert("ÄúËůÇëÇóľÄŇłĂćÓĐŇ쳣ĄŁ");
> }
> }
> }
> function getXmlRequest(){
> http_request = false;
> //żŞĘźłőĘźťŻXMLHttpRequest śÔĎó
> if(window.XMLHttpRequest) { //Mozilla äŻŔŔĆ÷
> http_request = new XMLHttpRequest();
> if (http_request.overrideMimeType) {//ÉčÖĂMiME Ŕŕąđ
> http_request.overrideMimeType("text/xml");
> }
> }
> else if (window.ActiveXObject) { // IE äŻŔŔĆ÷
> try {
> http_request = new ActiveXObject("Msxml2.XMLHTTP");
> } catch (e) {
> try {
> http_request = new ActiveXObject("Microsoft.XMLHTTP");
> } catch (e) {}
> }
> }
> if (!http_request) { // Ň쳣ŁŹ´´˝¨śÔĎóĘľŔýʧ°Ü
> window.alert("˛ťÄÜ´´˝¨XMLHttpRequest śÔĎóĘľŔý.");
> return false;
> }
> }
> function send_request_post(url, sendStr) {
> getXmlRequest();
> http_request.onreadystatechange = processRequestPost;
> // ȡś¨ˇ˘ËÍÇëÇóľÄˇ˝Ę˝şÍURL ŇÔź°ĘǡńÍŹ˛˝Ö´ĐĐĎœδúÂë
>
> http_request.open("POST", url, true);
> http_request.setRequestHeader("Content-Length",sendStr.length);
>
> http_request.setRequestHeader("Content-Type","application/x-www-form-urle
>ncoded"); //SetRequestHeaderÇ°ąŘĐëĎČopen
> http_request.send(sendStr);
>
> /* var newurl = "http://" + window.location.host + "/geoserver/wms?"
> + sendStr;
> http_request.open("GET", newurl, true);
> http_request.send(null);*/
> }
> </script>
>
> <body onLoad="doLoadMap()">
> <img src="Loading.gif" name="map" id="map">
> </body>
> </html>
>
>
>
> "map.src = http_request.responseText;" in the function
> "processRequestPost" is where I am puzzling, or are there any other
> errors?
>
> Otherwise, the function "GetSld" is used to get the parameter of
> request, it will return a XML such as SLD in fact.
>
> Help me! Thanking in advance!
>
> youni
>
> _________________________________________________________________
> ĎíÓĂĘŔ˝çÉĎ×î´óľÄľç×ÓÓĘźţϾͳĄŞ MSN HotmailĄŁ http://www.hotmail.com
>
>
>
> !DSPAM:1003,453798da54209771116852!
>
>
> ------------------------------------------------------------------------
>
> -------------------------------------------------------------------------
> Using Tomcat but need to do more? Need to support web services, security?
> Get stuff done quickly with pre-integrated technology to make your job
> easier Download IBM WebSphere Application Server v.1.0.1 based on Apache
> Geronimo
> http://sel.as-us.falkag.net/sel?cmd=lnk&kid=120709&bid=263057&dat=121642
>
> !DSPAM:1003,453798da54209771116852!
>
>
> ------------------------------------------------------------------------
>
> _______________________________________________
> Geoserver-users mailing list
> Geoserver-users@lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/geoserver-users
>
>
> !DSPAM:1003,453798da54209771116852!

--
Gabriel Roldán (groldan@anonymised.com)
Axios Engineering (http://www.axios.es)
Tel. +34 944 41 63 84
Fax. +34 944 41 64 90

Dear Gabriel,

Thank you for your answer first!

I will try to create such a plugin to resolve the problem. It maybe need some time, because I am not very familiar with the source code of geoserver.

I think I have another way to resolve the problem quickly, although it is not better than the way create a plugin. That is, create a servlet to get the request from ajax, and send another HTTP request to geoserver. Then the request receives the response from geoserver and writes the image to a temporary and web accesible directory, and returns an xml message with the URL to the client.

But both the two ways, it seems that the process of an img object gets it's src from server is not asynchronous. I think If the map is too big that the process cann't be stood, I will use the divisible-map.

Thanks a lot again!

Best regards,

Youni

From: Gabriel Roldán <groldan@anonymised.com>
To: geoserver-users@lists.sourceforge.net
CC: Chris Holmes <cholmes@anonymised.com>, youni_9@anonymised.com
Subject: Re: [Geoserver-users] a question about Ajax+geoserver
Date: Fri, 20 Oct 2006 11:32:13 +0200

Hi Youni,

This is a well known problem with getmap requests, POST and HTML.

Basically it

seems there is no way of setting the src attribute of an HTML img tag

using

POST.

One solution would be to create a new map producer in geoserver for the
application/xml output format.

That way, you could formulate the getmap request like:
<server>://<wms
path>?request=GetMap&format=application/xml;imageformat=image/png&width=................

or the POST equivalent.

So the request would be catched up by this new producer, use the hint in

the

format parameter to get a delegate producer, ask it for the image, write

to a

temporary and web accesible directory, and finally return an xml message

with

the URL to that file.

Then your ajax client could fetch the URL from the xml response and set

the

src attribute on an <img> tag.

Of course a temp directory cleanup mechanism should be added too in

geoserver.

If you feel like you can do that I will be happy of providing you

directions

on how to create such a "plugin". It would have to be on trunk though,

which

currently targets version 1.5.0

Cheers,

Gabriel

On Friday 20 October 2006 00:28, Chris Holmes wrote:
> I don't know ajax that well, but you may try checking out openlayers -
> http://openlayers.org. They have a nice ajax client for WMS (and WFS).
> You can probably dig in to their code and figure out how they did it,
> or even use their libraries directly.
>
> best regards,
>
> Chris
>
> ÓÆ ÄÝ wrote:
> > Hello!
> >
> > I am a new user of geoserver, I am using geoserver 1.3.2 and ajax, I
> > want to use the post method to request WMS, and get the map. But when

I

> > get the XMLHttpRequest object's response, I find that it is a stream

of

> > gif picture. I don't know how to connect the stream to a image

object.

> > This is my test page:
> >
> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
> > <html>
> > <head>
> > <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
> > <title>ÎÞ±êÌâÎĵµ</title>
> > </head>
> >
> > <script language="JavaScript">
> > function doLoadMap(){
> > var Url = "http://" + window.location.host +

"/geoserver/wms/GetMap";

> > var Sld = GetSld();
> > /* var newurl = "http://" + window.location.host +

"/geoserver/wms?"

> > + Sld;
> > map.src = newurl;*/
> > send_request_post(Url, Sld);
> > }
> > function GetSld(){
> > // maybe a SLD XML
> > var sldstr =
> >

"LAYERS=tiger:giant_polygon,tiger:poly_landmarks,tiger:tiger_roads,tiger:

> >poi"
> >
> > +
> >

"&FORMAT=image/gif&TRANSPARENT=TRUE&HEIGHT=406&REQUEST=GetMap&WIDTH=810&S

> >TYLES=,&SRS=EPSG:4326&VERSION=1.1.1"
> >
> > +
> >

"&BBOX=-74.02924949245278,40.70060354838641,-73.9883552568504,40.72110115

> >289822";
> >
> > return sldstr;
> > }
> > function processRequestPost(){
> > if (http_request.readyState == 4) { // Åж϶ÔÏó״̬
> > if (http_request.status == 200) { // ÐÅÏ¢ÒѾ­³É¹¦·µ»Ø£¬¿ªÊ¼´¦ÀíÐÅ

Ï¢

> > alert(http_request.responseText);
> > map.src = http_request.responseText;
> > /* var mapobj = document.getElementById('map');
> > mapobj.src = http_request.responseText;*/
> > } else { //Ò³Ãæ²»Õý³£
> > alert("ÄúËùÇëÇóµÄÒ³ÃæÓÐÒì³£¡£");
> > }
> > }
> > }
> > function getXmlRequest(){
> > http_request = false;
> > //¿ªÊ¼³õʼ»¯XMLHttpRequest ¶ÔÏó
> > if(window.XMLHttpRequest) { //Mozilla ä¯ÀÀÆ÷
> > http_request = new XMLHttpRequest();
> > if (http_request.overrideMimeType) {//ÉèÖÃMiME Àà±ð
> > http_request.overrideMimeType("text/xml");
> > }
> > }
> > else if (window.ActiveXObject) { // IE ä¯ÀÀÆ÷
> > try {
> > http_request = new ActiveXObject("Msxml2.XMLHTTP");
> > } catch (e) {
> > try {
> > http_request = new ActiveXObject("Microsoft.XMLHTTP");
> > } catch (e) {}
> > }
> > }
> > if (!http_request) { // Òì³££¬´´½¨¶ÔÏóʵÀýʧ°Ü
> > window.alert("²»ÄÜ´´½¨XMLHttpRequest ¶ÔÏóʵÀý.");
> > return false;
> > }
> > }
> > function send_request_post(url, sendStr) {
> > getXmlRequest();
> > http_request.onreadystatechange = processRequestPost;
> > // È·¶¨·¢ËÍÇëÇóµÄ·½Ê½ºÍURL ÒÔ¼°ÊÇ·ñͬ²½Ö´ÐÐ϶δúÂë
> >
> > http_request.open("POST", url, true);
> > http_request.setRequestHeader("Content-Length",sendStr.length);
> >
> >

http_request.setRequestHeader("Content-Type","application/x-www-form-urle

> >ncoded"); //SetRequestHeaderÇ°±ØÐëÏÈopen
> > http_request.send(sendStr);
> >
> > /* var newurl = "http://" + window.location.host +

"/geoserver/wms?"

> > + sendStr;
> > http_request.open("GET", newurl, true);
> > http_request.send(null);*/
> > }
> > </script>
> >
> > <body onLoad="doLoadMap()">
> > <img src="Loading.gif" name="map" id="map">
> > </body>
> > </html>
> >
> > "map.src = http_request.responseText;" in the function
> > "processRequestPost" is where I am puzzling, or are there any other
> > errors?
> >
> > Otherwise, the function "GetSld" is used to get the parameter of
> > request, it will return a XML such as SLD in fact.
> >
> > Help me! Thanking in advance!
> >
> > youni
> >
> > _________________________________________________________________
> > ÏíÓÃÊÀ½çÉÏ×î´óµÄµç×ÓÓʼþϵͳ¡ª MSN Hotmail¡£ http://www.hotmail.com
> >
> > !DSPAM:1003,453798da54209771116852!
> >
> >

------------------------------------------------------------------------

> >
> >

-------------------------------------------------------------------------

> > Using Tomcat but need to do more? Need to support web services,

security?

> > Get stuff done quickly with pre-integrated technology to make your

job

> > easier Download IBM WebSphere Application Server v.1.0.1 based on

Apache

> > Geronimo
> >

http://sel.as-us.falkag.net/sel?cmd=lnk&kid=120709&bid=263057&dat=121642

> >
> > !DSPAM:1003,453798da54209771116852!
> >
> >

------------------------------------------------------------------------

> >
> > _______________________________________________
> > Geoserver-users mailing list
> > Geoserver-users@lists.sourceforge.net
> > https://lists.sourceforge.net/lists/listinfo/geoserver-users
> >
> > !DSPAM:1003,453798da54209771116852!

--
Gabriel Roldán (groldan@anonymised.com)
Axios Engineering (http://www.axios.es)
Tel. +34 944 41 63 84
Fax. +34 944 41 64 90

_________________________________________________________________
Ãâ·ÑÏÂÔØ MSN Explorer: http://explorer.msn.com/lccn