这是学习AJAX的第一篇文章.docx

1、这是学习AJAX的第一篇文章这是学习AJAX的第一篇文章，我把自己学习一些心得写出来，因为是从初学者的脚度出发，可能会写得比较详细，因为我就是一个初学者，也知道作为一个初学者，随随便便的拿一个例子就看看，是只知道要这样，但为什么要这样却不清楚，我这里就尽我自己的语言，让初学者和我一样，能够看了这篇文章之后，“哦，这里原来是这样的”。我个人还是喜欢从实例出发，对我自己而言，看了过后如果没有实例巩固，效果就不会那么好，也就不会减除对这个东西的神秘感，其实，从我个人的脚度出发后，因为前面写了两篇关于使用innerHTML实现动态效果的文章，再学这个就做了一个很好的铺垫了。因为这里面许多的时候都会使用

2、innerHTML，不过，这个要注意，这个东东只支持微软的浏览器（我的FireFox不行，其它牌子支持与否我没有测试过，不过，在浏览器界中，好像只有微软的独树一家，乱来，呵呵），你可以看一下我先面的两篇文章： 利用innerHTML实现隐显效果-两种实现方法 通过改变innerHTML的内容，动态增加选择项 学习使用AJAX之前，有几样的东西是必须的： 1、HTML 2、DHTML，就是动态HTML，这里可能会常用到document.getElementById(id)方法，或者是使用window.id.value=value等等，如果不熟悉，不及，看看下面的例子，如果还不能够理解，再把网上搜

3、搜，这方面的解释多得不能够再多了。 3、Javascript。这个就是非常的重要的，因为好多东西都需要通过这个去操作。 4、DOM。这个不是必须的，就算我们不知道这个东西，照样可以用JAVASCRIT做很多的东西了。 5、数据库操作及SQL知识。现在应用程序好多都是与数据库打交道，常见的用户名信息等等，都是放在数据库中的。 下面进行正题吧，这个实例非常的简单，采用JSP实现用户输入的用户是否存在于数据库中，并且给以相应的提示，所谓“麻雀虽小，五脏俱全”，其它的发挥就是在这个方向上发挥开发。 总共有三个文件，有两个JSP面，一个用于前台显示，一个用于确定用户是否存在;另外一个JAVA页面，用于做

4、数据库连接。 注：请注意其中注释，那是非常的有助于你理解 第一个前台显示：index.jspvar httpRequest;/下面这个函数可以返回一个适合任何浏览器的httpRequest，步子如下：/1.试着创建一个XMLHttpRequest()示例，该示例可适合于除了微软以外的所有浏览器/2.增加错误判断，如果当前浏览器是微软的，那么就创建适用于微软的浏览器/3.但微软的浏览器又有两个版本之分，不过据说微软已经在7.0中增加对XMLHttpRequest()的支持/4.但这样也需要对原来的浏览器支持，否则你写出来的程序那些用老版本浏览器的用户就是看不到效果的。function creat

5、eRequest() 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;/这个函数就是用户的动作所有触发的函数，如下面的o

6、nblur()时，就会调用该函数/经过的步骤如下：/1.从HTML页面得到你需要的数据，可以采有document.getElementById()方法。/2.建立需要的URL，该URL就和在FORM里面的method为get时并采用submit提交在地址栏里面到的一样/3.打开与服务器的连接，这里面有三个必要的参数，虽然文档规定只有两个，但是我个人觉得最好用三个，/ 第一个可以是GET,POST或者是POST，但常用的就是前面的两个，并且最好都用大写，因为有些浏览器如FireFox可能会报错，/ 第二个就是打报的URL，这肯定你是必须的。/ 第三个就是下面的看到的true，这里可以是false

7、。true表示同步处理，你提交后可以做其它的事情，/ 这就是AJAX里面的A，即asynchronous;如是false，那就得等到服务器的返回才能够做其它的事情。/4.等到服务器完成，并且确定返回执行了正确执行的提示，我们就可以做下面我们想做的事情。这些后面的事情就必须通过/ Javascript去完成了，因为XMLHttpRequest的唯一用途就是发送请求及接收服务器的响应结果。/5.上面都完成了后，就可以采用send()方法向服务器发送你需要发送的信息了，它的参数可以是任何类型，发送的数据格式必须为/ 这样的格式：name=value&anothername=othervalue&so

8、=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); /下面相当于是一个隐性的循环，在函数中规定只有都接收完毕数据后

9、才做处理 /onreadystatechange有5个值： / 0:未初始化 / 1:初始化 / 2:发送数据 / 3:接收数据中 / 4:数据接收完毕 /另外还要注意就是在注册回调函数onreadystatechange时，后面的函数不能够带参数 /如下disResult是一个函数，不能够带参。 reqeust.onreadystatechange=disResult;/隐性的循环 request.send(null);function disResult() /1.一定要确定readystate=4的完成状态才做下面的事，否则会在建立连接即readystate=1的时候就开始， / 然后会

10、在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=reque

11、st.responseText; alert(done); else alert(Something Wrong has Happend!); 这里用于在执行后显示结果的地方 第二个用于验证的JSP页面：checkUser.jsp checkUser 第三个数据库连接JAVA程序：package project1;import java.sql.Connection;import java.sql.DriverManager;import java.sql.ResultSet;import java.sql.SQLException;import java.sql.Statement;publ

12、ic 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的字段

13、 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()

14、; /* * 设置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=+use

15、rname+; 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; 利用innerHTML实现隐显效果-两种实现方法最近对JavaScript非常感兴趣，可能因为是它和JAVA差不多吧。原来看到一些网页上的隐显效果，心理面真是佩服，心想自己能

16、够做就爽了。现在对innerHTML有一点的了解，做这个东西就相对简单了，下面就是我自己弄来玩的一个例子，我相信你看了过后，如果你原来也没有做过，那我保证你说“原来这么简单！”： 这里要补充说明一点，就是不同的浏览器对Javascript的支持不同，我这里用了FireFox和微软的浏览器比较了一下，有些能够在微软的浏览器实现效果下，在FireFox下不一能够实现。/这种方式是通过显示条件判定来决定innerHTML的显示内容/这里显示的内容是原来不存在的。这个方法只支持微软的浏览器function tClick(id) var str=; if(id=1) str=-; str+= 

17、      str+=1、你好; str+=       str+=2、欢迎光临; else str=-; window.testClick.innerHTML=str;/这种方式通过条件确定，是否把已经存在的东西显示出来。FireFox可以支持该方法，为了程序的移植性，最好选用这一种方式。function hello(obj,idStr) var d=document.getElementById(idStr); if(d.style.display=none) d.style.di

18、splay=block; obj.innerHTML=回去; else d.style.display=none; obj.innerHTML=出来; - 出来 你好 通过改变innerHTML的内容，动态增加选择项我们遇到过这样的情况，有些邮箱中有让我增加附件的时候，想增加多少点击增加就可以了，可是却不知道怎么实习的，我看了一下，其实就是运用了一个innerHTML而已，下面我做了一个实例，这是个人的习惯，就是一给自己一个好的记忆存储，也方便需要查找资料的朋友，下面就是一个简单的例子：根据JAVASCRIPT设置innerHTML/这个函数是根据用户设置的数字去重新生成innerHTMLfu

19、nction setid() str=; if(!window.form1.upcount.value) window.form1.upcount.value=1; for(i=1;i=window.form1.upcount.value;i+) /str+=文件+i+:; str=getStrValue(); /alert(str); window.upid.innerHTML=str+;/增加一个function setSetAddOne() var str; var id=eval(window.form1.upcount.value); id+=1; window.form1.upco

20、unt.value=id; str=window.upid.innerHTML; str+=addOne(id); window.upid.innerHTML=str;/取得最终生成的innerHTMLfunction getStrValue() var str=; 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); return str;/返回增加一项的字符，参数是当前是每几个function addOne(i) var str=请选择操作项：中国人打死日本人中国人踢死日本人中国人玩死日本人; return str; 设置个数 请选择操作项：中国人打死日本人中国人踢死日本人中国人玩死日本人/o