想知道CSDN的评论一提交上去就显示出来的AJAX是怎么实现的吗
2007-09-04 23:59
656 查看
function StorePage(){d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://www.365key.com/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'keyit','scrollbars=no,width=475,height=575,left=75,top=20,status=no,resizable=yes'));keyit.focus();}
想知道CSDN的评论一提交上去就显示出来的AJAX是怎么实现的吗！！
在没有学AJAX之前，很多简单的AJAX效果在我看来都是非常的神秘，在写了这篇文章： Ajax的JSP示例以及相关知识介绍，适合于入门者 之后，很多的神秘感一下就消失，加上自己的程序经验，很多的东西，联想一下就可以做出其它你想要的效果，下面我举个类似于CSDN的评论效果的实例，其实就是在 Ajax的JSP示例以及相关知识介绍，适合于入门者 这篇文章的基础之加略略加工就可以了，如果你是刚刚进入这个门，我建意你还是先这篇文章 Ajax的JSP示例以及相关知识介绍，适合于入门者 然后再来看这个，因为那里面讲的最简单的AJAX实现，这个可能相对要复杂点。
OK，言归正传。这个实例的目的就是把数据库里面的用户全部显示出来，如果现在注册用户，在不刷新页面的情况下，把新增入的用户也全部显示出来。就和CSDN的评论一样：把原来的评论全部显示出来，并且把新评论在不刷新页面的情况下全部显示出来。
在这里面我会把与前面一个例子不同的地方用绿色的字体标识出来，这让看了我前面一篇文章的朋友，可以一下就知道这篇文章需要弄一些什么：
addUsers.jsp：处理用户的增加，并返回结果到提交页面
checkUser.jsp：确定用户名是事存在
register.jsp：用户注册首页
DBMS_Conn.java：处理数据库连接及用户检测、用户插入的Bean
addUsers.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>addUsers</title>
</head>
<body>
<%
String username=request.getParameter("username");
DBMS_Conn conn=new DBMS_Conn();
if(conn.addUser(username))
out.println(username);
%>
</body>
</html>
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("cz|用户名已经存在！");
else
out.println("bcz|用户名不存在，可以继续！");
%>
</body>
</html>
register.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>register</title>
<script language="javascript" type="text/javascript">
var httpRequest;
//下面这个函数可以返回一个适合任何浏览器的httpRequest，步子如下：
//1.试着创建一个XMLHttpRequest()示例，该示例可适合于除了微软以外的所有浏览器
//2.增加错误判断，如果当前浏览器是微软的，那么就创建适用于微软的浏览器
//3.但微软的浏览器又有两个版本之分，不过据说微软已经在7.0中增加对XMLHttpRequest()的支持
//4.但这样也需要对原来的浏览器支持，否则你写出来的程序那些用老版本浏览器的用户就是看不到效果的。
function createRequest()
{
var request;
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)
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;
if(username=="")
return;
var url='checkUser.jsp?username='+username;
httpRequest=createRequest();
//onreadystatechange有5个值：
// 0:未初始化
// 1:初始化
// 2:发送数据
// 3:接收数据中
// 4:数据接收完毕
//另外还要注意就是在注册回调函数onreadystatechange时，后面的函数不能够带参数
//如下disResult是一个函数，不能够带参，但可以写成disResult
//下面相当于是一个隐性的循环，在函数中规定只有都接收完毕数据后才做处理
httpRequest.open("GET",url,"true");
httpRequest.onreadystatechange=disResult;//隐性的循环
httpRequest.send(null);
}
function disResult()
{
//1.一定要确定readystate==4的完成状态才做下面的事，否则会在建立连接即readystate==1的时候就开始，
// 然后会在readystate==2，readystate==3，readystate==4的时候都会执行，不信你可以alert("")一个
// 提示信息试试。
//2.服务器通知完成了，并且还要保证是正确完成的，得到的是我们需要的结果才能够继续，这里常用响应码有：
// 200:成功执行
// 401:未授权
// 403:禁止
// 404:没有找到文件
if(httpRequest.readystate==4)
{
if(httpRequest.status==200)
{
var response=httpRequest.responseText.split("|");
//这里只能够用indexOf方法，因为返还有一大堆HTML代码
//我被这个问题折磨了好几十分钟
if(response[0].indexOf("bcz")>0)
{
document.getElementById("addButton").disabled=false;
}
else if(response[0].indexOf("cz")>0)
{
document.getElementById("addButton").disabled=true;
}
document.getElementById("disCheckResult").innerHTML=response[1];
//alert('done');
}
else
{
alert('Something Wrong has Happend!');
}
}
}
function addUsers()
{
var username=document.getElementById("username").value;
if(username=="")
return;
var url='addUsers.jsp?username='+username;
httpRequest.open('GET',url,true);
httpRequest.onreadystatechange=addUser;
httpRequest.send(null);
}
function addUser()
{
if(httpRequest.readystate==4)
{
if(httpRequest.status==200)
{
//一切都OK了，那就该用Javascript去执行你想要的动作了。
document.getElementById("disAllUsers").innerHTML+="<br>"+httpRequest.responseText;
document.getElementById("username").value="";
document.getElementById("addButton").disabled=true;
document.getElementById("disCheckResult").innerHTML='这里用于显示检测用户是否存在的返结果';
//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>
<tr>
<td>
<input type=button id=addButton value="增加用户" onclick="addUsers();" disabled="true">
</td>
</tr>
<tr>
<%
DBMS_Conn con=new DBMS_Conn();
String allUsersByStr=con.allUsersByStr();
%>
<td>当前注册的用户如下：
<dd id="disAllUsers">
<%=allUsersByStr%>
</dd>
</td>
</tr>
</table>
</form>
</body>
</html>
DBMS_Conn.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");
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;
}
public boolean addUser(String username) {
String sql="insert into user(username) values(='"+username+"')";
try {
st.execute(sql);
conn.close();
return true;
} catch (SQLException e) {
try {
conn.close();
} catch (SQLException f) {
f.printStackTrace();
}
return false;
}
}
public String allUsersByStr() {
String sql="select username from user";
ResultSet rs;
StringBuffer str=new StringBuffer("");
try {
rs = st.executeQuery(sql);
while(rs.next()) {
str.append(rs.getString(1)+"<br>");
}
} catch (SQLException e) {
e.printStackTrace();
}
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
return String.valueOf(str);
}
}
想知道CSDN的评论一提交上去就显示出来的AJAX是怎么实现的吗！！
在没有学AJAX之前，很多简单的AJAX效果在我看来都是非常的神秘，在写了这篇文章： Ajax的JSP示例以及相关知识介绍，适合于入门者 之后，很多的神秘感一下就消失，加上自己的程序经验，很多的东西，联想一下就可以做出其它你想要的效果，下面我举个类似于CSDN的评论效果的实例，其实就是在 Ajax的JSP示例以及相关知识介绍，适合于入门者 这篇文章的基础之加略略加工就可以了，如果你是刚刚进入这个门，我建意你还是先这篇文章 Ajax的JSP示例以及相关知识介绍，适合于入门者 然后再来看这个，因为那里面讲的最简单的AJAX实现，这个可能相对要复杂点。
OK，言归正传。这个实例的目的就是把数据库里面的用户全部显示出来，如果现在注册用户，在不刷新页面的情况下，把新增入的用户也全部显示出来。就和CSDN的评论一样：把原来的评论全部显示出来，并且把新评论在不刷新页面的情况下全部显示出来。
在这里面我会把与前面一个例子不同的地方用绿色的字体标识出来，这让看了我前面一篇文章的朋友，可以一下就知道这篇文章需要弄一些什么：
addUsers.jsp：处理用户的增加，并返回结果到提交页面
checkUser.jsp：确定用户名是事存在
register.jsp：用户注册首页
DBMS_Conn.java：处理数据库连接及用户检测、用户插入的Bean
addUsers.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>addUsers</title>
</head>
<body>
<%
String username=request.getParameter("username");
DBMS_Conn conn=new DBMS_Conn();
if(conn.addUser(username))
out.println(username);
%>
</body>
</html>
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("cz|用户名已经存在！");
else
out.println("bcz|用户名不存在，可以继续！");
%>
</body>
</html>
register.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>register</title>
<script language="javascript" type="text/javascript">
var httpRequest;
//下面这个函数可以返回一个适合任何浏览器的httpRequest，步子如下：
//1.试着创建一个XMLHttpRequest()示例，该示例可适合于除了微软以外的所有浏览器
//2.增加错误判断，如果当前浏览器是微软的，那么就创建适用于微软的浏览器
//3.但微软的浏览器又有两个版本之分，不过据说微软已经在7.0中增加对XMLHttpRequest()的支持
//4.但这样也需要对原来的浏览器支持，否则你写出来的程序那些用老版本浏览器的用户就是看不到效果的。
function createRequest()
{
var request;
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)
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;
if(username=="")
return;
var url='checkUser.jsp?username='+username;
httpRequest=createRequest();
//onreadystatechange有5个值：
// 0:未初始化
// 1:初始化
// 2:发送数据
// 3:接收数据中
// 4:数据接收完毕
//另外还要注意就是在注册回调函数onreadystatechange时，后面的函数不能够带参数
//如下disResult是一个函数，不能够带参，但可以写成disResult
//下面相当于是一个隐性的循环，在函数中规定只有都接收完毕数据后才做处理
httpRequest.open("GET",url,"true");
httpRequest.onreadystatechange=disResult;//隐性的循环
httpRequest.send(null);
}
function disResult()
{
//1.一定要确定readystate==4的完成状态才做下面的事，否则会在建立连接即readystate==1的时候就开始，
// 然后会在readystate==2，readystate==3，readystate==4的时候都会执行，不信你可以alert("")一个
// 提示信息试试。
//2.服务器通知完成了，并且还要保证是正确完成的，得到的是我们需要的结果才能够继续，这里常用响应码有：
// 200:成功执行
// 401:未授权
// 403:禁止
// 404:没有找到文件
if(httpRequest.readystate==4)
{
if(httpRequest.status==200)
{
var response=httpRequest.responseText.split("|");
//这里只能够用indexOf方法，因为返还有一大堆HTML代码
//我被这个问题折磨了好几十分钟
if(response[0].indexOf("bcz")>0)
{
document.getElementById("addButton").disabled=false;
}
else if(response[0].indexOf("cz")>0)
{
document.getElementById("addButton").disabled=true;
}
document.getElementById("disCheckResult").innerHTML=response[1];
//alert('done');
}
else
{
alert('Something Wrong has Happend!');
}
}
}
function addUsers()
{
var username=document.getElementById("username").value;
if(username=="")
return;
var url='addUsers.jsp?username='+username;
httpRequest.open('GET',url,true);
httpRequest.onreadystatechange=addUser;
httpRequest.send(null);
}
function addUser()
{
if(httpRequest.readystate==4)
{
if(httpRequest.status==200)
{
//一切都OK了，那就该用Javascript去执行你想要的动作了。
document.getElementById("disAllUsers").innerHTML+="<br>"+httpRequest.responseText;
document.getElementById("username").value="";
document.getElementById("addButton").disabled=true;
document.getElementById("disCheckResult").innerHTML='这里用于显示检测用户是否存在的返结果';
//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>
<tr>
<td>
<input type=button id=addButton value="增加用户" onclick="addUsers();" disabled="true">
</td>
</tr>
<tr>
<%
DBMS_Conn con=new DBMS_Conn();
String allUsersByStr=con.allUsersByStr();
%>
<td>当前注册的用户如下：
<dd id="disAllUsers">
<%=allUsersByStr%>
</dd>
</td>
</tr>
</table>
</form>
</body>
</html>
DBMS_Conn.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");
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;
}
public boolean addUser(String username) {
String sql="insert into user(username) values(='"+username+"')";
try {
st.execute(sql);
conn.close();
return true;
} catch (SQLException e) {
try {
conn.close();
} catch (SQLException f) {
f.printStackTrace();
}
return false;
}
}
public String allUsersByStr() {
String sql="select username from user";
ResultSet rs;
StringBuffer str=new StringBuffer("");
try {
rs = st.executeQuery(sql);
while(rs.next()) {
str.append(rs.getString(1)+"<br>");
}
} catch (SQLException e) {
e.printStackTrace();
}
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
return String.valueOf(str);
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 想知道CSDN的评论一提交上去就显示出来的AJAX是怎么实现的吗！！
- 想知道CSDN的评论一提交上去就显示出来的AJAX是怎么实现的吗！！
- asp.net怎么用ajax读取txt到textbox中显示出来
- 用jquery实现隐藏列表表单的显示关闭切换以及Ajax方式改动提交相应的那一行的改动内容。
- 黄聪：Jquery+php+ajax实现表单异步提交，动态添加回复评论
- csdn中发表代码文章时怎么可以像vs工具的样式显示出来
- WordPress中利用AJAX技术进行评论提交的实现示例
- 用AJAX实现发表评论的添加与显示
- 怎么设置GridView的单元格在内容显示超过长度的时候用省略号代替而不是换行当鼠标移上去的时候将影藏的内容提示出来
- WordPress中利用AJAX技术进行评论提交的实现示例
- django ajax提交评论并自动刷新功能的实现
- Ajax实现评论提交
- 原生js实现ajax和将数组以列表形式显示出来
- 用jquery实现隐藏列表表单的显示关闭切换以及Ajax方式修改提交对应的那一行的修改内容。
- 怎么用html 显示出一横的多出来的文字，怎么实现CSS限制字数,超出部份显示点点点.
- 黄聪：Jquery+php+ajax实现表单异步提交，动态添加回复评论
- 用ajax实现仿CSDN下载评论的闪烁效果
- Ajax实现评论提交
- ajax 笔记--不用刷新实现数据的分页显示
- android开发进行自动更新时怎么下载软件到手机内存，显示实现下载到SD卡了