每日学习：注册用户名检测（案例）

【Jquery进阶】Ajax，JSON

一、Ajax介绍

• Ajax即 Asynchronous JavaScript + XML（异步 JavaScript 和 XML），是一种用于创建快速动态网页的技术。Ajax通过在后台与服务器进行少量数据交换，使网页实现异步更新，能够向服务器请部分数据而无需卸载页面(即刷新，重新加载整个页面)，可以带来更好的用户体验。

• Ajax 技术核心是 XMLHttpRequest 对象(简称XHR)，它提供了向服务器发送请求和解析服务器响应的接口，能够以异步方式从服务器获取更多的信息。这就意味着，用户只要触发某一事件，就可以在不刷新网页的情况下，更新服务器最新的数据。

虽然Ajax中的x代表的是XML，但Ajax通信和数据格式无关，也就是说这种技术不一定使用XML。

二、JSON建构于两种结构

• “名称/值”对的集合（Acollection of name/value pairs）。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyedlist），或者关联数组 （associativearray）,j就是键值对。

• 值的有序列表（Anordered list of values）。在大部分语言中，它被理解为数组（array）。

三、JSON 语法规则

JSON 语法是 JavaScript 对象表示语法的子集。

• 数据在名称/值对中

• 数据由逗号分隔

• 大括号保存对象

• 中括号保存数组

四、案例操作

Json核心代码

<script type="text/javascript">
         $(function () {
             $("#username").on("blur",function () {
                 $.ajax({
                     url:"queryUsername",
                     async:true,
                     data:"username="+$("#username").val(),
                     type:"post",
                     dataType:"json",
                     success:function (data) {
                         //{"msg":"恭喜，该邮件地址可以注册","code":0}
                         //根据服务端返回的json数据，编写显示逻辑
                         if(data.code == 0){
                             $("#msg").text(data.msg)

                             $("#msg").css("color","green")
                         }else{
                             $("#msg").text(data.msg)

                             $("#msg").css("color","red")
                         }
                     },
                     error:function () {
                         alert("服务器发生了错误")
                     }
                 });
             })
         })
    </script>

Servlet核心代码

 @WebServlet("/queryUsername")
public class Demo01Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        Result result = new Result();
        if("jack".equals(username)){
            //3:都需要是json数据
            result.setMsg("该邮箱地址已被注册");
            result.setCode(1);
            //返回已注册
        }else{
            result.setMsg("恭喜，该邮件地址可以注册");
            result.setCode(0);
            //返回未注册
        }
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().println(new ObjectMapper().writeValueAsString(result));
    }
}

bean类Result

public class Result {
    private String msg;
    private int code;
}