JQuery与Ajax（下）

接上篇文章，本文主要介绍ajax异步通信

前言：

首先举个例子：

在玩一款很火爆的游戏，比如王者荣耀的时候，有没有为起名字而烦恼，每次已经选好自己满意的名字了，然后一点提交，返回来的只是一行”名字已被占用“，而每当乱起一个名字以为他名字还是会被占用的时候，一下子又通过了，有没有很烦，像这种提交名字等待服务器返回数据的模式就是同步请求，而如果使用异步请求的话，每当你输入完一个名字，服务器都可以给你一个反馈，改名字是否已占用，极大的提高了用户体验，而ajax就是前端中常用的异步请求框架。

 

目录

前言：

 

一.使用ajax简单进行前后端异步通信

1.使用原生方式创建异步通信（不常用）

2.使用ajax进行简单的异步通信（不常用）

3.最简单常用的方法，jquery实现（常用）

二.json数据格式的介绍

1.语法格式

2.json的格式化

3.json与java对象的相互转化

三.前后端的异步json数据交互

---

一.使用ajax简单进行前后端异步通信

1.使用原生方式创建异步通信（不常用）

function fun() {
      var xmlhttp;
      // 如果浏览器支持XMLHttpRequest则创建XMLHttpRequest
      if(window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
      }else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      // 建立连接ajaxServlet是请求的地址，首先需要写一个方法，对这个请求进行处理
      xmlhttp.open("GET","ajaxServlet",true);
      // 发送请求
      xmlhttp.send();
      // 等待xmlhttp对象的状态发生改变时执行事件
      xmlhttp.onreadystatechange=function () {
          // readyState===4时就说明拿到了响应数据
        if(xmlhttp.readyState===4){
          var responseText = xmlhttp.responseText;
          alert(responseText)
        }
      }
    }

把方法绑定在按钮上，点击一下就可以得到后端发来的信息了

2.使用ajax进行简单的异步通信（不常用）

function fun2() {
            $.ajax({
                url:"ajaxServlet",//请求路径
                type:"POST",//请求方式
                data:{"username":"tom","msg":521},
                success:function (msg) {
                    alert(msg)
                },//成功获得请求后的回调函数
                error:function () {
                    alert("失败了")
                },//请求失败的回调函数
                dataType:"text",
            });
        }

3.最简单常用的方法，jquery实现（常用）

function fun3() {
            $.get("ajaxServlet",{username:"tom"},function (data) {
                alert(data);
            },"text");
        }

直接调用jquery中的get，post方法，传入请求地址，请求参数，回调函数，期待返回的类型

二.json数据格式的介绍

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

 在前后端交互过程中，使用字符串会使得数据提取复杂，使用xml文件会使得传输效率变低，这时候json应运而生，作为轻量级交互语言，集提取便捷，传输快速的优点于一身。

1.语法格式

列表

[1,2,3,4,"hello"]

对象（类字典）

{"name":"zhuzhu"，"age":18}

当然他们也可以嵌套起来

[{"name":"hello","age":18},{"name":"hello","age":18},{"name":"hello","age":18}]

2.json的格式化

josn一般都是在一行中输出，我们可以去https://www.json.cn/进行json格式化解析

 这样看起来就比较美观，简洁了

3.json与java对象的相互转化

这里我们介绍一个库，Jackson库

• ObjectMapper类是Jackson库的主要类，它提供一些功能将数据集或对象转换的实现。
• 它将使用JsonParser和JsonGenerator实例来实现JSON的实际读/写。

把一个java对象转化为json对象

         //            用户名不存在
            map.put("userExsit",false);
            map.put("msg","可以使用");

        String json_data = mapper.writeValueAsString(map);
        System.out.println(json_data);

 还可以直接向一个输出流里面去写json数据，就比去去往response流里面书写数据

        if(FindUser.Find_str(username)){
//            用户名已存在
            map.put("userExsit",true);
            map.put("msg","这个用户名太火爆了，再换一个吧");
        }else {
            //            用户名不存在
            map.put("userExsit",false);
            map.put("msg","可以使用");
        }
//        给resp输出流写入json数据
        mapper.writeValue(resp.getWriter(),map);

这样就直接向浏览器返回了json数据

三.前后端的异步json数据交互

服务器端

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json");
        String username = req.getParameter("username");
//        创建map对象
        Map<Object,Object> map=new HashMap<Object,Object>();
        ObjectMapper mapper = new ObjectMapper();
        if(FindUser.Find_str(username)){
//            用户名已存在
            map.put("userExsit",true);
            map.put("msg","这个用户名太火爆了，再换一个吧");
        }else {
            //            用户名不存在
            map.put("userExsit",false);
            map.put("msg","可以使用");
        }
//        给resp输出流写入json数据
        mapper.writeValue(resp.getWriter(),map);

//        String json_data = mapper.writeValueAsString(map);
//        System.out.println(json_data);
    }

浏览器端

  <script>
    $(function () {
      $("#username").blur(function () {
          var username=$(this).val();
        $.get("../../ServerUserExsit",{"username":username},function (data) {
            if (data["userExsit"]){
                $("#s_username").html("<font color='red'>用户名太火爆了</font>");
            }else {
                $("#s_username").html("<font color='green'>可以使用</font>")
            }
        },"json");
      });
    });
  </script>

效果注册时候会实时的根据输入的用户名检索数据库中是否已经存在