第二版
7章 P115页 AJAX中 XMLhttpRequest 的例子为何实现不了呢？图片说明](https://img-ask.csdn.net/upload/201705/18/1495090411_795048.png)图片说明](https://img-ask.csdn.net/upload/201705/18/1495090399_170604.png)
页面不能显示出example.txt 中的文本 会先弹出RequestReceived 在弹出 Function Done 页面上都是空白
试了几个浏览器都没打开
还有 DOM 7章 重返图片库P 112页 也没实现
这是HTML页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Image Gallery</title>
<style>
body {
font-family: "Helvetica", "Arial", "serif";
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
img {
display: block;
clear: both;
padding: 20px 20px;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
display: inline;
}
#imagegallery li a img {
border: 0;
}
</style>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="p1.jpg" title="A firework display"><img src="p1.jpg" alt="Firework" width="150" height="120"></a>
</li>
<li>
<a href="p2.jpg" title="A cup of black coffee"><img src="p2.jpg" alt="Coffee" width="150" height="120"></a>
</li>
<li>
<a href="p3.jpg" title="A red, red rose"><img src="p3.jpg" alt="Rose" width="150" height="120"></a>
</li>
<li>
<a href="p4.jpg" title="The famous clock"><img src="p4.jpg" alt="BigBen" width="150" height="120"></a>
</li>
</ul>
<script src="fun.js"></script>
</body>
</html>
JS中的代码
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function insertAfter() {
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.createTextNodde) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var placeholder = document.createElement("img");
placeholder.setAttribute("id", "palceholder");
placeholder.setAttribute("src", "p5.jpg");
placeholder.setAttribute("alt", "my image gallery");
var description = document.createElement("p");
description.setAttribute("id", "description");
var desctext = document.createTextNode("choose an image");
description.appendChild(desctext);
var gallery = document.getElementById("imagegallery");
insertAfter(placeholder, gallery);
insertAfter(description, placeholder);
}
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
return !showPic(this);
}
links[i].onkeypresss = links[i].onclick;
}
}
function showPic(whichpic) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", source);
if (placeholder.nodeName != "IMG") return false;
if (document.getElementById("description")) {
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {
description.firstChild.nodeValue = text;
}
}
return false;
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
这是页面显示出来的效果 图片点击后没反应，之前改了几次都没成功。
新手还在学习中，见谅
