Ajax的JSP示例以及相关知识介绍,适合于入门者
分享一下我老师大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow
利用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
<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" οnblur="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;
}
}
分享一下我老师大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow
Ajax的JSP示例以及相关知识介绍,适合于入门者相关推荐
- java窗口三栏布局_移动端的flex三栏布局的相关知识介绍(代码示例)
本篇文章给大家带来的内容是关于移动端的flex三栏布局的相关知识介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 默认情况下先显示移动端,通过 @media 属性适配屏 ...
- 后端技术:消息队列MQ/JMS/Kafka相关知识介绍
?今天给大家分享消息队列MQ/JMS/Kafka相关知识介绍 1.消息队列介绍 首先举个收快递的栗子,传统的收快递,快递小哥把我们的快递送到我们的手里.他需要什么条件嗯? 快递小哥有时间送, 我们有时 ...
- pdh光端机相关知识介绍
目前随着网络信息技术的发展,我们拥有了更加先进的技术运用技巧,其中一个就是pdh光端机的使用.我们自从使用了pdh光端机,对于信息的传输大大的打破了传统的信息传输的缺点.那么,作为一种新生的技术,相信 ...
- 活塞运动c语言编程,动网格的相关知识介绍
记:在学习使用Fluent的时候,有不少朋友需要使用动网格模型(Dynamic Mesh Model),因此,本版推出这个专题,进行大讨论,使大家在使用动网格时尽量少走弯路,更快更好地掌握:也欢迎使用 ...
- LOD技术——定义详解及相关知识介绍
LOD技术--定义详解及相关知识介绍 LOD技术(Level Of Detail)指用若干不同复杂度的模型来表示同一对象的技术.此技术主要根据视点距离对象位置的变化调用不同复杂度的模型,即在较远时调用 ...
- 硬件知识:固态硬盘相关知识介绍
今天就为大家全面科普一下固态硬盘的相关知识,让大家购买时做到心中有数,按需选择. 首先还是从SSD的结构来说起,SSD最基本的组成部件分为:主控芯片.闪存芯片.固件算法,下面我们分别阐述三者的工作职责 ...
- [Redis6]Redis相关知识介绍
Redis介绍相关知识 端口6379 6379 是 "MERZ " 九宫格输入法对应的数字.Alessia Merz 是一位意大利舞女.女演员. Redis 作者 Antirez ...
- 弧形背景html,弧形背景墙—弧形背景墙相关知识介绍
现在的装修方式真的是很多的,背景墙就是现在一种新型的装修方式,而且就算是一个小小的背景墙,它也是有很多形状的,比如弧形.圆形等.今天小编要给大家介绍的是弧形背景墙的相关知识. 弧形背景墙 弧形背景墙- ...
- 介绍php ppt,PHP相关知识介绍.ppt
[摘要]PHP相关知识的介绍 1.什么是PHP PHP,是英文超级文本预处理语言Hypertext Preprocessor的缩写. PHP 是一种 HTML 内嵌式的语言,是一种在服务器端执行的嵌入 ...
最新文章
- android学习第5天(周六日没学,可惜啊,神驰物外了)
- LeetCode Intersection of Two Arrays
- django rest framework------得心应手
- Shiro+springboot+mybatis(md5+salt+散列)认证与授权-02
- ITK:重新缩放图像
- 补丁发布工具1.5.5
- vs strcore.cpp(156) 内存泄漏
- thinkphp小技巧
- 为了帮助卖家成交,闲鱼工程师做了些什么?
- linqto 多个关键字模糊查询_查询函数Choose、Lookup、Hlookup、Vlookup应用技巧解读
- cognos报表导出excel_17个新增功能点,让报表更惊艳!
- 支付宝APP支付IOS手机端java后台版
- html在网页中图片打不开,网页图片不显示,教您网页图片不显示如何解决
- 新版白话空间统计(24):中位数中心
- china-pub第3波免费赠书正式推出,精品赠书20册,抢楼得书!
- 淘宝的商品中心和类目体系是怎么设计的 | 极客分享第 16 期
- 东莞厚街工业机器人展会_展会效果大起底2020东莞厚街机械展暨2020东莞国际工业自动化及机器人展览会...
- 【职场攻略】职场社交之三大巧言攻略
- LeetCode695. 岛屿的最大面积———海岛
- Matlab播放音频文件(音乐)!
热门文章
- 毕昇 JDK:为啥是ARM 上超好用的 JDK
- 云原生2.0时代下,DevOps实践如何才能更加高效敏捷?
- 基于Fabric的性能测试与调优实践
- 【华为云技术分享】云图说 | 容器交付流水线ContainerOps,助力企业容器化转型
- OCR文字识别在计算机视觉的重要性、基本技术和最新进展
- python pandas csv时间聚合_pandas中简单统计分组聚合函数的介绍
- navicat怎么设计教室管理信息系统_基于师生体验设计的智能教室是怎么样的?...
- C语言答案杨崇艳,贯彻落实科学发展观,走新型工业化道路的要求是()。A.科技含量高B.经济效益好...
- hbuild 编译 php,Hbuilder的PHP环境搭建
- 图像分类_PyTorch图像数据分类