<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#preWin {
background-color: #ff9 ;
width : 400px ;
height : 400px ;
font-size: 9pt ;
padding: 5px ;
position : absolute ;
visibility : hidden ;
top : 10px ;
left : 10px ;
border : 1px #cc0 solid ;
clip : auto ;
overflow : hidden ;
}
#preWin h1, #preWin h2{
font-size : 1.0em ;
}
</style>
<script type="text/javascript">
window.onload = initAll ;
var xhr = false ;
var xPos ;
var yPos ;
function initAll(){
document.getElementById("test01").onmouseover = test ;
}
function test(evt){
makePrev(evt) ;
return false ;
}
function makePrev(evt){
var url = evt ? evt.target : window.event.srcElement ;
var evt = evt ? evt : window.event ;
xPos = evt.clientX ;
yPos = evt.clientY ;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest() ;
}else{
if(window.ActiveXObject){
try{
xhr = new ActiveXObject("Microsoft.XMLHttpRequest") ;
}catch(e){}
}
}
if(xhr){
xhr.onreadystatechange = showContents ;
xhr.open("GET", url, true) ;
xhr.send(null) ;
}else{
document.getElementById("preWin").innerHTML = "sorry ! but your pc coundn't create a xhr object !" ;
}
}
function showContents(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var msg = xhr.responseText ;
}else{
var msg = "error status = " + xhr.status ;
}
var preWin = document.getElementById("preWin") ;
preWin.style.top=parseInt(yPos) + 2 + "px" ;
preWin.style.left=parseInt(xPos) + 2 + "px" ;
preWin.style.visibility = "visible" ;
preWin.innerHTML = msg ;
preWin.onmouseout = hidePreview ;
}
}
function hidePreview(){
document.getElementById("preWin").style.visibility = "hidden" ;
}
</script>
</head>
<body>
<center>
<a id="test01" href="xxx.html">ajax preWin</a>
<div id="preWin"></div>
</center>
</body>
</html>
xxx.html 文件為 :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>preview</h1><h2>A Gentle Introduction to JavaScript</h2>
fjdsla jdfljsldfjlas djflsajd fljsdlf jlsdjf lsajdlfj sladjf asdf<br>
fdlsajfl jasldfjlasjdflasjdlfjasldjflas jldlsa jlsdjflsdfkl<br>
asdjf lksjdlfjasodfuwjeugsj;gjslfdgjsfjdgoufgjs;ldsf<br>
sjdlfugfgsaodjfoasdjfoasjdofjasidf<p>
sadlrefjldasdjflasjdlfjasdf
asdggfdfgdfgfdgdfgdfgdfg
ferfgfg
sadgd
ferdfgfg gfedgdfgdfgfdg
sfdgfggeregrerg</p>
</body>
</html>
]]>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=initAll ;
var xhr = false ;
var url = "ajax02.xml" ;
function initAll(){
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest() ;
}else{
if(window.ActiveXObject){
try{
xhr = new ActiveXObject("Microsoft.XMLHttpRequest") ;
}catch(e){}
}
}
if(xhr){
xhr.onreadystatechange = showContents ;
xhr.open("GET", url, true) ;
xhr.send(null) ;
}else{
document.getElementById("updateArea").innerHTML = "sorry ! but your pc coundn't create a xhr object !" ;
}
setTimeout("initAll()", 500) ;
}
function showContents(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var tempDiv = document.createElement("div") ;
var imgDiv = document.getElementById("imgDiv") ;
tempDiv.innerHTML = xhr.responseText ;
var allLinks = tempDiv.getElementsByTagName("a") ;
//alert(allLinks.length) ;
for(i=0; i<allLinks.length; i++){
//imgDiv.appendChild(allLinks[i].cloneNode(true)) ;
//var br = document.createElement("br") ;
//imgDiv.appendChild(br) ;
}
var imgid = Math.floor(Math.random() * allLinks.length) ;
document.getElementById("imgDiv").innerHTML = allLinks[imgid].innerHTML ;
}else{
var outMsg = "there was a problem on your server : status = " + status ;
}
}
}
</script>
</head>
<body>
<center>
<div id="imgDiv"></div>
</center>
</body>
</html>
XML 文件為 :
<?xml version="1.0" encoding="UTF-8"?>
<author>
<entry>
<a href="jason1"><img width="100" height="100" border="0" src="images/1.jpg" /></a>
</entry>
<entry>
<a href="jason1"><img width="100" height="100" border="0" src="images/2.jpg" /></a>
</entry>
<entry>
<a href="jason1"><img width="100" height="100" border="0" src="images/3.jpg" /></a>
</entry>
<entry>
<a href="jason1"><img width="100" height="100" border="0" src="images/4.jpg" /></a>
</entry>
<entry>
<a href="jason1"><img width="100" height="100" border="0" src="images/5.jpg" /></a>
</entry>
</author>
]]>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function checkname(){
//alert("test") ;
document.getElementById("msg").innerHTML="<img src=\"images/fwf3.JPG\" />" ;
var url = "checklogin.jsp?username=" + document.forms[0].username.value ;
//alert(url) ;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest() ;
}else{
if(window.ActiveXObject){
try{
xhr = new ActiveXObject("Microsoft.XMLHttpRequest") ;
}catch(e){}
}
}
if(xhr){
xhr.onreadystatechange = showContents ;
xhr.open("GET", url, true) ;
xhr.send(null) ;
}else{
document.getElementById("msg").innerHTML = "sorry ! but your pc coundn't create a xhr object !" ;
}
}
function showContents(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//alert(xhr.responseXML.contentType) ;
//var outMsg = xhr.responseText ;
//if(xhr.responseXML && xhr.responseXML.contentType == "text/xml"){
var outMsg = xhr.responseXML.getElementsByTagName("msg")[0].childNodes[0].nodeValue ;
//}else{
//var outMsg = xhr.responseText ;
//}
//alert(outMsg) ;
if(outMsg == "validate"){
document.getElementById("msg").innerHTML = "<font color=green><strong>用戶名正確 </strong></font>" ;
}else{
document.getElementById("msg").innerHTML = "<font color=red><strong>用戶名不正確 </strong></font>" ;
}
}else{
var outMsg = "there was a problem on your server : status = " + status ;
}
}
}
</script>
</head>
<body>
<center>
<form action="checklogin.jsp">
username : <input type="text" name="username" onblur="checkname() ;" /><span><div id="msg"></div></span><br><br>
password : <input type="password" name="password" /><br><br>
<input type="submit" value="submit" />
</form>
</center>
</body>
</html>
checklogin.jsp
<%@ page import="java.sql.*" %>
<%
response.setContentType("text/xml") ;
response.setCharacterEncoding("GB18030") ;
response.setHeader("catch-control", "no-store") ;
response.setDateHeader("Expires", 0) ;
String username = request.getParameter("username") ;
Connection conn = null ;
String login = "" ;
try{
Class.forName("com.mysql.jdbc.Driver") ;
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/testuser?user=root&password=110110") ;
Statement stmt = conn.createStatement() ;
String sql = "select count(*) from ruser where username = '" + username + "'" ;
System.out.println(sql) ;
ResultSet rs = stmt.executeQuery(sql) ;
rs.next() ;
int count = rs.getInt(1) ;
if(count > 0){
login = "validate" ;
}else{
login="novalidate" ;
}
}catch(ClassNotFoundException ex){
ex.printStackTrace() ;
}catch(SQLException ex){
ex.printStackTrace() ;
}
//System.out.println(request.getParameter("username")) ;
response.getWriter().write("<msg>" + login + "</msg>") ;
%>
]]>