web前端-json数据与Ajax异步交互

前言---加油，ajax和json总结终于完成，每天都要坚持！如有不足或错误之处，还请大家多多纠正，谢谢

json数据

数据交换格式：

json

xml

什么是JSON:

javascript对象表示法，是存储和交换信息的语法，类似xml，比xml更小更易解析

json对象：{"username":"zhangsan"}

json数组：[{"username":"zhangsan"},{"password":123},{ }]

json嵌套：{"username":{"age":18}}

基本上每一个语言都有一个包对json进行了解析

Ajax技术

什么是Ajax：
ajax是一种异步交互局部刷新的一种技术，减少服务器的压力，提高用户的体验

Ajax交互与传统交互的比较：

传统交互：页面整体刷新，服务器压力大，用户体验不好

Ajax异步交互：页面局部刷新，服务器压力小，用户体验好

Ajax异步交互的实现原理：

异步交互基于XMLHttpRequest对象的建立。

XMLHttpRequest对象：所有的浏览器基本支持XMLHttpRequest对象，他可以实现页面不重新加载的情况下实现页面的局部刷新，用于后台与服务器交换数据。

XMLHttpRequest对象的建立：

1、var xmlHttp = new XMLHttpRequest();

2 var xmlHttp = new ActiveXobject("Microsoft.XMLHTTP");

XMLHttpRequest.open(method,url,async);

methid参数:表示post请求或者get请求

url参数：请求的地址

async参数：异步true，同步false

XMLHttpRequest.send() :表示像服务器发送数据

onreadystatechange表示事件，当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时，我们才执行代码。

xmlhttp.status==200 //属相等于200表示成功

xmlhttp.readyState==4 //属性表示对象的状态

0：请求未初始化 1：服务器连接已建立 2：服务器请求已接收 3：服务器处理请求 4：请求吹完成并响绪就绪

获得来自服务器的响应：

获得字符串形式的响应数据：XMLHttpRequest.responseText

获得来自xml形式的相应数据：XMLHttpRequest.responseXMl

案例建立动态页面，使用Tomcat服务器servlet,代码如下：

<script type="text/javascript">
    var xmlHttp;
    if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }else if(window.ActiveXobject){
        xmlHttp = new ActiveXobject("Microsoft.XMLHTTP");
    }
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.ready==4 && xmlHttp.status==200){
            .......//成功
        }else{
           // 失败
        }

    xmlHttp.open(method,url,true);
    xmlHttp.send(); //向服务器发送数据
</script>

程序员老黄历案例

技术分析：

使用ajax技术异步提交数据

$.get(url,function(data,status){ }); url：表示提交的地址， function() 回调函数，data:返回的数据，

status：请求的状态

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>程序员老黄历</title>
    <link href="./css/laohuangli.css" rel="stylesheet">
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var  url= "http://127.0.0.1:8020/day05-bootStrap/data.json";
            //ajax请求
            $.get(url,function (data) {
                var shuju = data[4];
                // var a = $(".good .content").html();
                //适合干什么
                var goodCount = Math.floor(Math.random()*3+1);
                while (goodCount<0){//获取几条数据
                   var index = Math.floor(Math.random()*data.length); //获取一条数据
                    var obj = data[index];
                    $(".good ul").append("<li><div class='name'>"+obj.name+"</div><div class='description'>"+obj.good+"</div></li>");
                    goodCount--;
                }

                //不适合干什么
                var goodCount1 = Math.floor(Math.random()*3+3);
                while (goodCount<0){//获取几条数据
                    var index1= Math.floor(Math.random()*data.length); //获取一条数据
                    var obj1 = data[index1];
                    $(".bad ul").append("<li><div class='name'>"+obj1.name+"</div><div class='description'>"+obj1.bad+"</div></li>");
                    goodCount--;
                }
            },"json");
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="title">
            程序员老黄历
        </div>
        <div class="good">
            <div class="title">
                <table>
                    <tr>
                        <td>宜</td>
                    </tr>
                </table>
            </div>
            <div class="content">
                <ul>

                </ul>
            </div>
            <div class="clear"></div>
        </div>

        <div class="split"></div>

        <div class="bad">
            <div class="title">
                <table>
                    <tr>
                        <td>不宜</td>
                    </tr>
                </table>
            </div>
            <div class="content">
                <ul>

                </ul>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</body>
</html>