﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-sunfruit[请访问http://www.fruitres.cn]-随笔分类-Ajax</title><link>http://www.blogjava.net/sunfruit/category/13696.html</link><description>--我相信JAVA能走得更远 QQ:316228067</description><language>zh-cn</language><lastBuildDate>Fri, 21 Mar 2008 16:52:51 GMT</lastBuildDate><pubDate>Fri, 21 Mar 2008 16:52:51 GMT</pubDate><ttl>60</ttl><item><title>Swift GIS--稳定、自主、高效</title><link>http://www.blogjava.net/sunfruit/archive/2008/03/21/187758.html</link><dc:creator>sunfruit</dc:creator><author>sunfruit</author><pubDate>Fri, 21 Mar 2008 09:48:00 GMT</pubDate><guid>http://www.blogjava.net/sunfruit/archive/2008/03/21/187758.html</guid><wfw:comment>http://www.blogjava.net/sunfruit/comments/187758.html</wfw:comment><comments>http://www.blogjava.net/sunfruit/archive/2008/03/21/187758.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/sunfruit/comments/commentRss/187758.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/sunfruit/services/trackbacks/187758.html</trackback:ping><description><![CDATA[<script src="http://221.122.41.10/rmcomserver/ltmap/ltmap.js"></script><script type="text/javascript">
        var initMap;
        var mapListener = new MapListener();
        mapListener.onClick = function(geoPoint){
            //业务
            //pointId, geoPoint, color, size, opacity, caption, captionFontColor, captionBgColor, captionOpacity){
            var p = new Point(1, geoPoint, '#0000ff', 10, .6, '测试点', '#000000', '#FFFF00', .6);
            initMap.addPoint(p);
        }
            
        mapListener.onMouseMove = function(geoPoint){
            window.status = "lon="+geoPoint.x+"; lat="+geoPoint.y;
        }
        
        function win_load(){
            initMap = new initMap('map', '221.122.41.10', '80'); 
            initMap.addPanZoomBar(5, 5);
            //initMap.addOverviewMap();
            //*****初始化地图控制面板*****
            initMap.addControlPanel(60, 20);
            
            initMap.controlPanel.all[0].onclick = function(){initMap.drag();};
            initMap.controlPanel.all[1].onclick = function(){initMap.zoomIn();};
            initMap.controlPanel.all[2].onclick = function(){initMap.zoomOut();};           
            initMap.controlPanel.all[3].onclick = function(){initMap.getDistance();};           
            initMap.controlPanel.all[4].onclick = function(){initMap.onPoint('onPoint1');};         
            initMap.controlPanel.all[5].onclick = function(){initMap.onRect('onRect1');};
            initMap.controlPanel.style.width = '370px';
            //*************************
        }
        function onPoint1(geoPoint){
            var p = new Point(1, geoPoint, '#0000ff', 10, 1, '测试点', '#000000', '#FFFF00', .6);
            initMap.addPoint(p);
        }
        function onRect1(geoRect){
            var rectArea = new RectArea(1, geoRect, '#00ff00', 0.5, '#0000ff', 1);
            initMap.addRect(rectArea);
        }
        function win_unload(){
            initMap.listenerAgent.removeListener(mapListener);
        }
        //点操作
        function addPoint(){
            var lon = OpenLayers.Util.getElement('addPointLon').value;
            var lat = OpenLayers.Util.getElement('addPointLat').value;
            var geoPoint = new GeoPoint(parseFloat(lon), parseFloat(lat));
            var p = new Point(1, geoPoint, '#0000ff', 10, 1, '中文中文中文中文', '#FFFF00', '#00FF00', 1);
            initMap.addPoint(p);
        }
        function deletePoint(){
            initMap.deletePoint(1);
        }
        function clearPoint(){
            initMap.clearPoint();
        }
        //线操作
        function addLine(){
            var str = OpenLayers.Util.getElement('addPolygonPoints').value;
            
            var pointArr = str.split(",");
            var points = new Array();
            for(var i = 0; i < pointArr.length; i+=2){
                points.push(new GeoPoint(parseFloat(pointArr[i]), parseFloat(pointArr[i+1])));
            }
            
            var line = new Line(1, points, '#000000', 4, 1);
            initMap.addLine(line);
        }
        function deleteLine(){
            initMap.deleteLine(1);
        }
        function clearLine(){
            initMap.clearLine();
        }
        //圆形操作
        var regularPolygonFeature;
        function addCircle(){
            lon = OpenLayers.Util.getElement('addCircleLon').value;
            lat = OpenLayers.Util.getElement('addCircleLat').value;
            radius = OpenLayers.Util.getElement('addPointRadius').value;
            
            var geoCircle = new GeoCircle(parseFloat(lon), parseFloat(lat), parseFloat(radius));
            var circleArea = new CircleArea(1, geoCircle, '#00ff00', 0.5, '#0000ff', 1);
            //alert(circleArea);
            initMap.addCircle(circleArea);          
        }
        function deleteCircle(){
            initMap.deleteCircle(1);
        }
        function clearCircle(){
            initMap.clearCircle();
        }
        //矩形操作
        function addRect(){
            var left = OpenLayers.Util.getElement('addRectLeft').value;
            var top = OpenLayers.Util.getElement('addRectTop').value;
            var right = OpenLayers.Util.getElement('addRectRight').value;
            var bottom = OpenLayers.Util.getElement('addRectBottom').value;
            
            if(left != null && left != '' && top != null && top != '' && right != null && right != '' && bottom != null && bottom != ''){
                var geoRect = new GeoRect(parseFloat(left), parseFloat(top), parseFloat(right), parseFloat(bottom));
                var rectArea = new RectArea(1, geoRect, '#00ff00', 0.5, '#0000ff', 1);
                initMap.addRect(rectArea);
            }
        }
        
        function deleteRect(){
            initMap.deleteRect(1);
        }
        function clearRect(){
            initMap.clearRect();
        }
        //多边形
        function addPolygon(){
            var str = OpenLayers.Util.getElement('addPolygonPoints').value;
            if(str != null && str != ''){
                var pointArr = str.split(",");
                var nPoints = new Array();
                for(var i = 0; i < pointArr.length; i+=2){
                    nPoints.push(new OpenLayers.Geometry.Point(parseFloat(pointArr[i]), parseFloat(pointArr[i+1])));
                }
                var polygonArea = new PolygonArea(1, nPoints, '#0000ff', 0.1, '#0000ff', 2);
                initMap.addPolygon(polygonArea);
            }
        }
        function deletePolygon(){
            initMap.deletePolygon(1);
        }
        function clearPolygon(){
            initMap.clearPolygon();
        }
        //标记和弹出窗口
        function addMarker(){
            var str = OpenLayers.Util.getElement('popupPosition').value;
            var pointArr = str.split(",");
            var marker = new Marker(1, new GeoPoint(parseFloat(pointArr[0])-.2, parseFloat(pointArr[1])), 
                'img/zoom-world-mini.png', 30, 30, 
                '<center><a href="http://www.baidu.com" target="_blank">百度</a></center>', '测试POI1', '#000000', '#DDD', .8, false);
            initMap.addMarker(marker);
            
            var marker2 = new Marker(2, new GeoPoint(parseFloat(pointArr[0]), parseFloat(pointArr[1])), 
                'img/zoom-world-mini.png', 30, 30, 
                '<center><a href="http://www.baidu.com" target="_blank">百度</a></center>', '测试POI2', '#000000', '#DDD', .8, true);
            initMap.addMarker(marker2);
            
            var marker3 = new Marker(3, new GeoPoint(parseFloat(pointArr[0])+.2, parseFloat(pointArr[1])), 
                'img/zoom-world-mini.png', 30, 30, 
                '', '测试POI3', '#000000', '#DDD', .8, true);
            initMap.addMarker(marker3);
        }
        
        function deleteMarker(){
            initMap.deleteMarker(1);
        }
        function clearMarker(){
            initMap.clearMarker();
        }
        //弹出窗口
        function addPopup(){
            var str = OpenLayers.Util.getElement('popupPosition').value;
            if(str != null && str != ''){
                var pointArr = str.split(",");
                var p = new GeoPoint(parseFloat(pointArr[0]), parseFloat(pointArr[1]));
                var popup = new Popup(1, p, .9, '<center>北京灵图技术有限公司</center><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><center>灵图</center>', 272, 170 , true);                         
                initMap.addPopup(popup);
            }
        }
        function deletePopup(){
            initMap.deletePopup(1);
        }
        function clearPopup(){
            initMap.clearPopup();
        }
       
        function addScale(){
            initMap.addScale();
        }
        function getScale(){
            var obj = OpenLayers.Util.getElement('scaleId');
            obj.value = initMap.getScale();
        }
        function removeScale(){
            initMap.removeScale();
        }
        function addPanZoomBar(){
            initMap.addPanZoomBar(5, 5);
        }
        function removePanZoomBar(){
            initMap.removePanZoomBar();
        }
        function addListener(){
            initMap.listenerAgent.addListener(mapListener);
        }
        function removeListener(){
            initMap.listenerAgent.removeListener(mapListener);
        }
        
        function setCenter() {
            var center = new GeoPoint(106.5220,29.5616);
            initMap.setCenter(center);
        }
        function getCenter(){ alert(initMap.getCenter()); }
        function addSelectFeature(){ initMap.addSelectFeature(); }
        function zoomOut(){ initMap.zoomOut(); }
        function drag(){ initMap.drag(); }
        function addLonLat(){ initMap.addLonLat(); }
        function setMapByRect(){ 
            geoRect = new GeoRect(106.4253,29.5725,106.6100,29.4756);
            initMap.setMapByRect(geoRect);
        }
        function setMapByPoints(){
            var str = OpenLayers.Util.getElement('addPolygonPoints').value;
            if(str != null && str != ''){
                var pointArr = str.split(",");
                var nPoints = new Array();
                for(var i = 0; i < pointArr.length; i+=2){
                    nPoints.push(new OpenLayers.Geometry.Point(parseFloat(pointArr[i]), parseFloat(pointArr[i+1])));
                }
                initMap.setMapByPoints(nPoints);
            }   
        }
        var floatPopup, floatPopup1, floatPopup2;
        function addFloatPopup(){
            var jsContent = "<strong>第一个弹出窗口内容</strong><br /><center><input type=\"button\" value=\"弹出第二个窗口\" onclick=\"test1()\" /></center>";
            floatPopup = new creatPopup('aaa', 200, 230, 244, 386, '第一个窗口', jsContent);
            //alert(floatPopup);
        }
         function addFloatPopup1(){
            var jsContent = "<strong>第一个弹出窗口内容</strong>";
            creatPopup('aaa', 400, 430, 244, 386, '测试窗口', jsContent);
        }
        function test1(){
            creatPopup('bbb', 100, 130, 440, 250, '第二个窗口', '<center>内容</center>');
        }
        
        function closePopup_LP(id){
            closeFloatPopup(id);
        }
        
        function zoomIn(){
            initMap.zoomIn();
        }
        function zoomOut(){
            initMap.zoomOut();
        }
        function getDistance() {
            initMap.getDistance();
        }
        /*********需要回调的函数**********/
        function clearRect(){
            initMap.clearRect();
        }
        function eventAgent(evt) {
            initMap.eventAgent(evt);
        }
        /*******************************/
    </script>
<div style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; width: 640px; border-bottom: black 1px solid; height: 480px">
<div id="map" style="width: 100%; height: 100%"></div>
</div>
<form action="" method="post">
    <!--   <input type="text" value="" name="loggers" size="100" /> --><!--<input type=button value='清除' onclick='document.getElementById("loggers").value=""'/ /><br/ />
    <textarea rows="5" cols="150" id="loggers"></textarea>
 -->
    <table width="1024" border="1">
        <tbody>
            <tr>
                <td width="152">地图操作</td>
                <td colspan="2"><input onclick="initMap.drag();" type="button" value="移动" name="drag" /> <input onclick="initMap.zoomIn()" type="button" value="放大" name="zoomIn" /> <input onclick="initMap.zoomOut()" type="button" value="缩小" name="zoomOut" />&nbsp;&nbsp;&nbsp; <input onclick="initMap.getDistance()" type="button" value="测距" name="line" /> <input onclick="initMap.getArea()" type="button" value="测面" name="polygon" />&nbsp;&nbsp;&nbsp; <input onclick="setCenter()" type="button" value="设中心" name="" /> <input onclick="getCenter()" type="button" value="取中心" name="" />&nbsp;&nbsp;&nbsp; <input onclick="setMapByRect()" type="button" value="设置地图(rect)" name="" /> <input onclick="setMapByPoints()" type="button" value="设置地图(points)" name="" /> </td>
            </tr>
            <tr>
                <td width="152">点、线</td>
                <td colspan="2"><input value="106.5220" name="addPointLon"  type="text" /> <input value="29.5616" name="addPointLat"  type="text" /> <input onclick="addPoint()" type="button" value="加点" /> <input onclick="deletePoint()" type="button" value="删点" /> <input onclick="clearPoint()" type="button" value="清点" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input onclick="addLine()" type="button" value="加线" name="" /> <input onclick="deleteLine()" type="button" value="删线" name="" /> <input onclick="clearLine()" type="button" value="清线" name="" /> </td>
            </tr>
            <tr>
                <td rowspan="3">多边形</td>
                <td>圆</td>
                <td>中心 <input size="12" value="106.5220" name="addCircleLon"  type="text" /> <input size="12" value="29.5616" name="addCircleLat"  type="text" /> 半径 <input id="addPointRedius" size="12" value="0.09" name="addPointRadius"  type="text" /> <input onclick="addCircle()" type="button" value="加圆" name="" /> <input onclick="deleteCircle()" type="button" value="删圆" name="" /> <input onclick="clearCircle()" type="button" value="清圆" name="" /></td>
            </tr>
            <tr>
                <td>矩形</td>
                <td>左上 <input id="addRectLeft" size="12" value="106.4253" name="addRectLeft"  type="text" /> <input id="addRectTop" size="12" value="29.5725" name="addRectTop"  type="text" /> 右下 <input id="addRectRight" size="12" value="106.6100" name="addRectRight"  type="text" /> <input id="addRectBottom" size="12" value="29.4756" name="addRectBottom"  type="text" /> <input onclick="addRect()" type="button" value="加矩形" name="" /> <input onclick="deleteRect()" type="button" value="删矩形" name="" /> <input onclick="clearRect()" type="button" value="清矩形" name="" /></td>
            </tr>
            <tr>
                <td width="62">多边形</td>
                <td width="788"><input id="addPolygonPoints" size="68" value="106.5220,29.5616,106.4253,29.5725,106.5726,29.616" name="addPolygonPoints"  type="text" /> <input onclick="addPolygon()" type="button" value="加多边形" name="" /> <input onclick="deletePolygon()" type="button" value="删多边形" name="" /> <input onclick="clearPolygon()" type="button" value="清多边形" name="" /> </td>
            </tr>
            <tr>
                <td width="152">标记(marker)</td>
                <td colspan="2"><input onclick="addMarker()" type="button" value="加标记" name="" /> <input onclick="deleteMarker()" type="button" value="删标记" name="" /> <input onclick="clearMarker()" type="button" value="清标记" name="" />&nbsp;&nbsp;&nbsp;&nbsp; <input id="popupPosition" value="106.4230,29.5616" name="popupPosition"  type="text" /> <input onclick="addPopup()" type="button" value="加弹出窗口" name="" /> <input onclick="deletePopup()" type="button" value="删弹出窗口" name="" /> <input onclick="clearPopup()" type="button" value="清弹出窗口" name="" />&nbsp;&nbsp;&nbsp;&nbsp; </td>
            </tr>
            <tr>
                <td width="152">滑动条(PanZoomBar)</td>
                <td colspan="2"><input onclick="addPanZoomBar()" type="button" value="添滑动条" name="" /> <input onclick="removePanZoomBar()" type="button" value="删滑动条" name="" />&nbsp;&nbsp; <input onclick="addLonLat()" type="button" value="添经纬度" name="" />&nbsp;&nbsp; <input onclick="initMap.addOverviewMap()" type="button" value="添鹰眼" name="" /> <input onclick="initMap.deleteOverviewMap()" type="button" value="删鹰眼" name="" /> </td>
            </tr>
            <tr>
                <td width="152">比例尺(scale)</td>
                <td colspan="2"><input id="scaleId" name="scaleId"  type="text" /> <input onclick="getScale()" type="button" value="取比例尺" name="" /> <input onclick="addScale()" type="button" value="添比例尺" name="" /> <input onclick="removeScale()" type="button" value="删比例尺" name="" /> </td>
            </tr>
            <tr>
                <td width="152">地图属性</td>
                <td colspan="2"><input onclick="alert(initMap.getViewSize());" type="button" value="窗口大小" name="" /> <input onclick="alert(initMap.getMapSize());" type="button" value="地图大小" name="" /> </td>
            </tr>
            <tr>
                <td width="152">事件</td>
                <td colspan="2"><input onclick="initMap.drag();addListener()" type="button" value="添加监听" name="" /> <input onclick="removeListener()" type="button" value="删除监听" name="" />&nbsp;&nbsp;&nbsp;&nbsp; <input onclick="initMap.onRect('onRect1')" type="button" value="画框" name="" />&nbsp;&nbsp;&nbsp;&nbsp; <input onclick="initMap.onPoint('onPoint1')" type="button" value="点选" name="" /> </td>
            </tr>
            <tr>
                <td width="152">其它</td>
                <td colspan="2"><input onclick="addFloatPopup()" type="button" value="浮动窗口A" name="" /> <input onclick="addFloatPopup1()" type="button" value="浮动窗口B" name="" /> <input onclick="closePopup_LP('aaa')" type="button" value="关闭窗口A" name="" /> <input onclick="closePopup_LP('bbb')" type="button" value="关闭窗口B" name="" /> </td>
            </tr>
        </tbody>
    </table>
</form>
<script>
    //initMap.addOverviewMap();
    win_load();
</script>    <img src ="http://www.blogjava.net/sunfruit/aggbug/187758.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/sunfruit/" target="_blank">sunfruit</a> 2008-03-21 17:48 <a href="http://www.blogjava.net/sunfruit/archive/2008/03/21/187758.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>[原创]通过AJAX监控文件上传进度</title><link>http://www.blogjava.net/sunfruit/archive/2006/08/10/62747.html</link><dc:creator>sunfruit</dc:creator><author>sunfruit</author><pubDate>Thu, 10 Aug 2006 03:11:00 GMT</pubDate><guid>http://www.blogjava.net/sunfruit/archive/2006/08/10/62747.html</guid><wfw:comment>http://www.blogjava.net/sunfruit/comments/62747.html</wfw:comment><comments>http://www.blogjava.net/sunfruit/archive/2006/08/10/62747.html#Feedback</comments><slash:comments>4</slash:comments><wfw:commentRss>http://www.blogjava.net/sunfruit/comments/commentRss/62747.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/sunfruit/services/trackbacks/62747.html</trackback:ping><description><![CDATA[    --sunfruit<br /><br />   很多时候需要上传附件到服务器，一般采用在页面放置&lt;input type="file" name="upload" value=""&gt; 的方式让用户选择要上传的文件进行上传，使用的是HTTP协议，这样的方式很方便开发也简单，不过如果上传的附件比较大的时候，会出现IE响应很慢的情况，如果用户急性子，多点几下上传的按钮，那么就会导致IE不响应的情况，这个时候如果在文件上传得过程中，给用户一个动态的提示甚至是一个上传的进度条，效果就会好多了，这样就会用到Ajax技术了，让Ajax以一个固定的间隔时间检查上传情况然后在页面以文字或是图片的方式体现出来就行了。<br />   在使用Ajax进行附件上传进度查询的时候也想过，直接使用Ajax进行附件上传，在实现过程中发现问题比较多，所以就使用了变通的方式：使用标准的附件上传方式，结合Ajax进行上传的进度检查<br />   主要的代码如下：<br />   Ajax的封装<br />   /**<br />  * 创建 XMLHttpRequest 对象<br />  */<br />  function getXMLHttpRequest()<br />  {<br />    var http_request;<br />    if (window.XMLHttpRequest) {<br />      //非IE浏览器框架创建 XMLHttpRequest 对象<br />      http_request = new XMLHttpRequest();<br />      if(http_request.overrideMimeType)<br />      {<br />        http_request.overrideMimeType('text/xml');<br />      }<br />    }else if (window.ActiveXObject){<br />      // 创建 XMLHttpRequest 对象<br />      try {<br />        http_request = new ActiveXObject("Msxml2.XMLHTTP");<br />      } catch (e1) {<br />        try {<br />          http_request = new ActiveXObject("Microsoft.XMLHTTP");<br />        } catch (e2) {<br />          // 不能创建 XMLHttpRequest 对象<br />        }<br />      }<br />    }<br />    return http_request;<br />  }<br /><br />/**<br />   * Get请求<br />   */<br />  function sendGetDictate(http_request,url)<br />  {<br />    req.open("GET", url, true);<br />    http_request.send(null);<br />  }<br />以上是Ajax的的基础部分，下面说文件上传部分的检查部分，文件上传本身的流程不变，只是在提交上传以后，需要执行setTimeout(checkupload,500); 这样的方法 checkupload 方法要自己编写，例如<br />function checkupload()<br />  {<br />    req=getXMLHttpRequest();<br />    req.onreadystatechange = setActiveContent;<br />    sendGetDictate(req,"/manager/servlet/imageservlet?tag=ajaxuploadfilecheck&amp;WARE_ID=609187669&amp;nocache="+Math.random(),"name=111");<br />  }<br />然后需要编写setActiveContent方法，例如<br />var count=0; //防止无限循环，并且在页面提交上传得时候设置为0<br />function setActiveContent()<br />  {<br />    if (req.readyState == 4) {<br />      if (req.status == 200) {<br />        var rettext=req.responseText; //这里是servlet返回的内容，检查上传得状态，可以在javabean或是servlet里面设置全局的静态变量来表明上传状态<br />        if(rettext=="-1")<br />        {<br />          //停止循环<br />          alert("服务器更新错误");<br />        }<br />        else if(rettext=="0")<br />        {<br />          //继续循环检查<br />          if(count&lt;6)<br />          {<br />            setTimeout("checkupload()",500);<br />            count++;<br />          }<br />          else<br />          {<br />            alert("上传失败");<br />          }<br />        }<br />        else if(rettext=="1")<br />        {<br />          alert("文件上传成功");<br />        }<br />      }<br />    }<br />  }<br />  <br />基本流程就是这样了，至于文字表现上传过程还是进度条表现，就看自己了<img src ="http://www.blogjava.net/sunfruit/aggbug/62747.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/sunfruit/" target="_blank">sunfruit</a> 2006-08-10 11:11 <a href="http://www.blogjava.net/sunfruit/archive/2006/08/10/62747.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>