AJAX

原生JS参考网址:https://www.runoob.com/ajax/ajax-tutorial.html

  1. 1. 概念： ASynchronous JavaScript And XML    异步的JavaScript 和 XML
  2.     1. 异步和同步：客户端和服务器端相互通信的基础上
  3.         * 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
  4.         * 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
  6.         Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1] 
  7.         通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
  8.         传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
  10.         提升用户的体验
  12. 2. 实现方式：
  13.     1. 原生的JS实现方式（了解）
  14.                  //1.创建核心对象
  15.                 var xmlhttp;
  16.                 if (window.XMLHttpRequest)
  17.                 {// code for IE7+, Firefox, Chrome, Opera, Safari
  18.                     xmlhttp=new XMLHttpRequest();
  19.                 }
  20.                 else
  21.                 {// code for IE6, IE5
  22.                     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  23.                 }
  25.                 //2. 建立连接
  26.                 /*
  27.                     参数：
  28.                         1. 请求方式：GET、POST
  29.                             * get方式，请求参数在URL后边拼接。send方法为空参
  30.                             * post方式，请求参数在send方法中定义
  31.                         2. 请求的URL：
  32.                         3. 同步或异步请求：true（异步）或 false（同步）
  34.                  */
  35.                 xmlhttp.open("GET","ajaxServlet?username=tom",true);
  37.                 //3.发送请求
  38.                 xmlhttp.send();
  40.                 //4.接受并处理来自服务器的响应结果
  41.                 //获取方式 ：xmlhttp.responseText
  42.                 //什么时候获取？当服务器响应成功后再获取
  44.                 //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
  45.                 xmlhttp.onreadystatechange=function()
  46.                 {
  47.                     //判断readyState就绪状态是否为4，判断status响应状态码是否为200
  48.                     if (xmlhttp.readyState==4 && xmlhttp.status==200)
  49.                     {
  50.                        //获取服务器的响应结果
  51.                         var responseText = xmlhttp.responseText;
  52.                         alert(responseText);
  53.                     }
  54.                 }
  55.     2. JQeury实现方式
  56.         1. $.ajax()
  57.             * 语法：$.ajax({键值对});
  58.              //使用$.ajax()发送异步请求
  59.                 $.ajax({
  60.                     url:"ajaxServlet1111" , // 请求路径
  61.                     type:"POST" , //请求方式
  62.                     //data: "username=jack&age=23",//请求参数
  63.                     data:{"username":"jack","age":23},
  64.                     success:function (data) {
  65.                         alert(data);
  66.                     },//响应成功后的回调函数
  67.                     error:function () {
  68.                         alert("出错啦...")
  69.                     },//表示如果请求响应出现错误，会执行的回调函数
  71.                     dataType:"text"//设置接受到的响应数据的格式
  72.                 });
  73.         2. $.get()：发送get请求
  74.             * 语法：$.get(url, [data], [callback], [type])
  75.                 * 参数：
  76.                     * url：请求路径
  77.                     * data：请求参数
  78.                     * callback：回调函数
  79.                     * type：响应结果的类型
  81.         3. $.post()：发送post请求
  82.             * 语法：$.post(url, [data], [callback], [type])
  83.                 * 参数：
  84.                     * url：请求路径
  85.                     * data：请求参数
  86.                     * callback：回调函数
  87.                     * type：响应结果的类型

JSON：

JSON在线教程 ： https://www.runoob.com/json/json-tutorial.html

  1. 1. 概念： JavaScript Object Notation        JavaScript对象表示法
  2.     Person p = new Person();
  3.     p.setName("张三");
  4.     p.setAge(23);
  5.     p.setGender("男");
  7.     var p = {"name":"张三","age":23,"gender":"男"};
  9.     * json现在多用于存储和交换文本信息的语法
  10.     * 进行数据的传输
  11.     * JSON 比 XML 更小、更快，更易解析。
  13. 2. 语法：
  14.     1. 基本规则
  15.         * 数据在名称/值对中：json数据是由键值对构成的
  16.             * 键用引号(单双都行)引起来，也可以不使用引号
  17.             * 值得取值类型：
  18.                 1. 数字（整数或浮点数）
  19.                 2. 字符串（在双引号中）
  20.                 3. 逻辑值（true 或 false）
  21.                 4. 数组（在方括号中）    {"persons":[{},{}]}
  22.                 5. 对象（在花括号中） {"address":{"province"："陕西"....}}
  23.                 6. null
  24.         * 数据由逗号分隔：多个键值对由逗号分隔
  25.         * 花括号保存对象：使用{}定义json 格式
  26.         * 方括号保存数组：[]
  27.     2. 获取数据:
  28.         1. json对象.键名
  29.         2. json对象["键名"]
  30.         3. 数组对象[索引]
  31.         4. 遍历
  32.                  //1.定义基本格式
  33.                 var person = {"name": "张三", age: 23, 'gender': true};
  35.                 var ps = [{"name": "张三", "age": 23, "gender": true},
  36.                     {"name": "李四", "age": 24, "gender": true},
  37.                     {"name": "王五", "age": 25, "gender": false}];
  38.                 //获取person对象中所有的键和值
  39.                 //for in 循环
  40.                 /* for(var key in person){
  41.                 //这样的方式获取不行。因为相当于  person."name"
  42.                 //alert(key + ":" + person.key);
  43.                 alert(key+":"+person[key]);
  44.                 }*/
  46.                 //获取ps中的所有值
  47.                 for (var i = 0; i < ps.length; i++) {
  48.                     var p = ps[i];
  49.                     for(var key in p){
  50.                     alert(key+":"+p[key]);
  51.                     }
  52.                 }
  1. 3. JSON数据和Java对象的相互转换
  3.     * JSON解析器：
  4.         * 常见的解析器：Jsonlib，Gson，fastjson，jackson
  6.     1. JSON转为Java对象
  7.         1. 导入jackson的相关jar包
  8.         2. 创建Jackson核心对象 ObjectMapper
  9.         3. 调用ObjectMapper的相关方法进行转换
  10.             1. readValue(json字符串数据,Class)
  11.     2. Java对象转换JSON
  12.         1. 使用步骤：
  13.             1. 导入jackson的相关jar包
  14.             2. 创建Jackson核心对象 ObjectMapper
  15.             3. 调用ObjectMapper的相关方法进行转换
  16.                 1. 转换方法：
  17.                     *（了解） writeValue(参数1，obj):
  18.                         参数1：
  19.                             File：将obj对象转换为JSON字符串，并保存到指定的文件中
  20.                             Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
  21.                             OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
  22.                     *（重点） writeValueAsString(obj):将对象转为json字符串
  24.                 2. 注解：
  25.                     1. @JsonIgnore：排除属性。
  26.                     2. @JsonFormat：属性值得格式化
  27.                         * @JsonFormat(pattern = "yyyy-MM-dd")
  29.                 3. 复杂java对象转换
  30.                     1.（重点） List：数组
  31.                     2.（了解） Map：对象格式一致

案例：

  1. * 校验用户名是否存在
  2.     1. 服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：
  3.         1. $.get(type):将最后一个参数type指定为"json"
  4.         2. 在服务器端设置MIME类型
  5.             response.setContentType("application/json;charset=utf-8");