我正在学习AJAX这些天,这是我的html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rob's Rock 'n' Roll Memorabilia</title>
<link rel="stylesheet" href="css/default.css"/>
<script type="text/javascript" src="scripts/thumbnails.js"></script>
</head>
<body>
<div id="wrapper">
<img src="images/logotypeLeft.png" alt="Rob's Rock 'n' Roll Memorabilia"
width="394" height="91" id="logotypeLeft"/>
<img src="images/logotypeRight.png" alt="Rob's Rock 'n' Roll Memorabilia"
width="415" height="92" id="logotypeRight"/>
<div id="introPane">
<p>Are you looking for the perfect gift for the rock fan in your life?
Maybe you want a guitar with some history behind it, or a conversation
piece for your next big shindig. Look no further! Here you'll find all
sorts of great memorabilia from the golden age of rock and roll.</p>
<p><strong>Click on an image to the left for more details.</strong></p>
</div>
<div id="thumbnailPane">
<img src="images/itemGuitar.jpg" width="301" height="105" alt="guitar"
title="itemGuitar" id="itemGuitar"/>
<img src="images/itemShades.jpg" alt="sunglasses" width="301" height="88"
title="itemShades" id="itemShades"/>
<img src="images/itemCowbell.jpg" alt="cowbell" width="301" height="126"
title="itemCowbell" id="itemCowbell"/>
<img src="images/itemHat.jpg" alt="hat" width="300" height="152"
title="itemHat" id="itemHat"/>
</div>
<div id="detailsPane">
<img src="images/blank-detail.jpg" width="346" height="153" id="itemDetail"/>
<div id="description"></div>
</div>
</div>
</body>
</html>
这是我的thumbnails.js:
/**
* Created by Czyhandsome on 2015/10/20.
*/
window.onload = initPage;
var request = createRequest();
function initPage() {
var thumbs = document.getElementById("thumbnailPane").getElementsByTagName("img");
for (var i = 0; i < thumbs.length; ++i) {
var image = thumbs[i];
image.onclick = function () {
var detailUrl = "images/" + this.title + "-detail.jpg";
document.getElementById("itemDetail").src = detailUrl;
getDetails(this.title);
};
}
}
function getDetails(itemName) {
if (request == null) {
alert("Unable to create request.");
return;
}
var url = "getDetails.php?ImageID=" + encodeURIComponent(itemName);
request.open("GET", url, true);
request.onreadystatechange = displayDetails;
request.send(null);
}
function displayDetails() {
if (request.readyState == 4) {
if (request.status == 200) {
var detailDiv = document.getElementById("description");
detailDiv.innerHTML = request.responseText;
}
}
}
function createRequest() {
var request;
try {
request = new XMLHttpRequest();
}
catch (tryMs) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (otherMS) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (failed) {
request = null;
}
}
}
return request;
}
这里是我的getDetail.php:
<?php
$details = array (
'itemGuitar' => "<p>Pete Townshend once played this guitar while his own axe was in the shop having bits of drumkit removed from it.</p>",
'itemShades' => "<p>Yoko Ono's sunglasses. While perhaps not valued much by Beatles fans, this pair is rumored to have been licked by John Lennon.</p>",
'itemCowbell' => "<p>Remember the famous '"more cowbell'" skit from Saturday Night Live? Well, this is the actual cowbell.</p>",
'itemHat' => "<p>Michael Jackson's hat, as worn in the '"Billie Jean'" video. Not really rock memorabilia, but it smells better than Slash's tophat.</p>"
);
echo $details[$_REQUEST['ImageID']];
?>
但是当我读到这一页时,它是这样的:bug.png
在我删除代码echo $details[$_REQUEST['ImageID']];之后,它看起来仍然是这样的!
为什么会发生这种情况?
当我切换到一个新服务器时,我为此挣扎了一段时间。你可以使用
opcache_reset();
http://php.net/manual/en/function.opcache-reset.php 我在我的开发环境中编写每个php文件时都使用它。
当你第一次将它添加到一个php文件时,缓存需要大约五分钟的时间来重置。