Web基础-JSON和AJAX

1.JSON

1.1 什么是 JSON?

• JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式(轻量级指的是跟xml做比较，数据交换指的是客户端和服务器之间业务数据的传递格式)
• 易于人阅读和编写。同时也易于机器解析和生成
• 采用完全独立于语言的文本格式，而且很多语言都提供了对 JSON的支持

1.2 在 JavaScript 中的使用

1.2.1 JSON的定义

• JSON是由键值对组成，并且由大括号包围。每个键由引号引起来，键和值之间使用冒号进行分隔，多组键值对之间进行逗号进行分隔：

// json的定义
var jsonObj = {
   "key1":12,
   "key2":"abc",
   "key3":true,
   "key4":[11,"arr",false],
   "key5":{
      "key5_1" : 551,
      "key5_2" : "key5_2_value"
   },
   "key6":[{
      "key6_1_1":6611,
      "key6_1_2":"key6_1_2_value"
   },{
      "key6_2_1":6621,
      "key6_2_2":"key6_2_2_value"
   }]
};

1.2.2 JSON 的访问

• JSON中的key可以理解为是对象中的一个属性，所以访问就跟访问对象的属性一样： JSON对象.key

alert(typeof(jsonObj));  // object  json就是一个对象
alert(jsonObj.key1);  //12
for(var i = 0; i < jsonObj.key4.length; i++) {
    alert(jsonObj.key4[i]);
}
alert(jsonObj.key5.key5_1);  //551
// 取出来每一个元素都是json对象
var jsonItem = jsonObj.key6[0];
alert( jsonItem.key6_1_1 ); //6611

1.2.3 常用方法

• JSON的存在有两种形式：
  • 对象的形式存在，一般要操作JSON中的数据的时候，需要JSON对象的格式
  • 字符串的形式存在，一般要在客户端和服务器之间进行数据交换的时候，使用JSON字符串。

// 把JSON对象转换成为JSON字符串
var jsonObjString = JSON.stringify(jsonObj);  // 特别像Java中对象的toString
alert(jsonObjString)
// 把JSON字符串转换成为JSON对象
var jsonObj2 = JSON.parse(jsonObjString);			
alert(jsonObj2)  // [object Object]
alert(jsonObj2.key1);  // 12

1.3 JSON在 Java 中的使用

• 需要导入gson-xxx.jar

1.3.1 javaBean 和 JSON 的互转

public void test1(){
    Person person = new Person(1,"psj");
    // 创建Gson对象实例
    Gson gson = new Gson();
    // toJson方法可以把java对象转换成为json字符串
    String personJsonString = gson.toJson(person);
    System.out.println(personJsonString);
    // fromJson把json字符串转换回Java对象
    // 第一个参数是json字符串
    // 第二个参数是转换回去的Java对象类型
    Person person1 = gson.fromJson(personJsonString, Person.class);
    System.out.println(person1);
}
// 输出：
{"id":1,"name":"psj"}
Person{id=1, name='psj'}

1.3.2 List 和 JSON 的互转

public void test2() {
    List<Person> personList = new ArrayList<>();

    personList.add(new Person(1, "psj"));
    personList.add(new Person(2, "psw"));

    Gson gson = new Gson();
    // 把List转换为json字符串
    String personListJsonString = gson.toJson(personList);
    System.out.println(personListJsonString);

    List<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType());
    System.out.println(list);
    Person person = list.get(0);
    System.out.println(person);
}
// PersonListType类
public class PersonListType extends TypeToken<ArrayList<Person>> {
}
// 输出：
[{"id":1,"name":"psj"},{"id":2,"name":"psw"}]
[Person{id=1, name='psj'}, Person{id=2, name='psw'}]
Person{id=1, name='psj'}

1.3.3 map 和 JSON的互转

public void test3(){
        Map<Integer,Person> personMap = new HashMap<>();

        personMap.put(1, new Person(1, "psj"));
        personMap.put(2, new Person(2, "psw"));

        Gson gson = new Gson();
        // 把 map 集合转换成为 json字符串
        String personMapJsonString = gson.toJson(personMap);
        System.out.println(personMapJsonString);

		// Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new PersonMapType().getType());
        Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new TypeToken<HashMap<Integer,Person>>(){}.getType());  // 直接使用匿名内部类即可

        System.out.println(personMap2);
        Person p = personMap2.get(1);
        System.out.println(p);
}
// PersonMapType类
public class PersonMapType extends TypeToken<HashMap<Integer, Person>> {
}
// 输出：
{"1":{"id":1,"name":"psj"},"2":{"id":2,"name":"psw"}}
{1=Person{id=1, name='psj'}, 2=Person{id=2, name='psw'}}
Person{id=1, name='psj'}

---

2.AJAX请求

2.1 什么是 AJAX 请求

• 即Asynchronous Javascript And XML（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术

• 浏览器通过 JS 异步发起请求，局部更新页面的技术

• 局部更新，即浏览器地址栏不会发生变化(不会舍弃原来页面的内容)

• 代码实现(体现异步和局部更新的特点)：

  • 局部更新：

  // BaseServlet类
  public abstract class BaseServlet extends HttpServlet {
      @Override
      protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
          doPost(req, resp);
      }
  
      protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
          // 解决post请求中文乱码问题
          // 一定要在获取请求参数之前调用才有效
          req.setCharacterEncoding("UTF-8");
          // 解决响应中文乱码
          resp.setContentType("text/html; charset=UTF-8");
          String action = req.getParameter("action");
          try {
              // 获取action业务鉴别字符串，获取相应的业务 方法反射对象
              Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);
              // 调用目标业务方法
              method.invoke(this, req, resp);
          } catch (Exception e) {
              e.printStackTrace();
              throw new RuntimeException(e);  // 把异常抛给Filter过滤器
          }
      }
  }
  // AjaxServlet类
  public class AjaxServlet extends BaseServlet {
      protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
          System.out.println("Ajax请求过来了");
          Person person = new Person(1, "psj");
          // json格式的字符串
          Gson gson = new Gson();
          String personJsonString = gson.toJson(person);
  
          resp.getWriter().write(personJsonString);
      }
  }
  

  // 在这里使用javaScript语言发起Ajax请求，访问服务器AjaxServlet中javaScriptAjax
  function ajaxRequest() {
     // 1、我们首先要创建XMLHttpRequest
     var xmlhttprequest = new XMLHttpRequest();
     // 2、调用open方法设置请求参数
     // true表示异步处理请求
     xmlhttprequest.open("GET","http://localhost:8080/JSON_AJAX/ajaxServlet?action=javaScriptAjax",true);
     // 4、在send方法前(正常逻辑下面代码应该放置在send方法后)绑定onreadystatechange事件，处理请求完成后的操作
     // 每次readyState改变就会触发onreadystatechange事件
     xmlhttprequest.onreadystatechange = function(){
        // 4表示请求已经完成且响应已就绪
        if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
           alert("收到服务器返回的数据：" + xmlhttprequest.responseText);
           var jsonObj = JSON.parse(xmlhttprequest.responseText);
           // 把响应的数据显示在页面上
           document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + " , 姓名：" + jsonObj.name;
        }
     }
     // 3、调用send方法发送请求
     xmlhttprequest.send();
  

  // 如果点击链接非Ajax后，地址栏会变为http://localhost:8080/JSON_AJAX/ajaxServlet?action=javaScriptAjax
  // 并且原本页面变为新页面只显示{"id":1,"name":"psj"}
  // 如果点击ajax request按钮会在原始页面上显示:编号：1 , 姓名：psj
  // 即页面中的其他位置元素并没有变化，只是在设置的div显示了内容，并且地址栏还是 
  // http://localhost:8080/JSON_AJAX/ajax.html
  <a href="http://localhost:8080/JSON_AJAX/ajaxServlet?action=javaScriptAjax">非Ajax</a>
  <button onclick="ajaxRequest()">ajax request</button>  
  <div id="div01"></div>
  

  • 异步：

  protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
      System.out.println("Ajax请求过来了");
      Person person = new Person(1, "psj");
      // 让服务器休眠3S
      try {
          Thread.sleep(3000);
      } catch (InterruptedException e) {
          e.printStackTrace();
      }
      // json格式的字符串
      Gson gson = new Gson();
      String personJsonString = gson.toJson(person);
  
      resp.getWriter().write(personJsonString);
  }
  

  function ajaxRequest() {
     var xmlhttprequest = new XMLHttpRequest();
     // 设置为同步处理请求
     xmlhttprequest.open("GET","http://localhost:8080/JSON_AJAX/ajaxServlet?action=javaScriptAjax",false);
     xmlhttprequest.onreadystatechange = function(){
        if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) {
           alert("收到服务器返回的数据：" + xmlhttprequest.responseText);
           var jsonObj = JSON.parse(xmlhttprequest.responseText);
           document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + " , 姓名：" + jsonObj.name;
        }
     }
     xmlhttprequest.send();
     alert("我是最后一行的代码");  // 用于查看当服务器因为休眠没有返回数据时会不会先执行alert
  

  // 此时点击ajax request后不会有任何显示，知道3s后才会依次显示"收到服务器返回的数据..."和"我是最后一行的代码"
  // 如果将xmlhttprequest.open中的false改为true，点击按钮后会立即显示"我是最后一行的代码"，过3s后显示"收到服务器返回的数据..."
  // 假设现在有多个按钮，如果不设置异步发起请求的话，点击其中一个按钮整个页面就卡住，需要等服务器返回数据才能点击其他按钮(即不会影响页面的其他功能)
  <button onclick="ajaxRequest()">ajax request</button>  
  <div id="div01"></div>
  

2.2 jQuery 中的 AJAX 请求

2.2.1 $.ajax 方法

• 参数如下：

  • url ：请求的地址

  • type ：请求的类型 GET 或 POST 请求

  • data ：发送给服务器的数据，格式有两种：

    • name=value&name=value

    • {key:value}

  • success ：请求成功后响应的回调函数

  • dataType ：服务器响应的数据类型，常用的数据类型有：

    • text ：纯文本
    • xml ： xml 数据
    • json ：json 对象

$(function(){
   // ajax请求
   $("#ajaxBtn").click(function(){
      $.ajax({
         url:"http://localhost:8080/JSON_AJAX/ajaxServlet",
         // data:"action=jQueryAjax",
         data:{action:"jQueryAjax"},
         type:"GET",
         // 这个data是返回的数据，不是上面的data属性
         success:function (data) {
             // 当dataTye是text时，需要执行下面两句将字符串转换为Jsond对象
             // alert("服务器返回的数据是：" + data);
             // var jsonObj = JSON.parse(data);
             // 当dataTye是json时，data就是json对象，可直接使用
             $("#msg").html(" ajax 编号：" + data.id + " , 姓名：" + data.name);
         },
         dataType : "json"
      });
   });
});

protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    System.out.println("  jQueryAjax == 方法调用了");
    Person person = new Person(1, "psj");
    // json格式的字符串
    Gson gson = new Gson();
    String personJsonString = gson.toJson(person);
    resp.getWriter().write(personJsonString);
}

<div>
    <button id="ajaxBtn">$.ajax请求</button>
    <button id="getBtn">$.get请求</button>
    <button id="postBtn">$.post请求</button>
    <button id="getJSONBtn">$.getJSON请求</button>
</div>
<div id="msg">

2.2.2 $.get 方法和$.post 方法

• 对$.ajax 方法的封装，参数如下：
  • url ：请求的 url 地址
  • data ：发送的数据
  • callback ：成功的回调函数
  • type ：返回的数据类型

// ajax--get请求
$("#getBtn").click(function(){
   $.get("http://localhost:8080/JSON_AJAX/ajaxServlet","action=jQueryGet",function (data) {
      $("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name);
   },"json");
   
});
// ajax--post请求
$("#postBtn").click(function(){
   // post请求
   $.post("http://localhost:8080/JSON_AJAX/ajaxServlet","action=jQueryPost",function (data) {
      $("#msg").html(" post 编号：" + data.id + " , 姓名：" + data.name);
   },"json");
   
});

protected void jQueryPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    System.out.println("  jQueryPost   == 方法调用了");
    Person person = new Person(1, "psj");
    // json格式的字符串
    Gson gson = new Gson();
    String personJsonString = gson.toJson(person);
    resp.getWriter().write(personJsonString);
}
protected void jQueryGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    System.out.println("  jQueryGet  == 方法调用了");
    Person person = new Person(1, "psj");
    // json格式的字符串
    Gson gson = new Gson();
    String personJsonString = gson.toJson(person);
    resp.getWriter().write(personJsonString);
}

2.2.3 $.getJSON 方法

• 对$.get方法的返回类型固定为JSON，参数如下：
  • url ：请求的 url 地址
  • data ：发送给服务器的数据
  • callback ：成功的回调函数

// ajax--getJson请求
$("#getJSONBtn").click(function(){
   $.getJSON("http://localhost:8080/JSON_AJAX/ajaxServlet","action=jQueryGetJSON",function (data) {
      $("#msg").html(" getJSON 编号：" + data.id + " , 姓名：" + data.name);
   });
});

protected void jQueryGetJSON(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    System.out.println("  jQueryGetJSON   == 方法调用了");
    Person person = new Person(1, "psj");
    // json格式的字符串
    Gson gson = new Gson();
    String personJsonString = gson.toJson(person);
    resp.getWriter().write(personJsonString);
}

2.2.4 表单序列化 serialize()

• serialize()可以把表单中所有表单项的内容都获取到，并以 name=value&name=value 的形式进行拼接

// ajax请求
$("#submit").click(function(){
   // 把表单进行参数序列化，执行$("#form01").serialize()后会把表单中的username="xxx"等以拼接的形式组合传给服务器
   $.getJSON("http://localhost:8080/JSON_AJAX/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
      $("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name);
   });
});

<form id="form01" >
   用户名：<input name="username" type="text" /><br/>
   密码：<input name="password" type="password" /><br/>
   下拉单选：<select name="single">
      <option value="Single">Single</option>
      <option value="Single2">Single2</option>
   </select><br/>
   下拉多选：
   <select name="multiple" multiple="multiple">
       <option selected="selected" value="Multiple">Multiple</option>
       <option value="Multiple2">Multiple2</option>
       <option selected="selected" value="Multiple3">Multiple3</option>
   </select><br/>
   复选：
   <input type="checkbox" name="check" value="check1"/> check1
   <input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
   单选：
   <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
   <input type="radio" name="radio" value="radio2"/> radio2<br/>
</form>
<button id="submit">提交--serialize()</button>

protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    System.out.println("  jQuerySerialize   == 方法调用了");

    System.out.println("用户名：" + req.getParameter("username"));
    System.out.println("密码：" + req.getParameter("password"));
    Person person = new Person(1, "psj");
    // json格式的字符串
    Gson gson = new Gson();
    String personJsonString = gson.toJson(person);
    resp.getWriter().write(personJsonString);
}

---