Java Web视频网站开发：ajax结合js实现tab切换选项卡效果

我就是我 2022-04-16 02:36 167阅读 0赞

通过前几篇博客，我们会发现，Ajax确实很强大，为我们的网站开发实现了很多方便的功能。今天，借篇首来普及一下Ajax。

Ajax（全称Asynchronous JavaScript and XML），是几个老技术的综合，包含

（1）异步数据获取技术，使用XMLHTTPRequest

（2）基于标准的表示技术，使用XHTML和css

（3）动态显示和交互技术，使用DOM（Document object Model文档对象模型）

（4）数据互换和操作技术，使用XML与XSTL

（5）JavaScript，将以上技术融合在一起

5个部分。其中，异步获取数据技术是所有技术的基础。它在1998年前后得到了应用，也算是一个经久不衰的老技术了。2005年初，ajax被大众所接受。Google在它著名的交互应用程序中使用了异步通信。

接下来叙述本篇博客的主题：用Ajax结合js实现一个伪tab的效果，开局先放两张图。

![20181115205917521.png][]![20181115205943265.png][]![20181115210022369.png][]

以上图中主要实现的功能是，当鼠标放到电视剧上时，用ajax异步加载电视剧的排行榜并显示；其他同理。这样形成了一个平时常用的tab切换选项卡的效果。

1.首先，在jsp中添加HTML代码，添加四个影视类型，以及一个放置排行榜前十的影视的地方，如下所示。并对影视类型添加onmouseover事件，传入类型参数。

2.编写js代码，首先编写qiehuan函数，然后使用window.οnlοad=qiehuan('dianshi');来使页面初次加载时加载电视剧的排行榜

/**
     * 根据类型异步加载其下的影视榜，并显示到指定位置
     * @param type
     */
    function qiehuan(type){
    	var u="/spiderank.jsp?type="+type;
    	xmlHttp.open("post",u,true);
    	xmlHttp.onreadystatechange=function(){
    		if(xmlHttp.readyState==4){
    			document.getElementById("video").innerHTML=xmlHttp.responseText;
    		}
    	};
    	xmlHttp.send();
    	//当前绿色显示，其他黑色显示
    	var ts=new Array("dianshi","dianying","zongyi","dongman");
    	for(i=0;i<4;i++){
    		//alert("\""+ts[i]+"");
    		if(type.equal(ts[i])){
    			alert(ts[i]);
    			//document.getElementById(ts[i]).style.color="green";
    		}else{
    			//document.getElementById(ts[i]).style.color="black";
    		}
    	}
    
    }
    window.onload=qiehuan('dianshi');

3.编写另一jsp代码，该jsp代码根据js中ajax传来的影视类型加载对应排行榜，输出对应排行榜，在js中通过ajax将此排行榜显示至指定位置。其中调用了一个自己定义的Java方法ArrayList<VideoObj> vos=Movie.getdata(main);  
，该方法爬取所有类型排行榜并返回，此处不再列出，如有需要，可在下方评论出说明，或至本人视频网站[吐槽墙][Link 1]说明。

<%
    String type=request.getParameter("type");//爬取的类型
    String main="https://www.360kan.com";
    ArrayList<VideoObj> vos=Movie.getdata(main);
    System.out.println(vos.size());
    int begin=0;//开始序号
    int end=0;//结束序号
    int j=0;//排行榜中序号
    if(type.equals("dianshi")){
    	begin=0;
    	end=10;
    }else if(type.equals("zongyi")){
    	begin=10;
    	end=20;
    }else if(type.equals("dianying")){
    	begin=20;
    	end=30;
    }else{
    	begin=30;
    	end=40;
    }
    for(int i=begin;i<end;i++){
    	VideoObj vo=vos.get(i);
    	int pai=vo.getPai();
    	String sp="";
    	String name=vo.getName();
    	String href=vo.getHref();
    	String pn=vo.getPn();
    	if(name.length()>6){
    		name=name.substring(0,5)+"...";
    	}
    	//获取播放链接
    	String purl=Movie.getPUrl(href);
    	if(j==0){
    		sp="<first>"+(j+1)+"</first>";
    	}else if(j==1){
    		sp="<second>"+(j+1)+"</second>";
    	}else if(j==2){
    		sp="<third>"+(j+1)+"</third>";
    	}else{
    		sp="<other>"+(j+1)+"</other>";
    	}
    	out.write(sp+" <a href=\"/player.jsp?type="+type+"&url="+href+"\" target='_blank'>"+name+"</a> <font>"+vo.getPn()+"</font><br>");
    	j++;
    }
    %>

代码列到这里功能也就实现了，感谢大家的阅读，欢迎大家访问本人[视频网站][Link 2]使用[吐槽墙][Link 1]功能及[音乐网站][Link 3]。我在这儿等着你们。

[20181115205917521.png]: https://img-blog.csdnimg.cn/20181115205917521.png
[20181115205943265.png]: https://img-blog.csdnimg.cn/20181115205943265.png
[20181115210022369.png]: /images/20220416/8b052dde3db04f11a02ef8d484c7d74f.png
[Link 1]: http://www.zy52113.com/toast.jsp
[Link 2]: http://www.zy52113.com
[Link 3]: http://www.zy52113.com/Minimusic