这是学习AJAX的第一篇文章.docx
《这是学习AJAX的第一篇文章.docx》由会员分享,可在线阅读,更多相关《这是学习AJAX的第一篇文章.docx(13页珍藏版)》请在冰点文库上搜索。
这是学习AJAX的第一篇文章
这是学习AJAX的第一篇文章,我把自己学习一些心得写出来,因为是从初学者的脚度出发,可能会写得比较详细,因为我就是一个初学者,也知道作为一个初学者,随随便便的拿一个例子就看看,是只知道要这样,但为什么要这样却不清楚,我这里就尽我自己的语言,让初学者和我一样,能够看了这篇文章之后,“哦,这里原来是这样的”。
我个人还是喜欢从实例出发,对我自己而言,看了过后如果没有实例巩固,效果就不会那么好,也就不会减除对这个东西的神秘感,其实,从我个人的脚度出发后,因为前面写了两篇关于使用innerHTML实现动态效果的文章,再学这个就做了一个很好的铺垫了。
因为这里面许多的时候都会使用innerHTML,不过,这个要注意,这个东东只支持微软的浏览器(我的FireFox不行,其它牌子支持与否我没有测试过,不过,在浏览器界中,好像只有微软的独树一家,乱来,呵呵),你可以看一下我先面的两篇文章:
利用innerHTML实现隐显效果-两种实现方法
通过改变innerHTML的内容,动态增加选择项
学习使用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
varhttpRequest;
//下面这个函数可以返回一个适合任何浏览器的httpRequest,步子如下:
//1.试着创建一个XMLHttpRequest()示例,该示例可适合于除了微软以外的所有浏览器
//2.增加错误判断,如果当前浏览器是微软的,那么就创建适用于微软的浏览器
//3.但微软的浏览器又有两个版本之分,不过据说微软已经在7.0中增加对XMLHttpRequest()的支持
//4.但这样也需要对原来的浏览器支持,否则你写出来的程序那些用老版本浏览器的用户就是看不到效果的。
functioncreateRequest()
{
try{
request=newXMLHttpRequest();
}catch(trymicrosoft)
{
try{
request=newActiveXObject("Msxml2.XMLHTTP");
}catch(othermicrosoft)
{
try{
request=newActiveXObject("Microsoft.XMLHTTP");
}
catch(failed)
{
request=false;
}
}
}
if(!
request)
{
alert("errHappend!
");
returnnull;
}
returnrequest;
}
//这个函数就是用户的动作所有触发的函数,如下面的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');
//否则服务器将会丢弃发送的数据。
functiongetBackInfo()
{
varusername=document.getElementById("username").value;
varurl='checkUser.jsp?
username='+username;
request.open("GET",url,"true");
//下面相当于是一个隐性的循环,在函数中规定只有都接收完毕数据后才做处理
//onreadystatechange有5个值:
//0:
未初始化
//1:
初始化
//2:
发送数据
//3:
接收数据中
//4:
数据接收完毕
//另外还要注意就是在注册回调函数onreadystatechange时,后面的函数不能够带参数
//如下disResult是一个函数,不能够带参。
reqeust.onreadystatechange=disResult;//隐性的循环
request.send(null);
}
functiondisResult()
{
//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('SomethingWronghasHappend!
');
}
}
}
第二个用于验证的JSP页面:
checkUser.jsp
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"http:
//www.w3.org/TR/html4/loose.dtd">
<%@pagecontentType="text/html;charset=GBK"%>
<%@pageimport="project1.DBMS_Conn"%>
checkUser<%
Stringusername=request.getParameter("username");
DBMS_Connconn=newDBMS_Conn();
if(conn.checkUser(username))
out.println("用户名已经存在!
");//这个信息就是发送到前台去显示的信息,即服务器返回的信息
else
out.println("可以继续!
");
%>
第三个数据库连接JAVA程序:
packageproject1;
importjava.sql.Connection;
importjava.sql.DriverManager;
importjava.sql.ResultSet;
importjava.sql.SQLException;
importjava.sql.Statement;
publicclassDBMS_Conn{
Connectionconn;
Statementst;
publicDBMS_Conn(){
conn_init();
}
voidconn_init(){
setConnection();
setStatement();
}
publicvoidsetConnection(){
try{
//Class.forName("org.gjt.mm.mysql.Driver").newInstance();
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
//db.mdb有一个名为user表,至少有一个名为username的字段
Stringstrurl=
"jdbc:
odbc:
driver={MicrosoftAccessDriver(*.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(Exceptione){
e.printStackTrace();
}
}
/**
*设置Statement
*/
publicvoidsetStatement(){
try{
st=
conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
}catch(SQLExceptione){
e.printStackTrace();
}
}
/**
*根据用户名确定用户是否存在
*/
publicbooleancheckUser(Stringusername){
Stringsql="select*fromuserwhereusername='"+username+"'";
ResultSetrs;
try{
rs=st.executeQuery(sql);
if(rs.next())
{
conn.close();
returntrue;
}
}catch(SQLExceptione){
e.printStackTrace();
}
try{
conn.close();
}catch(SQLExceptione){
e.printStackTrace();
}
returnfalse;
}
}
利用innerHTML实现隐显效果-两种实现方法
最近对JavaScript非常感兴趣,可能因为是它和JAVA差不多吧。
原来看到一些网页上的隐显效果,心理面真是佩服,心想自己能够做就爽了。
现在对innerHTML有一点的了解,做这个东西就相对简单了,下面就是我自己弄来玩的一个例子,我相信你看了过后,如果你原来也没有做过,那我保证你说“原来这么简单!
!
!
”:
这里要补充说明一点,就是不同的浏览器对Javascript的支持不同,我这里用了FireFox和微软的浏览器比较了一下,有些能够在微软的浏览器实现效果下,在FireFox下不一能够实现。
//这种方式是通过显示条件判定来决定innerHTML的显示内容
//这里显示的内容是原来不存在的。
这个方法只支持微软的浏览器
functiontClick(id)
{
varstr='';
if(id==1)
{
str='(2)><--';
str+='
';
str+='1、你好';
str+='
';
str+='2、欢迎光临';
}
else
{
str='(1)>-->';
}
window.testClick.innerHTML=str;
}
//这种方式通过条件确定,是否把已经存在的东西显示出来。
FireFox可以支持该方法,为了程序的移植性,最好选用这一种方式。
functionhello(obj,idStr)
{
vard=document.getElementById(idStr);
if(d.style.display=='none')
{
d.style.display='block';
obj.innerHTML='回去';
}
else
{
d.style.display='none';
obj.innerHTML='出来';
}
}
(1)>-->
|
出来 none> 你好
|
通过改变innerHTML的内容,动态增加选择项
我们遇到过这样的情况,有些邮箱中有让我增加附件的时候,想增加多少点击增加就可以了,可是却不知道怎么实习的,我看了一下,其实就是运用了一个innerHTML而已,下面我做了一个实例,这是个人的习惯,就是一给自己一个好的记忆存储,也方便需要查找资料的朋友,下面就是一个简单的例子:
根据JAVASCRIPT设置innerHTML
//这个函数是根据用户设置的数字去重新生成innerHTML
functionsetid()
{
str='
';
if(!
window.form1.upcount.value)
window.form1.upcount.value=1;
for(i=1;i<=window.form1.upcount.value;i++)
//str+='文件'+i+':
400>
';
str=getStrValue();
//alert(str);
window.upid.innerHTML=str+'
';
}
//增加一个
functionsetSetAddOne()
{
varstr;
varid=eval(window.form1.upcount.value);
id+=1;
window.form1.upcount.value=id;
str=window.upid.innerHTML;
str+=addOne(id);
window.upid.innerHTML=str;
}
//取得最终生成的innerHTML
functiongetStrValue()
{
varstr='';
if(!
window.form1.upcount.value)
window.form1.upcount.value=1;
//alert(window.form1.upcount.value);
for(i=1;i<=window.form1.upcount.value;i++)
{
str+=addOne(i);
//alert(str);
}
returnstr;
}
//返回增加一项的字符,参数是当前是每几个
functionaddOne(i)
{
varstr='请选择操作项:
中国人打死日本人中国人踢死日本人中国人玩死日本人
';
returnstr;
}
设置个数
请选择操作项:
中国人打死日本人中国人踢死日本人中国人玩死日本人
展开阅读全文
相关搜索
资源标签