杂记-3

一、Ajax

1.Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是一种创建交互式Web应用的网页开发技术。

2.Ajax的作用

        在不重新加载整个网页的情况下，只更新部分网页。

3.Ajax的使用场景

1）注册登录

2）异步提交、删除、编辑、分页

3）异步渲染、自动补全

4）异步渲染、局部刷新

5）单页面应用

.......

4.Ajax的使用

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。

通过Jquery封装的ajax方法来完成Ajax的异步请求，其格式如下：

$.ajax({
      type:"请求方法，一般为GET/POST",
      url:"请求路径",
      data:{
          //要提交的数据
      },
      dataType:"预期服务器返回的数据类型，一般有text、xml、json、html等",
      async: false,//默认为true，为异步请求，设置此项的目的是为了同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式
      /*。。。其他的属性。。。*/
      success:function(data){
        //请求成功回调函数
      },
      error:function(){
        //请求失败的回调函数
      }
});

二、JSON

1.JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

2.JSON 与 JS 对象的关系

（1）JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。

（2）JSON 和 JS 对象互转

         1）要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}

         2）要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'

3.Jackson

Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象和xml文档，同样也可以将json、xml转换成Java对象。Jackson所依赖的jar包较少，简单易用并且性能也要相对高些，并且Jackson社区相对比较活跃，更新速度也比较快。————摘自易百教程（原文链接：https://www.yiibai.com/jackson/）

（1）需要的jar包

        jackson-annotations-2.6.0-rc4.jar

        jackson-core-2.6.0-rc4.jar

        jackson-databind-2.6.0-rc4.jar

（2）前台发送Ajax的请求到后台，后台向写出到前台

@Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        //省略部分代码
        ObjectMapper mapper = new ObjectMapper();
        PrintWriter out = resp.getWriter();
        //省略部分代码
        String initUserInfo = mapper.writeValueAsString(userInfo);
        out.print(initUserInfo);
    }

（3）前台接收后台写出的数据

$.ajax({
    type:"POST",
    url:"请求路径",
    data:{
        //参数
    },
    dataType:"json",  //这里设置了返回数据类型后，在成功回调函数中可以不再需要再次进行解析了$.parseJSON(data)
    success:function(data){
        var data2JSON = $.parseJSON(data);
        //其他操作
    }
});