博客分类：
下拉树图示：
主要实现部分：
第一，freemarker页面显示部分
&input type="hidden" name="comboxId" id="comboxId"&
&div style="position:float:"&
&div id="combo" onclick="showComboxTree(this, 'comboxTree')" style="width:200height:16" &
&div id="downICON" align="center"&&img src="${path}/images/combo.gif" /&&/div&
&div id="displyContent"&${displayName}&/div&
&ul id="comboxTree" class="tree" style="display:overflow:background-color:#f5f5f5;border :1px solid Sposition:z-index:5;"&&/ul&
外层div的position要设置为relative,里层的&ul&要设置position:z-index:5，z-index设置为一个大于0的值就可以。这样显示ul对象的时候才会叠在其他层的上面，而不会把下面的层挤走。这部分熟悉div布局的读者应该会比较清楚。
显示树的组件比较多，如dtree,zTree之类的，在这不作介绍，本人使用的是zTree,zTree是jquery的一个插件，可以实现异步加载,不用一下子将整个树加载进来。
第二，js方法 showComboxTree，如下：
function showComboxTree(obj, treeName){
if (document.getElementById(treeName).style.display == 'none') {
var objTop = obj.offsetT
var objLeft = obj.offsetL
var treeTop = objTop + parseInt(obj.style.height);
var treeLeft = objL
document.getElementById(treeName).style.top = treeTop+parseInt(2.5);;
document.getElementById(treeName).style.left = treeL
document.getElementById(treeName).style.display = 'block';
document.getElementById(treeName).style.width = obj.style.
document.getElementById(treeName).style.height = '150'; //控制高度
document.getElementById(treeName).style.display = 'none';
comboxTree.ftl完整代码如下：
&#assign path="${request.getContextPath()}"&
&link rel="stylesheet" href="${path}/ztree/zTreeStyle/zTreeStyle.css" type="text/css"&
&script type="text/javascript" src="${path}/ztree/jquery-1.4.2.js"&&/script&
&script type="text/javascript" src="${path}/ztree/jquery-ztree-2.3.min.js"&&/script&
border:1px solid #949DA4;
#displyContent{
#downICON{
&script language="javascript"&
function showComboxTree(obj, treeName){
if (document.getElementById(treeName).style.display == 'none') {
var objTop = obj.offsetT
var objLeft = obj.offsetL
var treeTop = objTop + parseInt(obj.style.height);
var treeLeft = objL
document.getElementById(treeName).style.top = treeTop+parseInt(2.5);;
document.getElementById(treeName).style.left = treeL
document.getElementById(treeName).style.display = 'block';
document.getElementById(treeName).style.width = obj.style.
document.getElementById(treeName).style.height = '150'; //控制高度
document.getElementById(treeName).style.display = 'none';
&input type="hidden" name="comboxId" id="comboxId"&
&div style="position:float:"&
&div id="combo" onclick="showComboxTree(this, 'comboxTree')" style="width:200height:16" &
&div id="downICON" align="center"&&img src="${path}/images/combo.gif" /&&/div&
&div id="displyContent"&${displayName}&/div&
&ul id="comboxTree" class="tree" style="display:overflow:background-color:#f5f5f5;border :1px solid Sposition:z-index:5;"&&/ul&
&SCRIPT LANGUAGE="JavaScript"&
var zTree1;
setting = {
checkable: false,
async: true,
asyncUrl: "${path}${treepath}",
//获取节点数据的URL地址
asyncParam: ["isRoot", "id"],
//获取节点数据时，必须的数据名称，例如：id、name
callback:{
asyncSuccess: zTreeOnAsyncSuccess,
asyncError: zTreeOnAsyncError,
click: zTreeOnClick
expandSpeed:""
var zNodes =[];
$(document).ready(function(){
refreshTree();
//点击事件
function zTreeOnClick(event, treeId, treeNode) {
document.getElementById('displyContent').innerHTML = treeNode.
document.getElementById('comboxTree').style.display = 'none';
onclickTreeNode(treeNode);
$("#comboxId").val(treeNode.id);
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
function zTreeOnAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
function refreshTree() {
setting.asyncUrl = "${path}${treepath}";
zTree1 = $("#comboxTree").zTree(setting, zNodes);
第三步，自定义jsp标签，jsp标签处理类实现如下：
public class ComboxTreeTag extends TagSupport{
private static final long serialVersionUID = 4887144L;
private String displayN
private String actionU
private final static String defaultUrl="/tree/getTreeOnParent.action";
public int doStartTag() throws JspException {
Configuration freemarkerCfg = FreemarkerService.getConfiguration();
JspWriter out=super.pageContext.getOut();
pageContext.getServletContext();
Writer writer = new StringWriter();
Template template = freemarkerCfg.getTemplate("comboxTree.ftl", "UTF-8");
SimpleHash root = new SimpleHash(ObjectWrapper.BEANS_WRAPPER);
//给模板动态填充数据
root.put("treepath",actionUrl==null?defaultUrl:actionUrl);
root.put("displayName",displayName);
//处理模版
template.process(root, writer);
} catch (TemplateException e) {
e.printStackTrace();
writer.flush();
String content = writer.toString();
writer.close();
out.write(content);
} catch (IOException e) {
e.printStackTrace();
return super.doStartTag();
public String getDisplayName() {
return displayN
public void setDisplayName(String displayName) {
this.displayName = displayN
public String getActionUrl() {
return actionU
public void setActionUrl(String actionUrl) {
this.actionUrl = actionU
第四步，webtag.tld
&?xml version="1.0" encoding="UTF-8" ?&
&taglib xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd"
version="2.1"&
&description&JSTL 1.1 core library&/description&
&display-name&JSTL core&/display-name&
&tlib-version&1.1&/tlib-version&
&short-name&c&/short-name&
&uri&/web-tags&/uri&
&name&comboxTree&/name&
&tag-class&com.tc.jsptag.ComboxTreeTag&/tag-class&
&body-content&JSP&/body-content&
&attribute&
&name&actionUrl&/name&
&type&java.lang.String&/type&
&/attribute&
&attribute&
&name&displayName&/name&
&type&java.lang.String&/type&
&required&true&/required&
&rtexprvalue&true&/rtexprvalue&
&/attribute&
第五部分，在页面使用comboxTree，testComboxTree.jsp
&%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&
&%@ taglib prefix="tc" uri="/web-tags" %&
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&
&title&测试comboxTree&/title&
&tc:comboxTree displayName="默认部门"/&
&div style="top: 50"&&img src="${basePath}images/01.jpg"/& &/div&
浏览: 88648 次
来自: 广州
jquery.mytime.js这个js请问你有么
http://localhost/jcbase/res/js/ ...
哥们有没有源码啊？能不能发一份！@qq.co ...
哥们有没有源码啊？能不能发一份！@qq.co ...
w 写道nameKey JSONArray
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'为什么异步加载js文件？加载方式_百度知道
为什么异步加载js文件？加载方式
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
引领黄瓜耽知道合伙人
来自电脑网络类芝麻团
引领黄瓜耽
采纳数：309
获赞数：396
参与团队：
同步加载，单步加载，引入js内容可以直接使用var Skip={};//获取XMLHttpRequest对象(提供客户端同http服务器通讯的协议)Skip.getXmlHttpRequest=function (){ if ( window.XMLHttpRequest ) // 除了IE外的其它浏览器return new XMLHttpRequest() ; else if ( window.ActiveXObject ) // IE return new ActiveXObject(&MsXml2.XmlHttp&) ; },//导入内容Skip.includeJsText =function (rootObject,jsText){ if ( rootObject != null ){ var oScript = document.createElement( &script& );oScript.type = &text/javascript&; //oScript.id = sId; //oScript.src = fileU //oScript.defer = oScript.text = jsT rootObject.appendChild(oScript); //alert(oScript.text);}
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。javascript如何解决异步加载实现方式总结
原创
 14:17:42
255
默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。 (1) defer，只支持IE defer属性的定义和用法defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。 有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。 如果您的脚本不会改变文档的内容，可将 defer 属性加入到 &script& 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。 示例： &script type=&text/javascript& defer=&defer&&
alert(document.getElementById(&p1&).firstChild.nodeValue);
&/script&(2) async： async的定义和用法(是HTML5的属性) async 属性规定一旦脚本可用，则会异步执行。 示例： &script type=&text/javascript& src=&demo_async.js& async=&async&&&/script&注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。 注释：有多种执行外部脚本的方法： o如果 async=&async&：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行） o如果不使用 async 且 defer=&defer&：脚本将在页面完成解析时执行 o如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本 (3) 创建script，插入到DOM中，加载完毕后callBack，见代码： function loadScript(url, callback){
var script = document.createElement_x(&script&)
script.type = &text/javascript&;
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == &loaded& ||
script.readyState == &complete&){
script.onreadystatechange =
callback();
} else { //Others: Firefox, Safari, Chrome, and Opera
script.onload = function(){
callback();
script.src =
document.body.appendChild(script);
}以上就是javascript如何解决异步加载实现方式总结的详细内容，更多请关注php中文网其它相关文章！
江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用...
ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...
《php.cn原创html5视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。
本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。
所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通...
本课以最新版ThinkPHP5.0.10为基础进行开发，全程实录一个完整企业点，从后台到前台，从控制器到路由的全套完整教程，不论是你是新人，还是有一定开发经验的程序员，都可以从中学到实用的知识~~
ThinkPHP是一个快速、开源的轻量级国产PHP开发框架，是业内最流行的PHP框架之一。本课程以博客系统为例，讲述如何使用TP实战开发，从中学习Thinkphp的实践应用。模版下载地址：http:/...
本课程是php实战开发课程，以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程
本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能，以及具体的实现方法，让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。
javascript是运行在浏览器上的脚本语言，连续多年，被评为全球最受欢迎的编程语言。是前端开发必备三大法器中，最具杀伤力。如果前端开发是降龙十八掌，好么javascript就是第18掌：亢龙有悔。...
本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了，赶紧看看吧，说不定这里就有你的菜
轻松明快，简洁生动，让你快速走入HTML5的世界，体会语义化开发的魅力
JavaScript能够称得上是史上使用最广泛的编程语言，也是前端开发必须掌握的三技能之一：描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单，所有开发者都能快速上手...
《php.cn独孤九贱（2）－css视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了CSS知识...
《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始，增加验证码，cookie验证等，丰富网站的登录注册功能
jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的...
《PHP学生管理系统视频教程》主要给大家讲解了HTML，PHP，MySQL之间的相互协作，实现动态的网页显示和获取数据.
《弹指间学会HTML视频教程》从最基本的概念开始讲起，步步深入，带领大家学习HTML,了解各种常用标签的意义以及基本用法，学习HTML知识为以后的学习打下基础
《最新微信小程序开发视频教程》本节课程是由微趋道录制，讲述了如何申请一个微信小程序，以及开发中需要使用哪些工具，和需要注意哪些等。
PHP开发工程师
文章总浏览数博客分类：
概述:
XLoadTree 可以实现异步加载树，主要是通过读取XML数据流，生成嵌套DIV的方式做展现.
如果数据量较小可以使用本组件，建议单层不要超过200个节点数。
其中有好几个对象WebFXTree\WebFXTreeItem\WebFXLoadTreeItem,它们之间有什么不同本人没研究过，因为找到了一个可以满足我现在的需求，我就直接用了。
我用的是WebFXLoadTreeItem
//WebFXLoadTreeItem的用法可以参考xloadtree.js里的function WebFXLoadTreeItem(sText, sXmlSrc, sAction, eParent, sIcon, sOpenIcon) {}
//http://www.xx.com/xx.do 是可以写回XML流的访问地址
var tree = new WebFXLoadTreeItem("Root", "http://www.xx.com/xx.do");
tree.build();
//返回的XML格式类似于
&?xml version="1.0" encoding="UTF-8"?&
&!-- action属性可以是URL或JS函数等 --&
&!-- 如果有子节点，请将src属性写上查询子节点的地址(返回格式同本XML介绍),
本人的实验结果是，如果没有子节点，请不要配置src属性;
如果src指定的地址返回了不正确的XML,浏览器会提示错误。
&TreeNode text="Root" action="javascript:xx();" src="http://www.xx.com/xx.do"&
&!-- 我是叶子节点 --&
&TreeNode text="Level1"
action="javascript:xx();"
&!-- 我还有子节点,可以双击或点加号继续查询 --&
&TreeNode text="Level2"
action="javascript:xx();"
src="http://www.xx.com/xx.do"/&
&/TreeNode&
-----------------------------------
附件是从官网下的DEMO，为了方便只能上JE网站的人。
下载次数: 237
浏览: 46923 次
来自: 深圳
啥玩意，啥也没说
very nice!
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'如何处理python爬虫中的异步加载
本文链接http://woaitqs.sinaapp.com/?p=186今天是愚人节，不过我可没有开玩笑，异步加载是对于爬虫而言是很具挑战性的东西，因为通过urllib2加载的东西是无法获取异步内容的在网上看的资料中，大多是使用nodejs或者其他工具进行渲染后，再进行抓取，这可能适用于一般的情况，但是效率不高，而且所需的知识还是很多的。如果你肯善于发现的话，你会发现在某些情况下可以做到山重水复疑无路，柳暗花明又一村的这里以同程网作为示例，我们爬取http://www.17u.cn/HotelPicInfo-19940.html中的异步加载的酒店图片首先我们通过工具分析图片(chrome)是如何加载的，我们可以看到其中的hotel_page_4的js文件,在这个json文件中实现了分页的功能和ajax的功能其次我们在json文件中发现这么一句话1
var url ="/Hotel/ajax/HotelAjaxCall.aspx?action=getpichotel&hotelId="+ txt_HotelId +"&picType="+ picType +"&Page="+ n +"&r="+ Math.random();我们通过在html文件中了解的值可以发现txt_HotelId，totalpage都可以找到将上面的url填写完成后，就可以获取ajax中异步获取的json文件，下面就是代码示例1
Created on
@author: TQS
'''importQueueimporturllib2import json
from BeautifulSoup import BeautifulSoup
START_URL = "http://www.17u.cn/SearchList_53_0_0_0__0__0_0_0___0_"
END_URL = "_0___0.html"
ROOT_URL = "http://www.17u.cn"
AJAX_URL = "http://www.17u.cn/Hotel/ajax/HotelAjaxCall.aspx?action=getpichotel&hotelId=%s&pictype=0&Page=%s&r=0.5"
start_queue = Queue.Queue()
out_queue = Queue.Queue()def addRootPart(item):
return ROOT_URL + item
def getBaseUrls():
hosts = [START_URL+str(num)+END_URL for num inrange(1,135)]return hosts
def getHotelUrls():
content = urllib2.urlopen('http://www.17u.cn/SearchList_53_0_0_0__0__0_0_0___0_1_0___0.html').read()
soup = BeautifulSoup(content)
hotellist = soup.find(id="hotellist_info").findAll("h3")
hotelurls = [ROOT_URL + item.a["href"]for item in hotellist]return hotelurls
def getDetails():
content = urllib2.urlopen('http://www.17u.cn/HotelInfo-19940.html').read()
soup = BeautifulSoup(content)
address = soup.find(id="div_info").findAll("dl")[1].find("dd").text
name = soup.find(id="C_Deatl1_div_content").h1.text
photourl = ROOT_URL + soup.find(id="comImgList").find("a")['href']print address,name,photourl
def getPhotoFromJson(hotelid,page):
jsonurl = AJAX_URL %(hotelid,page)
content = urllib2.urlopen(jsonurl).read()
jsondata = json.loads(content)return[item["Url"]for item in jsondata["Image"]]def getPhotos():
content = urllib2.urlopen('http://www.17u.cn/HotelPicInfo-10218.html').read()
soup = BeautifulSoup(content)
hotelid = soup.find(id="txt_HotelId")['value']"""the num of the pages"""
pages = soup.find(id='totalPage')['value']for num inrange(1,int(pages)+1):
getPhotoFromJson(str(hotelid),str(num))if __name__ == "__main__":
getPhotos()
原文链接:http://www.wumii.com/item/T3o0Kwek
阅读: 6308 |}