zoukankan      html  css  js  c++  java
  • ARCGIS JSF AJAX实现返回实时比例尺

    1.arcgis 的地图控件是直接支持AJAX的.

    如果我们需要在地图操作时使用AJAX的话可以做如下操作

    在body onload 时调用init方法.

    function init()
                {
                 var map = EsriControls.maps["Map0"];
           map.addUpdateListener("request", updateInfoRequest);
                }

    这样我们在对地图进行操作时,就会调用 updateInfoRequest 方法.

    function updateInfoRequest(){
                 var url = EsriUtils.getServerUrl("frmMap");
                 var map = EsriControls.maps["Map0"];
                 var params = "ajaxdemo=ajaxdemo&mapId=Map0&" + EsriUtils.buildRequestParams(map.formId);
                 
                 var xmlHttp = EsriUtils.sendAjaxRequest(url,params,true,function()
                 { updateInfoResponse(xmlHttp); }); 
           }

    updateInfoResponse 这个是ajax发送请求时返回时调用的回调函数.

    使用这个函数可以实现对我们的界面做更新.

    function updateInfoResponse(xmlHttp) {
                 
          if (xmlHttp != null && xmlHttp.readyState == 4 && xmlHttp.status == 200) {
         var xml = xmlHttp.responseXML;
         var scale=xml.getElementsByTagName("scale").item(0).firstChild.nodeValue;
            document.getElementById("scale").value = "1:" + scale
        }
       }

    以上时客户端的调用

    服务端又是如何处理呢?

    我们在服务端可以使用一个实现 PhaseListener 接口的类.

    Ajax生命周期在server上是独立执行的。这以为着浏览器发出一个携带一定参数的request并且期望得到一个特定格式的XML response。这个response可以由任何类型的JSF PhaseListeners或者servlet或者甚至是静态的XML文件。现在我们看看怎样使用PhaseListener用来处理一个request和返回一个response到浏览器。

    当浏览器使用XMLHttpRequest对象向服务器发送request,这个request遵循标准的JSF request 处理生命周期。这些components在Restore View phase阶段被重建并且它们的状态在Apply Request values phase阶段被更新。因为我们需要这些在页面上的components被更新,我们跳过PhaseListener.beforePhase()方法的处理。在PhaseListener.afterPhase方法我们处理request和呈现response到客户端。

    代码如下:

    public class AjaxDemoPhaseListener implements PhaseListener {
     
     public PhaseId getPhaseId() {
      // TODO Auto-generated method stub

      //这里表示在应用请求值阶段进行处理
      return PhaseId.APPLY_REQUEST_VALUES;
     }
     public void afterPhase(PhaseEvent phaseEvent) {
      
      FacesContext facesContext = phaseEvent.getFacesContext();
      ExternalContext externalContext = facesContext.getExternalContext();
      Map paramMap = externalContext.getRequestParameterMap();
        
      String formId = (String) paramMap.get("formId");
        
      String mapId=(String)paramMap.get("mapId");

         //这里判断是不是我们需要的请求,如果不是直接返回.
         String ajaxdemo=(String) paramMap.get("ajaxdemo");
         if(ajaxdemo==null || !ajaxdemo.equals("ajaxdemo"))
          return;
        
        
        
        
        
         UIComponent form = facesContext.getViewRoot().findComponent(formId);
         MapControl mc = (MapControl) form.findComponent(mapId);
         WebMap wm = mc.getWebMap();
         String scale= String.valueOf(wm.getMapScale());
        
         Document doc = XMLUtil.newDocument();
         Element responseElement = XMLUtil.createElement(doc, "response", null, null);
         XMLUtil.createElement("scale", scale, responseElement);
         try {
       AJAXUtil.writeResponse(facesContext, doc);

       //


       facesContext.responseComplete();
      } catch (IOException e1) {
       // TODO Auto-generated catch block
       e1.printStackTrace();
      }

     }
     
     

     public void beforePhase(PhaseEvent phaseEvent) {
      
     }

     

    }

    最后我们在 <lifecycle> 中注册我们所写的监听器.

    这样arcgis的ajax使用全过程就完成了

  • 相关阅读:
    Proxy 相对于 Object.defineProperty 有哪些优点?
    Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别?
    Vue 3.0 性能提升主要是通过哪几个方面体现的?
    封装 Vue 组件库
    rollup-plugin-postcss ( PostCSS plugin postcss-noop-plugin requires PostCSS 8. Migration guide for end-users:)
    LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443
    vue serve 命令不管用
    典型80后的5年工作总结
    Elasticsearch强大的聚合功能Facet
    Mongodb使用总结
  • 原文地址:https://www.cnblogs.com/yg_zhang/p/1256850.html
Copyright © 2011-2022 走看看