1. 程式人生 > >視訊網站開發:Ajax非同步實現已登入使用者收藏視訊的功能

視訊網站開發:Ajax非同步實現已登入使用者收藏視訊的功能

        已登入使用者收藏視訊的功能是各大影視網站都具備的一項功能,也叫做加入看單或加入我喜歡。這一項功能主要是為了方便已經登入的使用者可以收藏自己喜歡的視訊,在想看的時候可以直接到自己的個人介面中觀看這些自己收藏過的視訊,極大地避免了使用者因忘記視訊名但是想知道而冥思苦想不可得的問題。

        在近一個月前為自己的553影院添加了註冊登入功能後,我又根據這個登入功能相繼添加了許多大型視訊網站擁有的功能,這些功能一般是在登陸後才能操作的,因為要向資料庫儲存你個人在網站上的行為資訊,就必須要有對應的你的賬號。比如發表對影視的帶表情的評論回覆功能,記錄網站的訪問日誌功能,儲存使用者的登入日誌功能,記錄使用者的搜尋記錄功能,記錄使用者的播放記錄功能,實時小喇叭廣播功能.....

        這篇部落格我就已登入使用者收藏視訊這一功能的實現來展開敘述。。。

        實現這一功能的方法有很多,但是我還是感覺用Ajax非同步收藏是個比較不錯的方法,因為Ajax本身就是無需重新整理瀏覽器介面就可以執行想要達到的效果,可以為使用者帶來較好的體驗。實現Ajax非同步收藏主要的步驟有兩個,第一個是編寫js程式碼,異步向收藏視訊的類或Servlet傳送傳去的資訊,以下是js程式碼

//Ajax非同步收藏視訊
function sc(nick,title,url,type,img){//使用者名稱,視訊名,連結,型別,圖片
   	var etitle=encodeURI(encodeURI(title));//需將中文視訊名二次編碼方可非同步通訊
	var xmlHttp=false;
   	if(window.XMLHttpRequest){//搜狗瀏覽器(Mozilla)
   		xmlHttp=new XMLHttpRequest();
   	}else if(window.ActiveXObject){//QQ瀏覽器(IE)
       	xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
   	}
   	var url="/Store?url="+url+"&title="+etitle+"&type="+type+"&img="+img;
	xmlHttp.open("post",url,true);
	if(nick==""){
		alert("請先登入!");
		window.open("login.jsp");
	}else{
    	xmlHttp.send();
		alert("收藏成功-"+title);
	}
}

第二步是編寫這個Servlet,對Ajax傳來的資料進行處理(比如存入資料庫)

response.setContentType("text/html");
request.setCharacterEncoding("utf-8");
String url=request.getParameter("url");//要收藏的視訊的連結
String title=request.getParameter("title");//要收藏的視訊名
title=URLDecoder.decode(title,"utf-8");
String type=request.getParameter("type");//要收藏的視訊的型別
String img=request.getParameter("img");//要收藏的視訊的圖片
Cookie[] cookies=request.getCookies();
String nick="";//收藏者
for(int i=0;cookies!=null&&i<cookies.length;i++){
	if(cookies[i].getName().equals("user")){
		nick=cookies[i].getValue().toString();
	    nick=URLDecoder.decode(nick, "utf-8");
	}
}
String time=SqlUtil.time();
String query="select * from store where s_User='"+nick+"' and s_Url='"+url+"'";
String insert="insert into store(s_User,s_Url,s_Vname,s_Path,s_Type,s_Time) "
				+ "values('"+nick+"','"+url+"','"+title+"','"+img+"','"+type+"','"+time+"')";
System.out.println(insert);
UtilDao.addStore(query, insert);

     以上程式碼尾部的一句是我在資料庫實現類中定義的一個方法,它結合兩個SQL語句執行的操作就是判斷資料庫中是否有該使用者收藏該視訊的記錄,若沒有,則執行插入操作,插入這條記錄,反之則不新增。

/**
 * 6.新增收藏,如果庫中已有該人對該視訊的收藏,則返回,反之新增
 * @param query
 * @param add
 */
public static void addStore(String query,String add){
	try {
		Class.forName(SqlUtil.driver);
		con=DriverManager.getConnection(SqlUtil.url,SqlUtil.user,SqlUtil.pass);
		st=con.createStatement();
		rs=st.executeQuery(query);
		if(rs.next()){//有該使用者對該影視的播放記錄,
			return;
		}else{//沒有該條播放記錄方新增
			st.execute(add);
		}
		rs.close();
		st.close();
		con.close();
	} catch (Exception e) {
		e.printStackTrace();
	}
}

寫到這裡,網站實現使用者收藏視訊的效果就達到了。

好了,今天的部落格就寫到這裡了,感謝大家的閱讀,文末附上我的視訊網站553影院,歡迎訪問。我在553影院等你。