一、AJAX是啥？

　　1.页面无需刷新，异步请求。

　　2.为什么使用ajax？

　　原因：

　　1传统模式  需要将请求发送到服务器，服务器经过业务处理，返回一个页面给客户端。这样做，会很浪费资源。

　　2.ajax  只需要请求一次页面，之后的数据交互 都无需重新记载当前页面。是不是很强大?

　　3ajax的应用场景？

　　注册中的 用户名校验、注册提交、注册验证码、登录提交等。

二、JSON？

　　1.是啥？

　　是一种数据格式

　　2.为啥使用？

　　优点：方便数据传输，便于传递和解析。

　　3.啥时候用？

　　ajax--------json------------后台

　　后台------json-------------ajax

json  对象存储数据  类似java中的  foreach

　

三 ，检查注册页面 使用ajax技术。

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"+"views/";

%>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>注册 - 贵美·商城</title>

        <base href="<%=basePath%>">

         <link rel="icon" href="img/icon.png" type="image/x-icon">

        <link rel="stylesheet" type="text/css" href="css/register.css"/>

    </head>

    <body>

        <div class="wrap">

            <div class="guimeilogo"></div>

            <div class="register">

                <div class="top">

                    <h1>新用户注册</h1>

                    <a href="/shop/views/login.jsp">已有账号</a>

                </div>

                <div class="mid">

                    <div style="color: red">${error}</div>

                    <form action="/shop/register" method="post">

                        <%--在这里添加提示信息 1.成功注册   2.失败注册--%>

                        <div id="showMsg"></div>

                    <input type="text" name="username" id="username" placeholder="用户名" required="required"/>

                    <div class="sec">

                        <input type="text" name="code" id="code" placeholder="验证码" required="required" />

                        <a  class="send" onclick="send()"> 发送验证码 </a>

                        <script>

                            function send(){

                                 return false;

                            }

                        </script>

                    </div>

                        <input type="password" name="password" id="password" placeholder="密码" required="required" />

                        <input type="password" name="reppw" id="reppw" placeholder="重复密码" required="required" />

                        <input type="text" name="telephone" id="telephone" placeholder="手机号" required="required"/>

                        <input type="text" name="nickname" id="nickname" placeholder="亲，您的昵称" required="required" />

                        <input type="text" name="email" id="email" placeholder="亲，您的邮箱" required="required"/>

                        <input type="submit" id="submit" value="注册"/>

                    </form>

                </div>

            </div>

        </div>

            <%--导入JS包--%>

        <script src="js/jquery-2.1.0.js">

        </script>

    <script >

        /*

            用户： 输入用户名完毕后    鼠标离开后   立刻提交用户名是否可用   给用户提示

            1.给username 输入框  添加失去焦点的事件  onblur

                    username.onblur=function () {

                        alert(username.value)

                    }

            2.获取用户输入的数据 value

            3.通过ajax 将用户输入的用户名发送给服务器   注意  涉及到函数  需要导入js的包  jQuery-2.1.0.js

                $.post("url" ,"参数"，function(data){});

                $.post("/shop/CheckUsername",{username:username.value},function (data)

                                {username:username.value}

            4.接受服务器返回响应

            5.将回传的值  展示到页面中

            后台？

                1.接收请求的参数

                2.通过 dao 检验用户名是否可用

                3.将校验结果  响应给浏览器

         */

        //1.给username 输入框 添加时期焦点事件  通过id的方式

        username.onblur=function () {

            //2.通过ajax 将用户的用户名发送给服务器

            $.post("/shop/checkUsername",{username:username.value},function (data) {

                if (data.code == "1044"){

                    $("#showMsg").html("用户名 已经被注册过").css("color","red");

                } else{

                    $("#showMsg").html("此用户名 可以注册").css("color","green");

                }

            })

        }

        if ("${success}"=="注册成功"){

            if(confirm("注册成功，是否登录？")){

                window.location.href="/shop/views/login.jsp";

            }

        }

    </script>

    </body>

</html>

servlet部分





package com.aaa.servlet;

import com.aaa.dao.Impl.UserDAOImpl;

import com.alibaba.fastjson.JSON;

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.util.HashMap;

/**

 * 验证用户唯一性 在后台要先获取到 用户注册的参数。

 * 1.获得请求参数

 *

 * 2.需要验证  用户名的唯一性 ?  调用dao 方法中的isExist

 *

 * 3.将检验结果   返回给浏览器  响应ajax的请求?

 *

 *          1.resp 响应浏览器  防止乱码  设置编码格式

 *          resp.setContentType("text/json:charset=UTF-8");

 *

 *          2.resp 获取数据

 *          PrintWriter out = resp.getWriter();                 getWriter()获取通向浏览器的字符流(同一次请求处理中,字节流和字符流不能同时存在)

 *

 * 3.思考？

 *  json的格式  和java中的map相似 创建hashmap集合 存储数据？    HashMap<Object, Object> map = new HashMap<>();

 *

 *      JSON.parseObject，是将Json字符串转化为相应的对象；

 *      JSON.toJSONString则是将对象转化为Json字符串。           直接导包使用  fastjson-1.2.9.jar

 *

 *         4.输出数据？

 *

 *         5.关闭流？

 *

 */

@WebServlet("/checkUsername")

public class CheckUsernameServlet extends HttpServlet {

    @Override

    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String username = req.getParameter("username");

        UserDAOImpl dao = new UserDAOImpl();

        boolean exist = dao.isExist(username);

        resp.setContentType("text/json:character=utf-8");

        PrintWriter out = resp.getWriter();

        HashMap<Object, Object> map = new HashMap<>();

        if (exist){

            map.put("code","1044");

            map.put("message","用户名已被占用");

        }else{

            map.put("code","102200");

            map.put("message","用户名 可用");

        }

        String s = JSON.toJSONString(map);

        out.write(s);

        out.close();

    }

}






 




效果




												


											
初始ajax技术的更多相关文章
	

    
								
  1. 使用ajax技术实现txt弹出在页面上
		
    使用ajax技术实现txt弹出在页面上   使用ajax技术实现点击按钮,将TXT文本里的内容通过弹出框显示到页面上 /*事件会在页面加载完成后触发.*/ <script> window. ...
    
		
    2. 
						
  2. 《所用到的AJAX技术基础》
		
    来自百度网页,w3cshool网页:AJAX = Asychronous JavaScript and XML,翻译成中文为:异步的JavaScript XML. 异步的意思就是不重新加载整个页面,后 ...
    
		
    3. 
						
  3. Ajax技术
		
    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...
    
		
    4. 
						
  4. Ajax技术详解
		
    Ajax技术:Ajax描述了一种主要使用脚本(JS)操纵HTTP的web应用架构,它的主要特点是使用脚本操纵HTTP和web服务器进行数据交换,不会导致页面重载.Ajax的核心是JS的XMLHttpR ...
    
		
    5. 
						
  5. Java之Ajax技术
		
    ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json): ajax是2005年提出的,在2006,2007年 ...
    
		
    6. 
						
  6. 在 PHP 中结合 Ajax 技术进行图片上传
		
    前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Aja ...
    
		
    7. 
						
  7. ajax 技术和原理分析
		
    ajax所包含的技术 大家都知道ajax并非一种新的技术,而是几种原有技术的结合体.它由下列技术组合而成. 1.使用CSS和XHTML来表示. 2. 使用DOM模型来交互和动态显示. 3.使用XMLH ...
    
		
    8. 
						
  8. Ajax 技术一
		
    一.Ajax概述 1.历史起源 1998年,微软公司Outlook Web Access研发小组在当时的IE浏览器中集成了一种技术,可以在客户端无刷新的前提下向服务器端发送Http请求,这门技术称之为 ...
    
		
    9. 
						
  9. AJAX技术的核心
		
    //创建一个XMLHttpRequest对象 ,利用此对象与服务器进行通信 是AJAX技术的核心 /** * 获取XmlHttpRequest对象 */ function getXMLHttpRequ ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 学习ASP.NET Core Razor 编程系列十七——分组
			
    学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET  ...
    
			
    2. 
						
  2. 机器学习之支持向量机—SVM原理代码实现
			
    支持向量机—SVM原理代码实现 本文系作者原创,转载请注明出处:https://www.cnblogs.com/further-further-further/p/9596898.html 1. 解决 ...
    
			
    3. 
						
  3. 并发系列（6）之 ThreadPoolExecutor  详解
			
    本文将主要介绍我们平时最常用的线程池 ThreadPoolExecutor ,有可能你平时没有直接使用这个类,而是使用 Executors 的工厂方法创建线程池,虽然这样很简单,但是很可能因为这个线程 ...
    
			
    4. 
						
  4. c#如何声明数据结构类型为null？
			
    可以通过如下两种方式声明可为空的类型:System.Nullable<T> variable;T?variable:eg:int值是-2,147,483,648 到 2,147,483,6 ...
    
			
    5. 
						
  5. Java 加密、解密PDF文档
			
    本篇文章将介绍通过Java编程来设置PDF文档保护的方法.我们可以设置仅用于查阅文档的密码,即该通过该密码打开文档仅用于文档阅读,无法编辑:也可以设置文档编辑权限的密码,即通过该密码打开文档时,文档为 ...
    
			
    6. 
						
  6. Java开发笔记（八十八）文件字节I／O流
			
    前面介绍了如何使用字符流读写文件,并指出字符流工具的处理局限,进而给出随机文件工具加以改进.随机文件工具除了支持访问文件内部的任意位置,更关键的一点是通过字节数组读写文件数据,采取字节方式比起字符方式 ...
    
			
    7. 
						
  7. Netty解决粘包和拆包问题的四种方案
			
    在RPC框架中,粘包和拆包问题是必须解决一个问题,因为RPC框架中,各个微服务相互之间都是维系了一个TCP长连接,比如dubbo就是一个全双工的长连接.由于微服务往对方发送信息的时候,所有的请求都是使 ...
    
			
    8. 
						
  8. mysql判断条件不存在插入存在更新某字段
			
    insert into mst_sequence(seq_type, seq_desc, seq_date, seq_no, create_time) VALUES('CK', 'XXX', NOW( ...
    
			
    9. 
						
  9. Java UrlRewriter伪静态技术运用深入分析
			
    通常我们为了更好的缓解服务器压力,和增强搜索引擎的友好面,都将文章内容生成静态页面. 但是有时为了能实时的显示一些信息,或者还想运用动态脚本解决一些问题,不能用静态的方式来展示网站内容,必须用到动态页 ...
    
			
    10. 
						
  10. MySQL 字符集和校对
			
    字符集是指一种从二进制编码到某类字符符号的映射,校对是一组用于某个字符集的排序规则.每一类编码字符都有其对应的字符集和校对规则 MySQL 如何使用字符集 每种字符集都可能有多种校对规则,并且都有一个 ...
    
			
    11.