一、AJAX是啥？

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

　　2.为什么使用ajax？

　　原因：

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

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

　　3ajax的应用场景？

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

二、JSON？

　　1.是啥？

　　是一种数据格式

　　2.为啥使用？

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

　　3.啥时候用？

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

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

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

　

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

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <%
  4. String path = request.getContextPath();
  5. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"+"views/";
  6. %>
  7. <!DOCTYPE html>
  8. <html>
  9.     <head>
  10.         <meta charset="UTF-8">
  11.         <title>注册 - 贵美·商城</title>
  12.         <base href="<%=basePath%>">
  13.          <link rel="icon" href="img/icon.png" type="image/x-icon">
  14.         <link rel="stylesheet" type="text/css" href="css/register.css"/>
  15.     </head>
  16.     <body>
  17.         <div class="wrap">
  18.             <div class="guimeilogo"></div>
  19.             <div class="register">
  20.                 <div class="top">
  21.                     <h1>新用户注册</h1>
  22.                     <a href="/shop/views/login.jsp">已有账号</a>
  23.                 </div>
  24.                 <div class="mid">
  25.                     <div style="color: red">${error}</div>
  26.                     <form action="/shop/register" method="post">
  27.                         <%--在这里添加提示信息 1.成功注册   2.失败注册--%>
  28.                         <div id="showMsg"></div>
  29.                     <input type="text" name="username" id="username" placeholder="用户名" required="required"/>
  30.                     <div class="sec">
  31.                         <input type="text" name="code" id="code" placeholder="验证码" required="required" />
  32.                         <a  class="send" onclick="send()"> 发送验证码 </a>
  33.                         <script>
  34.                             function send(){
  35.                                  return false;
  36.                             }
  37.                         </script>
  38.                     </div>
  39.                         <input type="password" name="password" id="password" placeholder="密码" required="required" />
  40.                         <input type="password" name="reppw" id="reppw" placeholder="重复密码" required="required" />
  41.                         <input type="text" name="telephone" id="telephone" placeholder="手机号" required="required"/>
  42.                         <input type="text" name="nickname" id="nickname" placeholder="亲，您的昵称" required="required" />
  43.                         <input type="text" name="email" id="email" placeholder="亲，您的邮箱" required="required"/>
  44.                         <input type="submit" id="submit" value="注册"/>
  45.                     </form>
  46.                 </div>
  47.             </div>
  48.         </div>
  49.             <%--导入JS包--%>
  50.         <script src="js/jquery-2.1.0.js">
  51.  
  52.         </script>
  53.     <script >
  54.  
  55.         /*
  56.             用户： 输入用户名完毕后    鼠标离开后   立刻提交用户名是否可用   给用户提示
  57.  
  58.             1.给username 输入框  添加失去焦点的事件  onblur
  59.                     username.onblur=function () {
  60.                         alert(username.value)
  61.                     }
  62.             2.获取用户输入的数据 value
  63.  
  64.             3.通过ajax 将用户输入的用户名发送给服务器   注意  涉及到函数  需要导入js的包  jQuery-2.1.0.js
  65.  
  66.                 $.post("url" ,"参数"，function(data){});
  67.                 $.post("/shop/CheckUsername",{username:username.value},function (data)
  68.                                 {username:username.value}
  69.             4.接受服务器返回响应
  70.  
  71.             5.将回传的值  展示到页面中
  72.  
  73.             后台？
  74.                 1.接收请求的参数
  75.                 2.通过 dao 检验用户名是否可用
  76.                 3.将校验结果  响应给浏览器
  77.          */
  78.         //1.给username 输入框 添加时期焦点事件  通过id的方式
  79.         username.onblur=function () {
  80.             //2.通过ajax 将用户的用户名发送给服务器
  81.             $.post("/shop/checkUsername",{username:username.value},function (data) {
  82.                 if (data.code == "1044"){
  83.                     $("#showMsg").html("用户名 已经被注册过").css("color","red");
  84.                 } else{
  85.                     $("#showMsg").html("此用户名 可以注册").css("color","green");
  86.                 }
  87.             })
  88.         }
  89.  
  90.         if ("${success}"=="注册成功"){
  91.             if(confirm("注册成功，是否登录？")){
  92.                 window.location.href="/shop/views/login.jsp";
  93.             }
  94.         }
  95.     </script>
  96.     </body>
  97. </html>

servlet部分

  1.  
  1. package com.aaa.servlet;
  2.  
  3. import com.aaa.dao.Impl.UserDAOImpl;
  4. import com.alibaba.fastjson.JSON;
  5.  
  6. import javax.servlet.ServletException;
  7. import javax.servlet.annotation.WebServlet;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  11. import java.io.IOException;
  12. import java.io.PrintWriter;
  13. import java.util.HashMap;
  14.  
  15. /**
  16.  * 验证用户唯一性 在后台要先获取到 用户注册的参数。
  17.  * 1.获得请求参数
  18.  *
  19.  * 2.需要验证  用户名的唯一性 ?  调用dao 方法中的isExist
  20.  *
  21.  * 3.将检验结果   返回给浏览器  响应ajax的请求?
  22.  *
  23.  *          1.resp 响应浏览器  防止乱码  设置编码格式
  24.  *          resp.setContentType("text/json:charset=UTF-8");
  25.  *
  26.  *          2.resp 获取数据
  27.  *          PrintWriter out = resp.getWriter();                 getWriter()获取通向浏览器的字符流(同一次请求处理中,字节流和字符流不能同时存在)
  28.  *
  29.  * 3.思考？
  30.  *  json的格式  和java中的map相似 创建hashmap集合 存储数据？    HashMap<Object, Object> map = new HashMap<>();
  31.  *
  32.  *      JSON.parseObject，是将Json字符串转化为相应的对象；
  33.  *      JSON.toJSONString则是将对象转化为Json字符串。           直接导包使用  fastjson-1.2.9.jar
  34.  *
  35.  *         4.输出数据？
  36.  *
  37.  *         5.关闭流？
  38.  *
  39.  */
  40. @WebServlet("/checkUsername")
  41. public class CheckUsernameServlet extends HttpServlet {
  42.     @Override
  43.     protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  44.         String username = req.getParameter("username");
  45.  
  46.         UserDAOImpl dao = new UserDAOImpl();
  47.         boolean exist = dao.isExist(username);
  48.  
  49.         resp.setContentType("text/json:character=utf-8");
  50.         PrintWriter out = resp.getWriter();
  51.         HashMap<Object, Object> map = new HashMap<>();
  52.  
  53.         if (exist){
  54.             map.put("code","1044");
  55.             map.put("message","用户名已被占用");
  56.         }else{
  57.             map.put("code","102200");
  58.             map.put("message","用户名 可用");
  59.         }
  60.         String s = JSON.toJSONString(map);
  61.  
  62.         out.write(s);
  63.         out.close();
  64.     }
  65. }
  1.  
  1.  

效果

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

  1. 使用ajax技术实现txt弹出在页面上

    使用ajax技术实现txt弹出在页面上   使用ajax技术实现点击按钮,将TXT文本里的内容通过弹出框显示到页面上 /*事件会在页面加载完成后触发.*/ <script> window. ...

  2. 《所用到的AJAX技术基础》

    来自百度网页,w3cshool网页:AJAX = Asychronous JavaScript and XML,翻译成中文为:异步的JavaScript XML. 异步的意思就是不重新加载整个页面,后 ...

  3. Ajax技术

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...

  4. Ajax技术详解

    Ajax技术:Ajax描述了一种主要使用脚本(JS)操纵HTTP的web应用架构,它的主要特点是使用脚本操纵HTTP和web服务器进行数据交换,不会导致页面重载.Ajax的核心是JS的XMLHttpR ...

  5. Java之Ajax技术

    ajax(asynchronouse javascript and xml) 异步的javascript 和 xml(现在常把xml换成json): ajax是2005年提出的,在2006,2007年 ...

  6. 在 PHP 中结合 Ajax 技术进行图片上传

    前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Aja ...

  7. ajax 技术和原理分析

    ajax所包含的技术 大家都知道ajax并非一种新的技术,而是几种原有技术的结合体.它由下列技术组合而成. 1.使用CSS和XHTML来表示. 2. 使用DOM模型来交互和动态显示. 3.使用XMLH ...

  8. Ajax 技术一

    一.Ajax概述 1.历史起源 1998年,微软公司Outlook Web Access研发小组在当时的IE浏览器中集成了一种技术,可以在客户端无刷新的前提下向服务器端发送Http请求,这门技术称之为 ...

  9. AJAX技术的核心

    //创建一个XMLHttpRequest对象 ,利用此对象与服务器进行通信 是AJAX技术的核心 /** * 获取XmlHttpRequest对象 */ function getXMLHttpRequ ...

随机推荐

  1. Tensorflow之基于LSTM神经网络写唐诗

    最近看了不少关于写诗的博客,在前人的基础上做了一些小的改动,因比较喜欢一次输入很长的开头句,所以让机器人输出压缩为一个开头字生成两个诗句,写五言和七言诗,当然如果你想写更长的诗句是可以继续改动的. 在 ...

  2. 【Golang笔记】Golang工具包Cobra安装记录

    0.环境信息 系统:Win10_x64 Go版本:go version go1.8.1 windows/amd64 Git版本:git version 2.17.0.windows.1 1.安装Go运 ...

  3. 痞子衡嵌入式：恩智浦i.MXRT系列微控制器量产神器RT-Flash用户指南

    RT Flash English | 中文 1 软件概览 1.1 介绍 RT-Flash是一个专为基于NXP i.MX RT系列芯片的产品量产而设计的工具,其功能与官方MfgTool2工具类似,但是解 ...

  4. 基于vue-cli快速构建

    基于vue-cli快速构建 https://www.jianshu.com/p/2769efeaa10a   Vue是近两年来比较火的一个前端框架(渐进式框架吧),与reactjs和angularjs ...

  5. 数据结构——Java实现链栈

    一.分析 栈是限定仅在表的一端进行插入或删除操作的线性表,对于栈来说,操作端称为栈顶,另一端则称为栈底,栈的修改是按照后进先出的原则进行的,因此又称为后进先出的线性表. 链栈是指采用链式存储结构实现的 ...

  6. web.xml的<url-parttern>的匹配规则

    <url-parttern>顾名思义是对url(统一资源定位符)的一种匹配,是对“http:........."地址的匹配,但是会减去应用上下文,就是你的web程序的名字,如果你 ...

  7. 为了约会，PM的领导能力篇来啦！

    之前我们花了很大力气阐述PM的过程能力成熟度,为的是让PM把项目管理得心应手,早点下班.可再完美的过程也要人来做啊!兄弟们要是不爽了,你还有心思约会么?那怎么才能管好组里的兄弟,让他们好好执行过程,早 ...

  8. 如何从GitHub下载csv文件

    当打开存.csv文件的页面时,不用直接点击页面的Download,这样会使csv文件直接用浏览器打开. 要点击Raw按钮,鼠标右键,文件另存为,可以直接把csv文件下载到本地.

  9. libevent 实现的socket 通信 server以及解决找不到动态库的方法

    注: client 个人觉得没必要用 libvent来实现就没写 注:由于 涉及到回调函数的使用 如有疑惑的可以先去了解回调函数的实现机理 先来说一下 libevent主要是干啥的 : 内部封装了 s ...

  10. c/c++ 右值引用，forward关键字

    c++ forward关键字 forward的由来:模板函数中的推导类型,作为另一函数的参数时,不管实参是什么类型,作为另一个参数的实参时,都变成了左值.因为C++里规定函数的形参就是左值,不过调用侧 ...