我遇到了问题，毫无疑问我怀疑我的 AJAX 和 JSON 新手技能。我的设置是这样的：我有一个在我的 HTML 末尾调用的墙板 javscript 对象。墙板实例化后，我有创建 BXSlider 对象的脚本标签（不喜欢这些挂在我的 HTML 的尾部）。我的墙板对象和我的 bxslider 对象都有内部 ajax 调用，其中一个是 getJSON。我的问题是这样的：毫不奇怪，我的异步调用没有及时返回响应以使页面接受数据。当然，如果我抛出一个 alert('test'); 它为 Firefox 12 提供了足够的加载时间，但在 Safari 5.1 或 IE 9 中仍然无法正常工作。
HTML：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Wallboard</title>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery.bxSlider.min.js" type="text/javascript"></script>
<script src="Scripts/wallboard.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/yui.js"></script>
<style type="text/css">
body {
overflow-x: auto;
overflow-y: auto;
}
body, h1 {
margin: 0;
}
#container {
display: inline;
}
#leftPanel {
position:fixed;
width: 350px;
background-color: #E0DEDE;
border-right: 1px solid gray;
border-left: 1px solid gray;
}
#rightPanel {
position: relative;
margin-left: 352px;
background-color: #F2EFEF;
border-left: 1px solid #FFF;
}
#rightPanelStatus {
position: absolute;
bottom: 0px;
width: 100%;
background-color: gray;
border-top: 1px solid darkgray;
}
#rightPanelStatus .cmdBar {
text-align: center;
}
#slideContainer {
list-style: none;
}
li {
text-align: center;
}
img {
height: 169px;
width: 169px;
}
.slideControl {
display: inline;
cursor: pointer;
}
#playControl, #pauseControl {
margin: 10px;
padding: 0 5px 0 5px;
}
</style>
</head>
<body onresize="changeHeight();">
<div id="container">
<div id="leftPanel">
<ul id="slideContainer">
</ul>
</div>
<div id="rightPanel">
<div id="rightPanelContainer">
</div>
<div id="rightPanelStatus">
<div class="cmdBar"><div id="playControl" class="slideControl">Play</div><div id="pauseControl" class="slideControl">Pause</div></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
/* scale container height to adjust to browser window size. IE 7 hates this! */
function changeHeight() {
var sh = 460;
if (document.body && document.body.offsetWidth) {
sh = document.body.offsetHeight;
}
if (document.compatMode == 'CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth) {
sh = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
sh = window.innerHeight;
}
document.getElementById("container").style.height = sh + "px";
document.getElementById("leftPanel").style.height = sh + "px";
document.getElementById("rightPanel").style.height = sh + "px";
}
/* initial call to get browser screen size after page loads */
changeHeight();
</script>
<script type="text/javascript">
/* wallboard object */
myWallboard = new wallboard();
myWallboard.loadSlides();
alert('test'); // THIS IS THE ABOVEMENTIONED ALERT TEST
$(document).ready(function () {
/* slider object */
var slider = $('#slideContainer').bxSlider({
auto: true,
autoControls: false,
mode: 'vertical',
controls: false,
speed: 1000,
displaySlideQty: 5,
moveSlideQty: 1,
onBeforeSlide: function (currentSlide) {
myWallboard.setSlideSpeed(slider, currentSlide, myWallboard.slides);
myWallboard.AJAXRequest(myWallboard.slides[currentSlide][1], 'rightPanelContainer');
}
});
var cs = slider.getCurrentSlide();
myWallboard.setSlideSpeed(slider, cs, myWallboard.slides);
myWallboard.AJAXRequest(myWallboard.slides[cs][1], 'rightPanelContainer');
/* controls */
$('#pauseControl').click(function () {
document.getElementById('pauseControl').style.backgroundColor = "#C4C4C4"
document.getElementById('pauseControl').style.padding = "4px"
document.getElementById('playControl').style.backgroundColor = ""
document.getElementById('playControl').style.padding = "0 4px 0 4px"
myWallboard.stopSlideTimer();
slider.stopShow();
return false;
});
$('#playControl').click(function () {
document.getElementById('playControl').style.backgroundColor = "#C4C4C4"
document.getElementById('playControl').style.padding = "4px"
document.getElementById('pauseControl').style.backgroundColor = ""
document.getElementById('pauseControl').style.padding = "0 4px 0 4px"
slider.startShow();
return false;
});
});
</script>
</html>
墙板.js
/* wallboard constructor */
function wallboard() {
var t = 0;
var _this = this;
this.slides = new Array(5);
/* create a multidimensional array of each slide. */
for (var i = 0; i < this.slides.length; i++) {
/* create next dimension (url) */
this.slides[i] = new Array(3);
}
this.loadSlides = function () {
var _this = this;
$.getJSON('jsonReturn.aspx', function (json, status) {
var i = 0;
$.each(json, function (key, val) {
_this.slides[i][0] = val.imagePath;
_this.slides[i][1] = val.url;
_this.slides[i][2] = val.duration;
i++;
});
for (var i = 0; i < _this.slides.length; i++) {
document.getElementById('slideContainer').innerHTML += '<li><img src="' + _this.slides[i][0] + '" /></li>\n';
}
});
}
this.startSlide = function (slider) {
slider.startShow();
}
this.stopSlideTimer = function () {
try {
// alert("pausing slides. killing setTimeout " + t);
clearTimeout(t);
return false;
}
catch (err) {
alert("Could not stop slide timer.");
}
}
this.setSlideSpeed = function (slider, cs, sa) {
var _this = this;
clearTimeout(t);
slider.stopShow();
//alert('testing sa[cs][2]: ' + sa[cs][2]);
t = setTimeout(function () { _this.startSlide(slider); }, sa[cs][2] * 1000);
}
this.AJAXRequest = function (uri, div) { // leftover YUI, replace with jQuery
// Create a YUI instance using io-base module.
YUI().use("io-base",
function (Y) {
/* the following can be used to post variables to a page this
may be useful for sending parameters to a server side page */
var cfg = {
method: 'POST',
form: {
id: 'myform',
useDisabled: false
}
};
{
// Define a function to handle the Ajax response data.
function complete(id, o, args) {
// used for debugging
//alert("id:" + id + ", o.responseText: " + o.responseText + ", args: " + args);
// put the html returned in the main slide div
document.getElementById(div).innerHTML = o.responseText;
};
// Subscribe to event "io:complete", and pass an array
// as an argument to the event handler "complete"
Y.on('io:complete', complete, Y, ['arguments (these may not be needed)']);
var request = Y.io(uri);
}
});
}
}
那么，如何重新编写代码以使 AJAX 调用完成并且数据可用于 bxslider 和墙板对象？虽然我发现了很多关于类似问题的问题，但我无法使用他们的解决方案来解决这个问题。
谢谢，布赖恩