学习使用ajax之前,有几样的东西是必须的:
1、html
2、dhtml,就是动态html,这里可能会常用到document.getelementbyid([id])方法,或者是使用window.id.value=[value]等等,如果不熟悉,不及,看看下面的例子,如果还不能够理解,再把网上搜搜,这方面的解释多得不能够再多了。
3、javascript。这个就是非常的重要的,因为好多东西都需要通过这个去操作。
4、dom。这个不是必须的,就算我们不知道这个东西,照样可以用javascrit做很多的东西了。
5、数据库操作及sql知识。现在应用程序好多都是与数据库打交道,常见的用户名信息等等,都是放在数据库中的。
下面进行正题吧,这个实例非常的简单,采用jsp实现用户输入的用户是否存在于数据库中,并且给以相应的提示,所谓“麻雀虽小,五脏俱全”,其它的发挥就是在这个方向上发挥开发。
总共有三个文件,有两个jsp面,一个用于前台显示,一个用于确定用户是否存在;另外一个java页面,用于做数据库连接。
注:请注意其中注释,那是非常的有助于你理解
前台显示:index.jsp
<html>
<head>
<title></title>
<script language="javascript" >
var httprequest;
/**
下面这个函数可以返回一个适合任何浏览器的httprequest,步子如下:
1.试着创建一个xmlhttprequest()示例,该示例可适合于除了微软以外的所有浏览器
2.增加错误判断,如果当前浏览器是微软的,那么就创建适用于微软的浏览器
3.但微软的浏览器又有两个版本之分,不过据说微软已经在7.0中增加对xmlhttprequest()的支持
4.但这样也需要对原来的浏览器支持,否则你写出来的程序那些用老版本浏览器的用户就是看不
到效果的。
*/
function createrequest()
{
try{
request=new xmlhttprequest();
}catch(trymicrosoft)
{
try{
request=new activexobject("msxml2.xmlhttp");
}catch(othermicrosoft)
{
try{
request=new activexobject("microsoft.xmlhttp");
}
catch(failed)
{
request=false;
}
}
}
if(!request)
{
alert("err happend!");
return null;
}
return request;
}
/**
这个函数就是用户的动作所有触发的函数,如下面的onblur()时,就会调用该函数
经过的步骤如下:
1.从html页面得到你需要的数据,可以采有document.getelementbyid("")方法。
2.建立需要的url,该url就和在form里面的method为get时并采用submit提交在地址栏
里面到的一样
3.打开与服务器的连接,这里面有三个必要的参数,虽然文档规定只有两个,但是我个
人觉得最好用三个,
第一个可以是get,post或者是post,但常用的就是前面的两个,并且最好都用大写,因
为有些浏览器如firefox可能会报错,
第二个就是打报的url,这肯定你是必须的。
第三个就是下面的看到的true,这里可以是false。true表示同步处理,你提交后可以做
其它的事情,这就是ajax里面的a,即asynchronous;如是false,那就得等到服务器的返
回才能够做其它的事情。
4.等到服务器完成,并且确定返回执行了正确执行的提示,我们就可以做下面我们想做的
事情。这些后面的事情就必须通过javascript去完成了,因为xmlhttprequest的唯一用途
就是发送请求及接收服务器的响应结果。
5.上面都完成了后,就可以采用send()方法向服务器发送你需要发送的信息了,它的参数
可以是任何类型,发送的数据格式必须为这样的格式:
name=value&anothername=othervalue&so=on,如果你想传送数据,你必须更改mime类型:
httprequest.setrequestheader('content-type','application/x-www-form-urnlencoded');
否则服务器将会丢弃发送的数据。
*/
function getbackinfo()
{
var username=document.getelementbyid("username").value;
var url='checkuser.jsp?username='+username;
request.open("get",url,"true");
//下面相当于是一个隐性的循环,在函数中规定只有都接收完毕数据后才做处理
//onreadystatechange有5个值:
// 0:未初始化
// 1:初始化
// 2:发送数据
// 3:接收数据中
// 4:数据接收完毕
//另外还要注意就是在注册回调函数onreadystatechange时,后面的函数不能够带参数
//如下disresult是一个函数,不能够带参。
reqeust.onreadystatechange=disresult;//隐性的循环
request.send(null);
}
function disresult()
{
/**
1.一定要确定readystate==4的完成状态才做下面的事,否则会在建立连接即readystate==1的
时候就开始,然后会在readystate==2,readystate==3,readystate==4的时候都会执行,不信
你可以alert("")一个提示信息试试。
2.服务器通知完成了,并且还要保证是正确完成的,得到的是我们需要的结果才能够继续,这里
常用响应码有:
200:成功执行
401:未授权
403:禁止
404:没有找到文件
*/
if(request.readystate==4)
{
if(request.status==200)
{
//一切都ok了,那就该用javascript去执行你想要的动作了。
document.getelementbyid("discheckresult").value=request.responsetext;
alert('done');
}
else
{
alert('something wrong has happend!');
}
}
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td>
<input type=text id="username" onblur="getbackinfo();">
</td>
<td>
<dd id="discheckresult">这里用于在执行后显示结果的地方</dd>
</td>
</tr>
</table>
</form>
</body>
</html>
|
用于验证的jsp页面:checkuser.jsp
<!doctype html public "-//w3c//dtd html 4.01 transitional//en"
"http://www.w3.org/tr/html4/loose.dtd">
<%@ page contenttype="text/html;charset=gbk"%>
<%@ page import="project1.dbms_conn"%>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk"/>
<title>checkuser</title>
</head>
<body>
<%
string username=request.getparameter("username");
dbms_conn conn=new dbms_conn();
if(conn.checkuser(username))
out.println("用户名已经存在!");
//这个信息就是发送到前台去显示的信息,即服务器返回的信息
else
out.println("可以继续!");
%>
</body>
</html>
|
数据库连接java程序:
package project1;
import java.sql.connection;
import java.sql.drivermanager;
import java.sql.resultset;
import java.sql.sqlexception;
import java.sql.statement;
public class dbms_conn {
connection conn;
statement st;
public dbms_conn() {
conn_init();
}
void conn_init() {
setconnection();
setstatement();
}
public void setconnection() {
try {
//class.forname("org.gjt.mm.mysql.driver").newinstance();
class.forname("sun.jdbc.odbc.jdbcodbcdriver");
//db.mdb有一个名为user表,至少有一个名为username的字段
string strurl =
"jdbc:odbc:driver={microsoft access driver (*.mdb)};dbq=e:\\db.mdb";
//conn=drivermanager.getconnection("jdbc:mysql://localhost/palfinger?
//user=root&password=admin&useunicode=true&characterencoding=8859_1");
conn = drivermanager.getconnection(strurl);
} catch (exception e) {
e.printstacktrace();
}
}
/**
* 设置statement
*/
public void setstatement() {
try {
st = conn.createstatement(
resultset.type_scroll_insensitive, resultset.concur_read_only);
} catch (sqlexception e) {
e.printstacktrace();
}
}
/**
* 根据用户名确定用户是否存在
*/
public boolean checkuser(string username) {
string sql="select * from user where username='"+username+"'";
resultset rs;
try {
rs = st.executequery(sql);
if(rs.next())
{
conn.close();
return true;
}
} catch (sqlexception e) {
e.printstacktrace();
}
try {
conn.close();
} catch (sqlexception e) {
e.printstacktrace();
}
return false;
}
}
|