Ajax概述和判断用户名是否存在的简单代码练习
在本代码中主要体现，Ajax实现了部分位置的刷新。不需要重新刷新网页，重新请求服务器。下面用过代码来对Ajax更深的认识
这里需要创建，一个jsp文件（显示登录界面），js文件(对Ajax的主要设置)，一个servlet（主要用作和数据库连接和逻辑的控制）
1.在web中创建一个Lession7jsp页面，jsp中主要写了登录页面的用户名和密码和按钮
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>AJAX学习-用户登录</title>
<script type="text/javascript" src="js/Lession7.js"></script>//对后面js页面进行调用。
</head>
<body>
<table align="center" border="1px" cellspacing="0px" cellpadding="10px"width="500">
<tr>
<td align="right" width="30%">用户名：</td>
<td align="left" width="70%">
<input type="text" name="name" id="user"/><span id="span"></span>
</td>
</tr>
<tr>
<td align="right"width="30%">密码：</td>
<td align="left" width="70%">
<input type="password" name="pwd" id="pwd"/></span>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="button" value="注册">
</td>
</tr>
</table>
</body>
</html>
2.在web中新建一个叫js的文件夹，在js文件夹里面新建Lession.js文件。Ajax的设置都是JS中设置的，所以这个js文件就是Ajax学习的精髓和重点了。
/window.onload的意思是，页面加载就会显示这个方法
window.onload = function() {
//获取jsp页面中的用户名<input name="user">标签的name
var nameObj = document.getElementById("user")
//nameObj.onblur:进行绑定，当失去焦点时，就会调用下面的函数
nameObj.onblur = function () {
//获得标签的name属性的值，以此来获取浏览器输入的内容
var name = this.value;
/*alert(name);*/
//第一步：初始化XMLHttpRequest,创建异步对象，因为其他浏览器和老版本的IE浏览器创建对象的过程不一样，所有这里需要判断
//（第一步对AJAX初始化，在网上搜索有好多，不用可以把这一步的代码背下来，理解即可）
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//第二步：指定回调函数，并对服务器的交互状态进行判断
//onreadystatechange是AJAX对象的一个属性，因为Ajax是异步处理的，所以需要一个这样的回调
xmlhttp.onreadystatechange=function(){
//readyState对服务器的状态，status是HTTP的状态
if(xmlhttp.readyState==4&&xmlhttp.status==200){
//这里用到了JSON知识点，主要实现了把serlvt页面的数据传给js
//所以，这里的数据是servlt里传过来的。
var obj = eval("("+xmlhttp.responseText+")");// eval()获取返回值
if (obj.flag==0){
document.getElementById("span").innerText="用户名可用";
}else if (obj.flag==1) {
document.getElementById("span").innerText="用户名已经存在！";
}
}
}
//第三步：用open（"1","2","3"）连接服务器 ,
// 1里面放post或者get，2里面放的是servlet在web.xml中定义的。3：true代表异步处理
xmlhttp.open("post","/ServletXml?name="+name,true);
//第四步：向服务器发送请求，
xmlhttp.send(null);
}
}
3.在src中新建servlet，我这个项目连接了mysql数据库，如果没有数据库，可以直接把里面的数据写死了。这两个可以选择一个测试。
例如：1.
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String uname = request.getParameter("uname");
//利用JDBC检索uname是否在用户表中存在
PrintWriter out = response.getWriter();
//向客户端输出响应结果
out.print("{'flag':1}");
}
例如2.我的是动态连接数据库的。
package com.wgh; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*; @WebServlet(name = "ServletXml")
public class ServletXml extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name = request.getParameter("name");
System.out.println(name);
PrintWriter pw = response.getWriter();
String[] str = new String[10];
//进行数据库链接，查询数据库中用户名是否存在的操作
try {
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/z_shop";
String username = "root";
String pwd = "root";
Connection conn = DriverManager.getConnection(url,username,pwd);
String sql = "select count(*) FROM td_name where Username=? ";
PreparedStatement ps =conn.prepareStatement(sql);
ps.setString(1,name);
ResultSet rs = ps.executeQuery();
rs.next();
System.out.println(rs.getInt(1));
if (rs.getInt(1)==0) {
pw.print("{'flag':0}");
} else{
pw.print("{'flag':1}");
}
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
System.out.println(name);
} protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
最后记得在web.xml文件中进行注册哦！
<servlet>
<servlet-name>ServletXml</servlet-name>
<servlet-class>com.wgh.ServletXml</servlet-class>
</servlet> <servlet-mapping>
<servlet-name>ServletXml</servlet-name>
<url-pattern>/ServletXml</url-pattern>
</servlet-mapping>
注意：
1.本项目中用的JSON知识点，是需要导JSON的jar包的哦，
2.在src中Servle一定要放在包中，默认包可能不识别。
如果有错的地方请多多包含。代码我运行过，可以起来的。
Ajax概述和判断用户名是否存在的简单代码练习的更多相关文章
- ajax案例_校验用户名
目录 ajax案例_校验用户名 代码下载 需求 流程 搭建环境 开发代码 1_jsp 1_servlet 1_service.dao 2_servlet 2_jsp 测试后,功能实现,完结撒花 aja ...
- Django商城项目笔记No.7用户部分-注册接口-判断用户名和手机号是否存在
Django商城项目笔记No.7用户部分-注册接口-判断用户名和手机号是否存在 判断用户名是否存在 后端视图代码实现,在users/view.py里编写如下代码 class UsernameCount ...
- Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码 其中有json的一句话解释
前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function( ...
- 2016/4/5 Ajax ①用户名 密码 登陆 注册 ② 判断用户名是否已存在 ③点击按钮出现民族选项下拉菜单 ④DBDA类 加入Ajaxquery方法 数组变字符串 字符串拆分
①登陆 注册 查表匹配 0405Ajax.php ②判断用户名是否存在 <!DOCTYPE html> <html lang="en"> ...
- 十七、AJAX概述
AJAX概述 1 什么是AJAX AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进 ...
- 从零开始学 Web 之 Ajax（三）Ajax 概述，快速上手
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Ajax概述，封装以及联合模板引擎进行数据交互
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 更多资料可参考Ajax 介绍 ...
- 再也不学AJAX了！（一）AJAX概述
"再也不学AJAX了"是一个与AJAX主题相关的文章系列,包含以下三个部分的内容: AJAX概述:主要回答"AJAX是什么"这个问题: 使用AJAX:介绍如何通 ...
- AJAX概述和简单使用
一.ajax概述: asynchronous javascript and xml ,用于异步的向服务器发出请求,接收数据的 一种技术. 在整个过程中:页面无刷新,不打断用户的操作: 按需要获取数据, ...
随机推荐
- 初学Java Web(5)——cookie-session学习
HTTP 协议 Web 浏览器与 Web 服务器之间的一问一答的交互过程必须遵守一定的规则,这样的规则就是 HTTP 协议. HTTP 是 hypertext transfer protocol(超文 ...
- 【ASP.NET Core快速入门】（五）命令行配置、Json文件配置、Bind读取配置到C#实例、在Core Mvc中使用Options
命令行配置 我们通过vs2017创建一个控制台项目CommandLineSample 可以看到现在项目以来的是dotnet core framework 我们需要吧asp.net core引用进来,我 ...
- 初识区块链——用JS构建你自己的区块链
前言 区块链太复杂,那我们就讲点简单的.用JS来构建你自己的区块链系统,寥寥几行代码就可以说明区块链的底层数据结构.POW挖矿思想和交易过程等.当然了,真实的场景远远远比这复杂.本文的目的仅限于让大家 ...
- .NetCore2.1 WebAPI新增Swagger插件
说明 Swagger是一个WebAPI在线注解.调试插件,过去我们主要通过手工撰写WebAPI接口的交互文档供前端开发人员或外部开发者, 官网地址:https://swagger.io/. 但是在实际 ...
- Spring Boot（十）Logback和Log4j2集成与日志发展史
一.简介 Java知名的日志有很多,比如:JUL.Log4j.JCL.SLF4J.Logback.Log4j2,那么这些日志框架之间有着怎样的关系?诞生的原因又是解决什么问题?下面一起来看. 1.1 ...
- React组件方法中为什么要绑定this
如果你尝试使用过React进行前端开发,一定见过下面这样的代码: //假想定义一个ToggleButton开关组件 class ToggleButton extends React.Component ...
- 第20章 定义客户端 - Identity Server 4 中文文档(v1.0.0)
客户端表示可以从您的身份服务器请求令牌的应用程序. 详细信息各不相同,但您通常会为客户端定义以下常用设置: 唯一的客户ID 如果需要的秘密 允许与令牌服务的交互(称为授权类型) 身份和/或访问令牌发送 ...
- SpringBoot 之Actuator.
一.Actuator 介绍 Actuator 是 SpringBoot 项目中一个非常强大一个功能,有助于对应用程序进行监视和管理,通过 restful api 请求来监管.审计.收集应用的运行情况. ...
- spring-boot的spring-cache中的扩展redis缓存的ttl和key名
原文地址:spring-boot的spring-cache中的扩展redis缓存的ttl和key名 前提 spring-cache大家都用过,其中使用redis-cache大家也用过,至于如何使用怎么 ...
- Linux基础学习（全）
使用的Linux发行版本为Redhat 1.Linux(RedHat)基础学习-命令行使用入门 2.Linux(RedHat)基础学习-文件寻址与管理 3.Linux(RadHat)基础学习-vim编 ...