Java Web視頻網站開發：ajax結合js實現tab切換選項卡效果

通過前幾篇博客，我們會發現，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的效果，開局先放兩張圖。

以上圖中主要實現的功能是，當鼠標放到電視劇上時，用ajax異步加載電視劇的排行榜並顯示；其他同理。這樣形成了一個平時常用的tab切換選項卡的效果。

1.首先，在jsp中添加HTML代碼，添加四個影視類型，以及一個放置排行榜前十的影視的地方，如下所示。並對影視類型添加onmouseover事件，傳入類型參數。

<div class='rank'>
	&emsp;<span style="color: black;" id="dianshi" onmouseover="qiehuan('dianshi')">電視劇</span>&emsp;
	<span style="color: black" id="zongyi" onmouseover="qiehuan('zongyi')">綜藝</span>&emsp;
	<span style="color: black" id="dianying" onmouseover="qiehuan('dianying')">電影</span>&emsp;
	<span style="color: black" id="dongman" onmouseover="qiehuan('dongman')">動漫</span>
	<div id="video"></div>
</div>

2.編寫js代碼，首先編寫qiehuan函數，然後使用window.onload=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);
，該方法爬取所有類型排行榜並返回，此處不再列出，如有需要，可在下方評論出說明，或至本人視頻網站吐槽牆說明。

<%
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+"&nbsp;<a href=\"/player.jsp?type="+type+"&url="+href+"\" target='_blank'>"+name+"</a>&nbsp;<font>"+vo.getPn()+"</font><br>");
	j++;
}
%>

代碼列到這裏功能也就實現了，感謝大家的閱讀，歡迎大家訪問本人視頻網站使用吐槽牆功能及音樂網站。我在這兒等着你們。