我有一个主程序，它有几个Javascript例程，其中一个是Ajax。 Ajax调用返回带有id的div的html，我希望调用页面中的另一个Javascript例程修改返回的html的属性。这可能吗？我已经进行了一些测试，但我无法让它发挥作用。
这是在头脑中
<script type="text/javascript">
function Ajax()
{
var
$http,
$self = arguments.callee;
if (window.XMLHttpRequest) {
$http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
$http = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
$http = new ActiveXObject('Microsoft.XMLHTTP');
}
}
if ($http) {
$http.onreadystatechange = function()
{
if (/4|^complete$/.test($http.readyState)) {
document.getElementById('ReloadThis').innerHTML = $http.responseText;
setTimeout(function(){$self();}, 10000);
}
};
$http.open('GET', 'random7.php' + '?minutes=' + new Date().getMinutes() + '&seconds=' + new Date().getSeconds(), true);
$http.send(null);
}
}
var galleryId = 'gallery'; /* change this to the ID of the gallery list */
var gallery; /* this will be the object reference to the list later on */
var galleryImages; /* array that will hold all child elements of the list */
var currentImage; /* keeps track of which image should currently be showing */
var previousImage;
var preInitTimer;
preInit();
/* functions */
function preInit() {
/* an inspired kludge that - in most cases - manages to initially hide the image gallery list
before even onload is triggered (at which point it's normally too late, and the whole list already
appeared to the user before being remolded) */
if ((document.getElementById)&&(gallery=document.getElementById(galleryId))) {
gallery.style.visibility = "hidden";
if (typeof preInitTimer != 'undefined') clearTimeout(preInitTimer); /* thanks to Steve Clay http://mrclay.org/ for this small Opera fix */
} else {
preInitTimer = setTimeout("preInit()",2);
}
}
function fader(imageNumber,opacity) {
/* helper function to deal specifically with images and the cross-browser differences in opacity handling */
var obj=galleryImages[imageNumber];
if (obj.style) {
if (obj.style.MozOpacity!=null) {
/* Mozilla's pre-CSS3 proprietary rule */
obj.style.MozOpacity = (opacity/100) - .001;
} else if (obj.style.opacity!=null) {
/* CSS3 compatible */
obj.style.opacity = (opacity/100) - .001;
} else if (obj.style.filter!=null) {
/* IE's proprietary filter */
obj.style.filter = "alpha(opacity="+opacity+")";
}
}
}
function fadeInit() {
if (document.getElementById) {
preInit(); /* shouldn't be necessary, but IE can sometimes get ahead of itself and trigger fadeInit first */
galleryImages = new Array;
var node = gallery.firstChild;
/* instead of using childNodes (which also gets empty nodes and messes up the script later)
we do it the old-fashioned way and loop through the first child and its siblings */
while (node) {
if (node.nodeType==1) {
galleryImages.push(node);
}
node = node.nextSibling;
}
for(i=0;i<galleryImages.length;i++) {
/* loop through all these child nodes and set up their styles */
galleryImages[i].style.position='absolute';
galleryImages[i].style.top=0;
galleryImages[i].style.zIndex=0;
/* set their opacity to transparent */
fader(i,0);
}
/* make the list visible again */
gallery.style.visibility = 'visible';
/* initialise a few parameters to get the cycle going */
currentImage=0;
previousImage=galleryImages.length-1;
opacity=100;
fader(currentImage,100);
/* start the whole crossfade process after a second's pause */
window.setTimeout("crossfade(100)", 1000);
}
}
function crossfade(opacity) {
if (opacity < 100) {
/* current image not faded up fully yet...so increase its opacity */
fader(currentImage,opacity);
/* fader(previousImage,100-opacity); */
opacity += 10;
window.setTimeout("crossfade("+opacity+")", 30);
} else {
/* make the previous image - which is now covered by the current one fully - transparent */
fader(previousImage,0);
/* current image is now previous image, as we advance in the list of images */
previousImage=currentImage;
currentImage+=1;
if (currentImage>=galleryImages.length) {
/* start over from first image if we cycled through all images in the list */
currentImage=0;
}
/* make sure the current image is on top of the previous one */
galleryImages[previousImage].style.zIndex = 0;
galleryImages[currentImage].style.zIndex = 100;
/* and start the crossfade after a second's pause */
opacity=0;
window.setTimeout("crossfade("+opacity+")", 6000);
}
}
/* initialise fader by hiding image object first */
addEvent(window,'load',fadeInit)
/* 3rd party helper functions */
/* addEvent handler for IE and other browsers */
function addEvent(elm, evType, fn, useCapture)
{
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
}
}
</script>
Ajax调用就像这样
<script type="text/javascript">;
setTimeout(function() {Ajax();}, 10000);
</script>;
<div id="ReloadThis">Default text</div>;
Ajax php页面返回如下代码：
echo "<ul id=\"gallery\" style=\"height:325;\">";
echo "<li><img src=\"Image1.jpg\" alt=\"\" /></li>";
echo "<li><img src=\"Image2.jpeg\" alt=\"\" /></li>";
echo "</ul>";
我知道推子代码是以独立方式工作的，因为我已多次使用它，但它不能与Ajax一起工作。
答案 0 :(得分：0)
据我所知，您想知道是否可以发出返回html的Ajax请求。当Ajax调用返回时，您想要操作html，然后可能会显示它。
var request = $.ajax({
url: '/echo/html/',
data: {
html :'<div id="cat">My name is <span class="name">Alice</span></div>'
},
type: 'post'
}).always(function(data){
var element = $(data);
var name = element.find('.name');
name.text('Bob');
element.appendTo(document.body);
})
答案 1 :(得分：0)
问题＃1
当您在Ajax()函数中收到HTML时，会用它替换当前的图库，希望crossfade()函数不会看到任何内容。不幸的是，您的新图片不在galleryImages变量中，因此crossfade()函数无法处理它们。
你需要做另一个fadeInit()来解决所有这些人。
在Ajax函数中，添加该调用：
document.getElementById('ReloadThis').innerHTML = $http.responseText;
setTimeout(function(){$self();}, 10000);
fadeInit(); /* register the new elements */
问题＃2
现在，幻灯片继续滚动，但它正在加速！这是因为每次进行更新时，crossfade()函数仍会循环显示所有以前的图片集。为了能够停止它并重新开始，将超时存储在变量中，我们可以在需要时清除它。
/* At the top of your JS code */
var crossTimer;
/* In your crossfade() function */
crossTimer = window.setTimeout("crossfade("+opacity+")", 30);
现在，只需在Ajax函数中清除它
即可document.getElementById('ReloadThis').innerHTML = $http.responseText;
setTimeout(function(){$self();}, 10000);
if (typeof crossTimer != 'undefined') clearTimeout(crossTimer);
fadeInit();