JS：AJAX和JSON

AJAX

原理

概念：ASynchronous JavaScript And XML，异步的JavaScirpt和XML

• 同步：客服端发送请求后，必须等待服务器的响应，再做其他事情；

• 异步：客服端发送请求后，不用等待服务器的响应，可以去做别的事情。

AJAX

• 不是新的编程语言，而是一种使用现有标准的新方法。

• 不用重新加载整个html页面，就可以与服务器交换数据，并更新部分网页的技术。

原理/流程：

• 编写ajax代码（js代码：创建XMLHttpRequest对象；发送XHR；处理接受响应数据）
• 浏览器发送请求（转给上面的js代码），服务器处理并响应（js接收响应）
• 使用js处理被返回的数据，更新部分网页。

实现方式：

1. 原生js方式（不推荐，需要的时候自己百度吧）
2. jquery方式（推荐，有三种）
   • $.ajax()
   • $.get()
   • $.post()

代码实现1

$.ajax()实现

html代码

<input type="button" id="btn" value="hahasfasdf" onclick="fun();">

<script>
    function fun() {
        // 发送异步请求
        $.ajax({
            url: "ajaxServlet", // 请求路径
            type: "POST", // 请求方式，默认GET
            data: {"username":"jack", "age":23},
            success: function (data) { // 响应成功后的回调函数
                alert(data);
            },
            error: function () {
                alert("出错啦")
            },
            dataType: "text", // 设置响应数据格式，建议用json
        });
    }
</script>

ajaxServlet代码

String username = req.getParameter("username");
System.out.println(username);
resp.getWriter().write("hello: " + username);

代码实现2

$.get和$.post参数形式一样

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

JSON

json语法

概念：JavaScript Object Notation，JavaScript对象表示法，是一门语法。

用处：json多用于存储和交换文本信息，比xml更小，更快，更易解析。

语法规则：

• json由键值对构成，键用引号引起来（单双都可以），也可以不用；

• json值的类型：数字，字符串，布尔值，数组，对象（花括号嵌套）

  <script>
      var person = {"name":"张三","age":18,"gender":true}
      var persons = [{"name":"aaa","age":18}, {"name":"bbb","age":20}]
      var arr = {"arr":[11,22,33,44,55]}
      alert(person.name);
      alert(person["name"]);
      alert(persons[0].name);
      alert(arr.arr[2]);
      // 遍历
      for (var key in person){
          alert(key + ": " + person[key]);
      }
      // js原生形式
      for (var i=0; i<persons.length;  i++){
      	var person = persons[i];
      	alert(person);
      }
  </script>
  

json解析器

json解析器，封装的工具类，常见的有：

• jsonlib：官方提供
• Gson：谷歌提供
• fastjson：阿里巴巴提供
• jackson：springMVC框架内置

java对象转json

1. 导入jackson的jar包
2. 创建Jackson核心对象ObjectMapper
3. 调用ObjectMapper的方法进行转换

Person person = new Person("张三", 23, "男");
ObjectMapper mapper = new ObjectMapper();
// 将java对象转成json，并存储
mapper.writeValue(new File("f://a.txt"), person);
String json = mapper.writeValueAsString(person);
System.out.println(json);

其他：

1. 注解

   • @JsonIgnore 排除属性（在java类定义的地方、需要排除属性的上面）

   • @JsonFormat(pattern="") 属性格式化，

     例如日期格式@JsonFormat(pattern="yyyy-MM-dd")

2. 复杂格式：可以转List<Object> ,Map<String, String>，代码和上面一样

json转java对象

用的比较少，了解即可。代码和上面一样，但是用到的方法是：

• readValue(json数据,Class)