ajax|页面
晕呼呼的看了2天AJAX初级教程,为将要做的论坛的注册页面加写技术进去...
AJAX实际上是在JAVASCRIPT向后台的SERVLET发送消息,然后从SERVLET的响应中获取消息。这里提供
一个简单的注册页面提醒用户注册名是否存在。
yemian.html:
<html>.....<script type="text/javascript">
var xmlHttp; //定义一个XMLHttpRequest对象,用来发送,提取消息(如想SERVLET后台程序发送)
function createXMLHttpRequest(){ //初始化
if(window.ActiveXObject){ //IE浏览器
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){ //Mozilla 浏览器
xmlHttp = new XMLHttpRequest();
}
}
function checkInfo(){ //HTML响应函数,一般HTML中输入什么东西发生变化调用次函数
createXMLHttpRequest(); //生成XMLHttpRequest对象
var date = document.getElementById("userName");
var url = "zhuceyemian?userName=" + escape(date.value);
//第一个参数为方法,第二个参数为服务器路径名/还有其他的参数,第3个为是否异步,一般来说AJAX是异步
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = handleStateChange; //徽调函数
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) { //判断对象
if(xmlHttp.status == 200) { //信息返回,处理信息。这里就可以即时验证输入是否为正确了
var mes = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
var val = xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
setMessage(mes, val);
}
}
}
function setMessage(message, isValid){
var messageArea = document.getElementById("nameMessage");
var fontColor = "red";
if(isValid == "true"){
fontColor = "green";
}
messageArea.innerHTML = "<font color=" +fontColor + ">" + message + "</font>";
}
</script></head>
<!-- 将chenckInfo()赋予onchange就是说当文本域里面发生变化时,就会调用上面那些函数,向SERVLET发
送消息,在后台SERVLET接受到消息后会查询数据库,已验证当前输入用户名是否已被注册,在<div>区域里
AJAX会填加提示信息->
用户名:<input id="userName" type="text" maxlength="10" />
<div id="nameMessage"></div>
.... </html>
在SERVLET里面的代码如下:zhuceyemian.java
import java.io.*;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import javax.servlet.*;
import javax.servlet.http.*;
import java.sql.*;
/* zhuceyemian.java
* 后台servlet程序,用来检测注册用户名字是否已被注册,提醒用户
*/
public class zhuceyemian extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
boolean passed = validateName(request.getParameter("userName"));
response.setContentType("text/xml");
response.setCharacterEncoding("gb2312");
response.setHeader("Cache-Control", "no-cache");
String message = "this name is unavilable.";
if (passed) {
message = "this name is avilable.";
}
out.println("<response>");
out.println("<passed>" + Boolean.toString(passed) + "</passed>");
out.println("<message>" + message + "</message>");
out.println("</response>");
out.close();
}
/**
* 从数据库中查找是否用户名已被注册
*/
private boolean validateName(String name) {
boolean isValid = true;
try {
String driver = "com.mysql.jdbc.Driver";
Class.forName( driver ); //装载驱动
String url = "jdbc:mysql://localhost/test";
Connection conn = DriverManager.getConnection( url, "", "" ); //连接数据库
Statement stmt = conn.createStatement();
stmt.executeQuery("use test");
ResultSet rs = stmt.executeQuery("SELECT name FROM useinfo where name=\"" + name + "\"");
if(rs.next())
{
isValid = false;
}
rs.close();
stmt.close();
conn.close();
}
catch( Exception x ) {
x.printStackTrace();
}
return isValid;
}
}
在AJAX向SERVLET发送请求的第2个参数url在这里是 zhuceyemian?userName=....这里zhuceyemian是服务器
名字,在XML里面要降服务器名和CLASS所在路径要影射
<servlet>
<servlet-name>zhuceyemian</servlet-name>
<servlet-class>zhuceyemian</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>zhuceyemian</servlet-name>
<url-pattern>/zhuceyemian</url-pattern>
</servlet-mapping>
最后...也是最恶心的地方,让我郁闷了2天,就是在SERVLET里面连接数据库的时候开始他说找不到驱动....郁闷
了,我用APPLICATION都能连接数据库,最后终于发现在SERVLET下必须把一个mysql-connector-java-3.1.10-bin.jar的包打在WEB-INF/LIB下面,直接从BUILD下引入死活就说找不到。