页面导航：首页 → 网络编程 → AJAX相关 → 正文内容

用ajax实现在单击事件下加载一个DIV层的脚本

发布：游客字体：[增加减小] 类型：转载

我想做一个类似QQ空间评论的功能
不知大家发现了没有 QQ空间只有点击了那个文本框后编辑器才会加载出来
并不是那种先隐藏通过单击后才显示的

点击运行可以看到效果:

<!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>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>无标题文档</title>  
<script type="text/javascript">  
//the function can get the content of right page when user click the link in the left side  
var xmlHttp;  
var searching=false;  
var myDivName="";  
function getXMLHTTP(){  
    A = new ActiveXObject("microsoft.xmlhttp");  
    return A;  
}  
function executeQuery(divName,url)  
{  
    searching = true;  
    myDivName = divName;  
    if(xmlHttp && xmlHttp.readystate != 0) {  
        xmlHttp.abort();  
    }  
    xmlHttp=getXMLHTTP();  
    var tempurl="";  
    if(xmlHttp && myDivName!=""){  
        tempurl += url + ".htm" + "?";//加载文挡类型  
        tempurl += "&" + new Date().getTime();  
        xmlHttp.open("Get", tempurl , true);  
        xmlHttp.onreadystatechange = getReturnHtml;  
        xmlHttp.send(null);  
    }else{  
        searching = false;  
        myDivName = "";  
        window.alert('系统太忙，请稍后再试！');  
        return false;  
    }  
}  
function getReturnHtml(){  
        if(xmlHttp.readyState==1)  
    {  
    document.getElementById(myDivName).innerHTML ="<img src='http://www.jb51.net/logo.gif'/>";  
    }  
      
    else if(xmlHttp.readystate == 4 && xmlHttp.responsetext && searching) {  
            //alert (myDivName);  
        document.getElementById(myDivName).innerHTML = xmlHttp.responsetext;  
        //alert(xmlHttp.responseText);  
        searching = false;  
    } else{  
        document.getElementById(myDivName).innerHTML ="拒绝访问";  
        }  
}  
</script>  
<style type="text/css">  
  
</style>  
</head>  
<body>  
<div id="Layer1"></div>  
<label>  
<input type="button" name="Submit" value="在下面加载新闻" onclick="executeQuery('Layer1','http://www.jb51.net')" />  
</label>  
</body>  
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：ajax 单击事件加载一个DIV层

百度中搜索更多的关于用ajax实现在单击事件下加载一个DIV层的脚本内容，或者用Google搜索相关更多

浏览次数：载入中... 打印本文关闭本文返回首页

顶一下

上一篇文章：asp+ajax实现静态页面分页的代码
下一篇文章：用Ajax读取xml文件的简单例子

文章评论

共有位脚本之家网友发表了评论我来说两句

用ajax实现在单击事件下加载一个DIV层的脚本

文章评论

同类文章

最近更新

热点排行

用ajax实现在单击事件下加载一个DIV层的脚本

文章评论

同 类 文 章

最 近 更 新

热 点 排 行

同类文章

最近更新

热点排行