Ajax、Json深入浅出，及原生Ajax及简化版Ajax

本文介绍: 通过对ajax的就绪状态做判断，我们在就绪状态是4的情况下编写我们的对响应结果的处理逻辑代码，但是不是任何响应结果我们都要处理，因为服务器的响应也有状态码，比如：200、404、500等等。在ajax 对象中提供了一个监听机制 “on ready state change”，用来监听 ajax的属性 readySta t e的改变情况，一旦该值改变，就会触发监听中的函数的执行。发送请求后，不需要等待服务端的响应，继续按照顺序执行其他逻辑代码，监听到响应，自动调用指定的方法。

在Ja vaWe b中，路径分为相对路径和绝对路径两种：

相对路径：

./ 表示当前目录(可省略)

绝对路径：

http://ip:port/工程名/资源路径

// 页面加载完成后执行  或者 $(function(){})   或 $(document).ready(function (){})
window.onload = function () {
    /*
    * ajax 异步请求 获取花卉信息
    *   异步：程序不需要等待获取结果，线程直线完成后通知程序，程序获取  例如 AIO  异步非阻塞IO
    *   同步：程序需要等待线程获取结果后，程序才能继续执行  例如：BIO 同步阻塞IO   NIO 同步非阻塞IO
    * 1. 创建xhr XMLHttpRequest对象
    * 2. 开启请求连接
    *       参数1：请求方式
    *       参数2：请求资源路径
    *       参数3：asyn 异步，默认true，设置false为同步
    * 3. 发送请求
    * 4. 监听准备状态码的变化
    *       0. 已创建xhr对象，未建立连接
    *       1. 建立连接，未发送请求
    *       2. 发送请求，服务端接收请求并处理
    *       3. 服务端向客户端响应，不是完整的响应，通常用于获取请求头中的信息
    *       4. 服务端完成向客户端的响应
    *    状态码200 接口请求响应成功
    * */
    var xhr = new XMLHttpRequest(); // 创建ajax请求对象
    xhr.open("get", "../findAllFlowers"); // 开启连接
    xhr.send(); // 发送请求
    // 监听准备状态的改变
    xhr.onreadystatechange = function (ev) {
        if (xhr.readyState == 4 &amp;&amp; xhr.status) {
            var responseText = xhr.responseText;
            console.log(responseText);
            if (responseText != "fail") {
                // var result = convertStrToJs(responseText);
                var result = JSON.parse(responseText);
                for(var i in result){
                    var html = "<tr class='tr"+result[i].id+"'>" +
                        "    <td>"+result[i].id+"</td>" +
                        "    <td>"+result[i].name+"</td>" +
                        "    <td>"+result[i].city+"</td>" +
                        "    <td>"+result[i].des+"</td>" +
                        "    <td>" +
                        "        <a href='javascript:void(0)' onclick='deleteFlower("+result[i].id+")'>删除</a>" +
                        "        <a href='javascript:void(0)'>修改</a>" +
                        "    </td>" +
                        "</tr>";
                    $("#tb").append(html); // 追加元素
                }
            }
        }
    }
}