ajax修炼之道阅读笔记.txt-优快云博客

本文链接：https://blog.youkuaiyun.com/zzz_781111/article/details/4447459

本文介绍了一种模拟Google地图的实现方式，包括地图切片显示、拖拽及缩放功能，并通过AJAX技术实现数据的异步获取，展示了如何在网页上构建交互式地图应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.模拟googlemap，非交模拟
1)将大地图切割成纵横排列的小地图图片,将放大的大地图切割成放大的小地图图片
2)创建outterdiv,innerdiv,outdiv是显示的部分,innerdiv需要足够大，以便后面拖来拖去
3)加入拖拽innerdiv的代码
4)计算innerdiv与outterdiv的相对位置，来确定哪些小片地图需要显示出来，然后把这些小图片加载后，显示到innerdiv中的指定坐标
把不需要显示的图片都删除掉
innerdiv.removeChild(imgs[i]);
5)增加缩放功能
放大：
点击按钮后，删除所有innerdiv上的图片，再次计算应该显示哪些放大的小地图图片，计算好以后加载
6)在地图上指定的位置显示对话框
a.在地图上新增加一个div z-index:1 把原来的innerdiv outerdiv的z-index:0
b.事件发生时将新的div移动到innerdiv上的指定位置，将新的div的位置设置为绝对。
c.拖动innerdiv时要避免删除新的div元素

2.ajax，交互
       <script type="text/javascript">
            var xhr;
            function getZipData(zipCode) {
                xhr = createXHR();
                xhr.onreadystatechange=processZipData;
                xhr.open("GET",
                         "/getCityStateFromZip.requests?" + zipCode);
                xhr.send(null);
            }

            function processZipData() {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        var data = xhr.responseText;
                        var cityState = data.split(',');
                        document.getElementById("city").value = cityState[0];
                        document.getElementById("state").value = cityState[1];
                        document.getElementById("zipError").innerHTML = "";
                    } else {
                        document.getElementById("zipError").innerHTML = "Error";
                    }
                }
            }
                    function createXHR() {
                var xhr;
                try {
                    xhr = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (E) {
                        xhr = false;
                    }
                }

                if (!xhr && typeof XMLHttpRequest != 'undefined') {
                      xhr = new XMLHttpRequest();
                }
                return xhr;
            }

        </script>

3.将返回值作为javascript
eval(request.responseText);
4.带宽是最昂贵的资源，所以Prototype将
var myElem=document.getElementByID('some_element');
变为
var myElem=$('some_element');
以使得使用Prototype库的时候能减少代码量
var elems=$('elem1','elem2','elem3');
for(var i=0;i<elems.length;i++)
{
elems[i].value="changed";
}