在本代码中主要体现，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概述和判断用户名是否存在的简单代码练习的更多相关文章

  1. ajax案例_校验用户名

    目录 ajax案例_校验用户名 代码下载 需求 流程 搭建环境 开发代码 1_jsp 1_servlet 1_service.dao 2_servlet 2_jsp 测试后,功能实现,完结撒花 aja ...

  2. Django商城项目笔记No.7用户部分-注册接口-判断用户名和手机号是否存在

    Django商城项目笔记No.7用户部分-注册接口-判断用户名和手机号是否存在 判断用户名是否存在 后端视图代码实现,在users/view.py里编写如下代码 class UsernameCount ...

  3. Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码 其中有json的一句话解释

    前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function( ...

  4. 2016/4/5 Ajax ①用户名 密码 登陆 注册 ② 判断用户名是否已存在 ③点击按钮出现民族选项下拉菜单 ④DBDA类 加入Ajaxquery方法 数组变字符串 字符串拆分

    ①登陆   注册    查表匹配    0405Ajax.php   ②判断用户名是否存在 <!DOCTYPE html> <html lang="en"> ...

  5. 十七、AJAX概述

    AJAX概述 1 什么是AJAX AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进 ...

  6. 从零开始学 Web 之 Ajax（三）Ajax 概述，快速上手

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. Ajax概述，封装以及联合模板引擎进行数据交互

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 更多资料可参考Ajax 介绍 ...

  8. 再也不学AJAX了！（一）AJAX概述

    "再也不学AJAX了"是一个与AJAX主题相关的文章系列,包含以下三个部分的内容: AJAX概述:主要回答"AJAX是什么"这个问题: 使用AJAX:介绍如何通 ...

  9. AJAX概述和简单使用

    一.ajax概述: asynchronous javascript and xml ,用于异步的向服务器发出请求,接收数据的 一种技术. 在整个过程中:页面无刷新,不打断用户的操作: 按需要获取数据, ...

随机推荐

  1. C++版 - 剑指offer面试题28: 字符串的排列

    题目: 字符串的排列 热度指数:5777 时间限制:1秒 空间限制:32768K 本题知识点: 字符串 题目描述 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出 ...

  2. iOS逆向开发（7）：微信伪装他人

    上一节小程介绍了微信在进入"附近的人"时修改位置信息的办法,这一次,小程来修改"自己"的信息,伪装成别人. 但是,这里的伪装只是"本地的伪装" ...

  3. 解决Mysql错误：ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (111)

    需要重启服务器:sudo /etc/init.d/mysql restart

  4. 应用集成mycat，实现mycat的高可用与mysql的读写分离

    前言 开心一刻 一个女人自朋友圈写道:我家老公昨天和别人家的老婆出去旅游,迄今未归,我则被别人家的老公折腾了一天,好累哦! 圈子下面,评论无数,老公在下面评论到:能不能好好说话,我只不过陪女儿去毕业旅 ...

  5. Qt实现半透明遮罩效果

    本文索引: 需求 原理 实现遮罩控件 遮罩的使用 需求 我们在显示一些模态对话框的时候,往往需要将对话框的背景颜色调暗以达到突出当前对话框的效果,例如: 对话框的父窗口除了标题栏以外的部分都变暗了,在 ...

  6. 【WebAPI No.3】API的访问控制IdentityServer4

    介绍: IdentityServer是一个OpenID Connect提供者 - 它实现了OpenID Connect和OAuth 2.0协议.是一种向客户发放安全令牌的软件. 官网给出的功能解释是: ...

  7. C# 如何在PDF中绘制不同风格类型的文本

    通过对控件Spire.PDF的测试,我们可以创建PDF文件并向文档中绘制文本.图片.表格.图形等内容,其中,对于绘制文本这一部分,Spire.PDF提供了三种字体类型来绘制文本,即: Standard ...

  8. OO_BLOG1_简单表达式求导问题总结

    作业1-1 包含简单幂函数的多项式导函数的求解 I. 基于度量的程序结构分析 1)程序结构与基本度量统计图 2)分析 ​ 本人的第一次作业的程序实现逻辑十分简单,但是OOP的色彩并不强烈,程序耦合度过 ...

  9. 多线程(5)async&await

    .net 4.0的Task已经让我们可以非常简单地使用多线程,并且可以有返回值,也可以支持线程的取消等操作,可谓已经很强大了.但.net 4.5为我们带来了async&await,使得实现多线 ...

  10. java开发环境配置——Maven

    前篇讲了jdk的安装,这篇讲一下包管理工具Maven,Maven主要是用来统一管理项目引用的jar包,还有用来打包的. Maven官网下载地址:http://maven.apache.org/down ...