五、Ajax 入门

Ajax其实 (Asynchronous Jascript And XML) ：是指异步 Javascript 以及XML, Ajax 不是一门新的技术、它也不是一门特有的语言。它是一种被 google 公司推广的一门旧的技术，新的用法。这里的旧的技术指的一套技术组合(DOM、CSS、Javascript、浏览器支持的 XMLHttpRequest 对象)

1. 原生方式开发 Ajax 步骤：

1. 创建 XMLHttpRequest 对象，考虑到 浏览器版本的问题，比如 IE6以下的版本就不支持 XMLHttpRequest 对象，但是支持 ActivieXObject。所有在创建 Ajax 核心对象，代码应该如下:

function getXHR() {
        //定义一个 ajax 核心对象的引用
        var xhr;
        if(window.XMLHttpRequest){
            //ie6以上支持的,其他的浏览器都支持
            xhr =  new XMLHttpRequest();
        }else {
            // ie6 以下支持的
            xhr =new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xhr;
}

2. 注册监听器监听 XMLHttpRequest 状态，使用 XMLHttpRequest 对象中的 onreadystatechange 事件

hrx.onreadystatechange = function () {
                if(hrx.readyState == 4 && hrx.status == 200) {
                    document.getElementById("showInfo").innerHTML = hrx.responseText;
                }
            }

3. 设置 ajax 连接信息,通过调用 XMLHttpRequest 中的open 方法

hrx.open("get","ajax.do",true);

4. 发送 ajax 请求 ，通过 调用 XMLHttpRequest 对象中的 send 方法

hrx.send();

完整代码:

1.1 XMLHttpRequest 核心对象详解

• XMLHttpRequest 核心对象中的属性
  readyState 属性：
  类型：返回的数据类型是 short 类型
  作用：表示XMLHttpRequest对象的当前状态
  具体含义:
  0：代表的XMLHttpRequest对象刚刚创建，但是还未初始化
  1:open方法已经被调用了
  2:send方法已经被调用了
  3:接受到了响应消息头，但是没有接受到正文
  4:接受到了响应正文，响应结束
  status 属性：
  类型：返回的数据类型 short
  作用：响应的状态码
  具体含义：200 成功响应,404 找不资源......
  statusText 属性：
  类型：返回的类型是String
  作用：对响应码的描述
  responseText属性：
  类型：返回的类型是 string
  作用：接受服务器返回的文本类型的正文数据
  responseXML属性：
  类型:返回的是docment对象(js中的文档模型)
  作用:接受服务器返回的XML类型的正文数据

• XMLHttpRequest 核心对象中的方法

open 方法：
方法：open（String method，String url，boolean async）
作用: 建立连接
参数解析：
method：ajax 请求方式 get 、 post
url：请求资源地址 eg: ajax.do
async ： ajax 请求是是否为异步 默认true，异步

send 方法：
方法：send（String data）
作用：发送 ajax 请求正文 数据，只有 post 方式，所有如果ajax 请求是get 方式，不能在 send 方法中设置请求数据，如果是post 方式在发送 正文数据前，应该设置请求头，
setRequestHeader（String headerName,String headerValue）; 设置请求消息头。
eg:hrx.setRequestHeader（"Content-type","application/x-www-form-urlencoded"）;

• XMLHttpRequest 核心对象中的事件 onreadystatechange
  作用：指向一个函数，用于做事件处理的，XMLHttpRequest对象的readyState的每次发生变化都会触发onreadystatechange指向的那个函数处理器。
  这个函数就是我们自己去编写

2.使用 Jquery 封装好的Ajax

Jquery 对原生的 Ajax 请求 进行三类封装:
第一类简单的封装:$.ajax(); 要讲
第二类进一步封装:$.get() 、$.post(); 要讲
第三类再再进一步封装:$.getJson 、$.getScript

2.1.$.ajax()

    //请求数据的格式： 1.key/value 数据格式
    //          2.json 数据格式
    var json = {"name":"John","location":"Boston"};
    $(function() {
        $("#sendAjax").click(function() {
            //1.发送ajax 请求
            $.ajax({type : "post",
                //请求资源地址
                url : "ajax.do",
                //请求携带的请求数据
                data : json,
                //readyState =4 state = 200 处理成功后的事件
                success : function(msg) {
                    //$("#showInfo").text(msg);
                    //console.info(msg);
                    alert(msg.name);
                    alert(msg.location);
                }
            });
        });
    }); 

2.2.$.get()

2.3.$.post()

3. JSON 入门

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。

JSON 建构于两种结构：

• “名称/值”对的集合（A collection of name/value pairs）。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组 （associative array）。
• 值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。

这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。

JSON具有以下这些形式：

• 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。

• 数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。

对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。

图片.png

数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。

图片.png

值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。

图片.png

JSON 工具

市面有很多的 JSON 转化工具，转化(JAVA 对象转换成 Json 格式的字符串，叫序列化；Json 格式的 字符串 转换成 Java 对象，叫反序列化)，
有 jackjson 工具、gson工具、fastjson工具(alibaba 温绍开发的)、json-lib 工具.......

• jackjson 工具
  先导包：
  jackson-annotations-2.8.10.jar
  jackson-core-2.8.10.jar
  jackson-databind-2.8.10.jar
  序列化：ObjectMapper mapper = new ObjectMapper();
  JAVABEAN:String json = mapper.writeValueAsString(u);
  List、set:String json = mapper.writeValueAsString(users);
  Map:String json = mapper.writeValueAsString(map);
  反序列化：
  javabean:mapper.readValue(json, UserModel.class);
  map:mapper.readValue(json, UserModel.class);
  list、set:mapper.readValue(json, new TypeReference>() {});

• fastjson 工具
  先导包: fastjson-1.2.31.jar
  序列化： JSON.toJSONString（javabean对象或者list set....），该方法在转化日期的时候，使用的是 时间戳类型进行转化。
  JSON.toJSONStringWithDateFormat(u, "yyyy-MM-dd"); 该日期格式的序列化方法
  JAVABEAN: {"age":18,"birth":1514182514315,"flag":true,"name":"test","password":"pass1111"}
  List、set:[{"age":18,"birth":1514182663609,"flag":true,"name":"test","password":"pass1111"},{"age":18,"birth":1514182663609,"flag":true,"name":"test","password":"pass1111"}]
  Map:
  {
  "k1": {
  "age": 18,
  "birth": 1514182824812,
  "flag": true,
  "name": "test",
  "password": "pass1111"
  },
  "k2": {
  "age": 18,
  "birth": 1514182824812,
  "flag": true,
  "name": "test",
  "password": "pass1111"
  }
  }
  注意：map 就是一个 javabean
  反序列化：JSON.parseObject(json, UserModel.class)
  JAVEAN:JSON.parseObject(json, UserModel.class)
  LIST、SET：JSON.parseArray(json, UserModel.class);
  MAP:JSON.parseObject(json, UserModel.class)