<html>
<head>
<meta charset=utf-8>
<title></title>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imageGallery">
<li><a href="images/1 (1).png" title="picture1" alt="picture1">picture1</a></li>
<li><a href="images/1 (2).png" title="picture2" alt="picture2">picture2</a></li>
<li><a href="images/1 (3).png" title="picture3" alt="picture3">picture3</a></li>
</ul>
<script>
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof oldonload != 'function') {
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
function prepareGallery(){
if (!document.getElementsByTagName || !document.getElementById) return false;
links = document.getElementsByTagName("a");
for (var i = 0,j = links.length;i<j; i++) {
links[i].onclick = function(){
return !showPic(this);
}
}
}
function showPic(whichPic){
if (!document.getElementById("placeHolder")) return false;
var source = whichPic.getAttribute("href");
var placeholder = document.getElementById("placeHolder");
if (placeholder.nodeName != "IMG") return false;
placeholder.setAttribute("src",source);
if (document.getElementById("description")) {
var text = whichPic.getAttribute("title");
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
}
return true;
}
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
function preparePlaceholder(){
if(!document.createElement) return false;
if(!document.createTextNode) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imageGallery")) return false;
var placeholder = document.createElement("img");
placeholder.setAttribute("id","placeHolder");
placeholder.setAttribute("src","images/pic0.jpg");
placeholder.setAttribute("alt","my image gallery");
var description = document.createElement("p");
description.setAttribute("id","description");
var h1 = document.createElement("h2");
var text = document.createTextNode("Choose an image:");
h1.appendChild(text);
description.appendChild(h1);
var gallery = document.getElementById("imageGallery");
insertAfter(description,gallery);
insertAfter(placeholder,description);
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
</script>
<script>
var request;
function getHttpObject(){
if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
}
function getNewContent(){
request = getHttpObject();
if (request) {
request.onreadystatechange = handleStateChange;
request.open("GET","file.py",true);
request.send(null);
}
}
/*
0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。
*/
function handleStateChange(){
if (request.readyState == 4) {
if (request.status == 200 || request.status == 0) {
var placeholder = document.getElementById("placeHolder");
var para = document.createElement("p");
var text = document.createTextNode(request.responseText);
para.appendChild(text);
insertAfter(para,placeholder);
}else{
alert("unexpected error occurred.");
}
}
}
addLoadEvent(getNewContent);
</script>
</body>
</html>