ajax修炼之道阅读笔记.txt
来源:互联网 发布:凯迪网络下载 编辑:程序博客网 时间:2024/04/29 23:24
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";
}
- ajax修炼之道阅读笔记.txt
- 程序员修炼之道,阅读笔记(1)
- 《程序员修炼之道》阅读笔记
- 《项目管理修炼之道》阅读笔记(1)
- 闲读ajax修炼之道
- 《程序员修炼之道》阅读记录 (2)
- 《程序员修炼之道——从小工到专家》阅读笔记
- 程序员修炼之道笔记
- 程序员修炼之道--笔记
- 《第五项修炼》阅读笔记
- 读《程序员修炼之道》之笔记
- 《程序员修炼之道》阅读记录 (1)
- 《程序员修炼之道》第一章注重实效的哲学阅读
- 程序员修炼之道笔记(一)
- Java系统程序员修炼之道-笔记
- WEB前端开发修炼之道 笔记
- 《项目管理修炼之道》笔记
- 笔记——javascript修炼之道
- exchange数据库和日志容量成长太很快|exchange数据库日志压缩
- ASCII 转16进制 和 16进制转ASCII
- oracle 92操作相关
- 对邮箱存储禁用已删除项目保留功能
- SQL 内连接,外连接
- ajax修炼之道阅读笔记.txt
- BBSXP的数据表依赖关系
- AIX tail 命令
- 测试工程师基本素质
- 准备会战!
- 子查询返回的值不止一个
- 这种样式怎么做?
- 深入浅出理解索引结构
- 自动化测试工具汇总