我要实现的目的是:做一个播放视频的页面，左边是播放列表，右边是播放器，左边播放列表分页，当点击下一页等时，不刷新页面。
我实现的方法是：制作一个playlist页面，用来查询数据库，获取播放地址，名称等值，一个play页面，用于播放视频，显示播放列表。
当打开play页面时，使用xmlhttp.open向playlist传递参数，然后playlist输出一个xml，在play页面利用javascript或者xml的内容，生成播放列表的超级链接。
我目前的问题是：
1.点超级链接，不能播放，（我用href等于一个javascript函数，用该函数改变播放器的地址value）
2.不能实现异步，我是用javascript生成的列表，等换页的时候为什么不能异步么？是不是因为我查询数据库的时候，只是查询当前页的数据，不是一下查询所有的，放在javascript里，所以造成不能异步呢？
我的代码如下：
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page language="java" %>
<%@ page import="com.mysql.jdbc.Driver" %>
<%@ page import="java.sql.*" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.math.BigDecimal"%>
<%@ page import="java.text.DecimalFormat" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<% String collectionid;
String strPage="";
int intPage;
collectionid=request.getParameter("collectionid");
//out.println(collectionid);
strPage=request.getParameter("page");//取得待显示的页码
if(strPage==null){
//表明在QueryString中没有page这一个参数，此时显示第一页数据
intPage = 1;
} else {
//将字符串转换成整型
intPage = java.lang.Integer.parseInt(strPage);
if(intPage<0) intPage = 1;
}
//out.println(intPage);
%>
var pagenum=1; function alterplayer(collectionid,url,format){ alert("111"); var player =document.getElementById("player"); //alert(player); player.setAttribute("value","http://localhost:8080/jsx/video/"+collectionid+"/"+url+"."+format+""); } function go(){ pagenum=pagenum+1; document.getElementById("sidebar").innerHTML=""; validate(); } function gg(){ if(pagenum==1) pagenum=1; else pagenum=pagenum-1; validate(); } var xmlHttp; var id; function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); } } function validate(){ createXMLHttpRequest(); var url="/jsx/word/playlist1.jsp?page="+pagenum+"&collectionid=<%=collectionid%>"; //alert(url); xmlHttp.open("POST",url,true); //var player =document.getElementById("player"); //alert(player.value); xmlHttp.onreadystatechange=callback; xmlHttp.send(null); } function callback(){ if(xmlHttp.readyState==4){ show(); } } function show(){ var xmlDoc=xmlHttp.responseXML; var xmlDoc1=xmlHttp.responseText; var a=""; // alert(xmlHttp.responseText); // alert(xmlHttp.responseXML.xml); var collection=xmlDoc.getElementsByTagName("collection"); var url=xmlDoc.getElementsByTagName("url"); var format=xmlDoc.getElementsByTagName("format"); var sn=xmlDoc.getElementsByTagName("sn") // alert(url.length); //document.write(url.length); //document.write(collection[0].childNodes[0].nodeValue); //document.write(url[0].childNodes[0].nodeValue); //document.write(format[0].childNodes[0].nodeValue); for(var i=0;i<url.length;i++) { a+="<a href='javascript:alterplayer("+collection[i].childNodes[0].nodeValue+","+url[i].childNodes[0].nodeValue+","+format[i].childNodes[0].nodeValue+")'>"+sn[i].childNodes[0].nodeValue+"</a><br><br>"; //document.getElementById("sidebar").innerHTML="<a href='/jsx/word/play1.jsp?name=new&number=lession1';>第"+i+"课</a>"; } //alert(a); document.getElementById("sidebar").innerHTML=a;} body { font-family:Verdana; font-size:14px; margin:0;} #container {margin:0 auto; width:100%;} #header { height:100px; background:#9c6; margin-bottom:5px;} #menu { height:30px; background:#693; margin-bottom:5px;} #mainContent { height:500px; margin-bottom:5px;} #sidebar { float:left; width:200px; height:400px; background:#cf9;} #fenye { top:500px; left:0px; width:200px; height:100px; background:#cc9;} #content { margin-left:205px !important; margin-left:202px; height:500px; background:#ffa;}/*当content设定高度后，3像素会跑到content外侧，这样，我们用!important修正在ie下向左多浮动2像素，加上3像素的bug正好是5像素，所以在火狐和IE下显示是一样的*/ #footer { height:60px; background:#9c6;}
