一、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. JavaScript夯实基础系列（三）：this
			
      在JavaScript中,函数的每次调用都会拥有一个执行上下文,通过this关键字指向该上下文.函数中的代码在函数定义时不会执行,只有在函数被调用时才执行.函数调用的方式有四种:作为函数调用.作为 ...
    
			
    2. 
						
  2. Sql万能分页代码
			
    sql数据库中常用的分页 我做了一个万能的 用的上的小伙伴拿去耍吧 go  ----万能分页代码create procedure [dbo].[sp_datapager] @pagesize int, ...
    
			
    3. 
						
  3. EF获取多个数据集以及MySQL分页数据查询优化
			
    背景:MySQL分页查询语句为 ,10; 一般页面还会获取总条数,这时候还需要一条查询总条数语句 , 这样数据库需要执行两次查询操作.MySQL提供了SQL_CALC_FOUND_ROWS追踪总条数的 ...
    
			
    4. 
						
  4. [转]Uipath、BluePrism、AA产品对比之设计器篇
			
    本文转自:https://www.jianshu.com/p/53d0d33a1a35 版本说明: Uipath V2018.3.2,BluePrism V6.3,Automation Anywher ...
    
			
    5. 
						
  5. jdbc封装的类
			
    JDBCUtil,java package cn.qst.util; import java.sql.Connection;import java.sql.DriverManager;import j ...
    
			
    6. 
						
  6. Python二级-----------程序冲刺4
			
    1. 根据输入正整数 n,作为财务数据,输出一个宽度为 20 字符,n 右对齐显示,带千位分隔符的效果,使用减号字符“-”填充.如果输入正整数超过 20 位,则按照真实长度输出.提示代码如下:‪‬‪‬ ...
    
			
    7. 
						
  7. CAD 在ARCGIS中的坐标系问题
			
    近期在使用服务(文本写入dxf方式)导出CAD的时候发现导出的CAD文件和原始数据在ArcMap中叠加后不能重合,出现了错位的现象. 查看CAD文件后发现CAD的坐标系及投影和数据不一致导致的.遇到这 ...
    
			
    8. 
						
  8. linux查看硬盘占用情况
			
    Linux命令 : df -hl 使用后文件系统 容量 已用 可用 已用% 挂载点Filesystem Size Used Avail Use% Mounted on/dev/vda1 197G 5. ...
    
			
    9. 
						
  9. tomat 欢迎页面设置在WEB-INF目录下时不显示问题
			
    <?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://w ...
    
			
    10. 
						
  10. 简单概括下MongoDB 4.0 新特性
			
    (1)跨文档事务支持 (ACID) 首个支持跨文档事务的NoSQL云数据库,将文档模型的速度,灵活性和功能与ACID保证相结合.现在,使用MongoDB解决各种用例变得更加容易. (2)40%迁移速度 ...
    
			
    11.