Ajax(二)

ajax:用于与后台进行交互

JQuery的方法

1.load(url, [data], function(response, status, xhr){})：用于局部刷新
data：发送到服务器的数据
response：响应回来的结果
status：相应的状态
xhr：HTMLHttpRequest对象，给机器看的

$("button").eq(0).click(function() {
    $("#box").load('http://www.liulongbin.top:3005/api/addproduct', {"name":"张三",                     
    "age":20}, function(res, status) {
       console.log(res);
       console.log(status); //status会显示获取成功或者失败
     })
})

2.get()

$("button").eq(1).click(function() {
    $.get('http://www.liulongbin.top:3005/api/getprodlist', function(res) {
        console.log(res);
    })
})

3.post()

$("button").eq(2).click(function() {
    $.post('http://www.liulongbin.top:3005/api/addproduct', {"name":"Cherry"},
    function(res) {
        console.log(res);
    })
})

JQuery中的Ajax

    <input type="text" value="123" name="aa">
    <button>添加</button>

    <script src="js/jquery-1.12.4.js"></script>
    <script>
        /* $.ajax({
            url: '请求的地址',
            type: '请求的类型get/post',
            data: '要发送到服务器的数据',
            dataType: '要求后台返回给我们的数据类型json',
            success: function() {请求成功所执行的函数},
            async: 请求是否异步处理，默认是true异步
        }) */

        $("button").click(function() {
            var value = $("input").val();
            console.log(value);
            $.ajax({
                url: 'http://www.liulongbin.top:3005/api/addproduct',
                type: 'post',
                // data: {'name': value},
                data: 'name=' + value,
                dataType: 'json',
                // 请求成功或者失败之前执行的函数
                beforeSend: function() {
                    console.log("请求成功或者失败之前执行的函数");
                },
                // 请求成功执行的函数
                success: function(data) {
                    console.log(data);
                },
                // 请求失败执行的函数
                error: function(data) {
                    console.log("失败");
                }
            })
        })
    </script>

关于跨域的问题

    Q：为什会出现跨域？

    A：跨域问题来源于JavaScript的同源策略。

    Q：什么是同源策略？

    A：只有 协议+主机名+端口号（如果存在）相同，则允许相互访问。

       也就是说JavaScript只能访问和操作自己域下的资源

       https://www.aaa.com/index.html 调用 https://www.aaa.com/demo.php（没有跨域）

       https://www.aaa.com/index.html 调用 https://www.aba.com/demo.php（跨域：主机名同）

       https://www.aaa.com:3000/index.html 调用 https://www.aaa.com:8080/demo.php（域：端口号不同）

       https://www.aaa.com/index.html 调用 http://www.aaa.com/demo.php（跨域：协议同）

    Q：如何解决跨域问题？

    header('Access-Control-Allow-origin:*');// 允许所有来源访问-->允许所有语言对我这个语言发起请求

    如果指定具体语言，把*换成请求过来的协议+主机名+端口号

    header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

jsonp：jsonp全称是JSON with Padding，是为了解决跨域请求资源而产生的解决方案，是一种依靠开发人员创造出的一种非官方跨域数据交互协议
json是描述信息的格式，jsonp是信息传递双方约定的方法

jsonp

    <script>
        function callbackFunction(result) {
            console.log(result);
        }
    </script>
    <!-- 使用jsonp实现跨域请求 -->
    <!-- 法一：利用script标签中src属性，设置请求地址，因为src不受同源策略的约束 -->
    <!-- <script src="https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script> -->

    <!-- 法二：使用JQuery封装的ajax -->
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        // $.ajax({
        //     url: 'https://www.runoob.com/try/ajax/jsonp.php?',
        //     type: 'get',
        //     dataType: 'jsonp',
        //     // 请求php的参数名
        //     jsonp: 'jsoncallback',
        //     // 参数值：
        //     jsonCallback: "callbackFunction",
        //     success: function(data) {
        //         console.log(data);
        //     },
        //     // 请求失败执行的函数
        //     error: function(data) {
        //         console.log("失败");
        //     }
        // })

        // 法三：使用$.getJSON()
        $.getJSON('https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?', function(data) {
            console.log(data);
        })
    </script>

类操作

JQuery操作类的方法：addClass() removeClass() toggleClass() hasClass()

H5有类似的API：要基于classList的属性，返回元素的类名 add() remove() toggle() contains() 判断类

        var li  = document.querySelector("li:nth-child(2)");
        // console.log(li);
        console.log(li.classList);// 返回元素类名的集合
        // 增加类
        li.classList.add("introl");
        // 移除类
        li.classList.remove("active");
        // 切换类
        li.classList.toggle("a");
        // 判断类
        console.log(li.classList.contains("active"));// 返回布尔值

自定义属性

    <script src="js/jquery-1.12.4.js"></script>
    <script>
        /* 
            自定义属性：data-***（属性名）
            作用：进行数据的缓存
            获取：JQuery方式：对象.data().属性名 || 对象.attr("data-***")
                  H5的方式：对象.dataset--->返回的是属性的集合
            设置：Jquery方式：对象.data("属性名")
                  H5的方式：对象.dataset.属性名 = *** 
        */

        var box = document.querySelector("div");
        // 获取
        console.log(box.dataset);
        console.log(box.dataset.username);
        console.log(box.dataset.ageId);
        console.log(box.dataset["ageId"]);// H5
        console.log($(".box").data().username);// JQuery

        // 设置
        box.dataset.sex = "男";
        console.log(box.dataset.sex);
        console.log($(".box").data().password);
        console.log($(".box").attr("data-username"));
    </script>

多媒体标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <audio controls autoplay src="videos/Taylor Swift - Welcome To New York.mp3"></audio>

    <!-- <video controls src="videos/trailer.mp4"></video> -->
    <video>
        <source src="videos/fun.mp4">
        <source src="videos/1.mp4">
        <source src="videos/trailer.mp4">
    </video>

    <button>播放</button>
    <button>暂停</button>
    <button>快进10秒</button>
    <button>后退10秒</button>
    <button>快速播放</button>
    <button>减速播放</button>
    <button>加大音量</button>
    <button>减小音量</button>
    <button>静音</button>
    <button>全屏</button>

    <script src="js/jquery-1.12.4.js"></script>
    <script>
        var v = $("video")[0];
        $("button").eq(0).click(function() {
            v.play();
        })
        $("button").eq(1).click(function() {
            v.pause();
        })
        $("button").eq(2).click(function() {
            v.currentTime += 10;
        })
        $("button").eq(3).click(function() {
            v.currentTime -= 10;
        })
        $("button").eq(4).click(function() {
            v.playbackRate = 5;
        })
        $("button").eq(5).click(function() {
            v.playbackRate = 0.5;
        })
        $("button").eq(6).click(function() {
            if(v.volume >= 1) {
                v.volume = 1;
            }else {
                v.volume += 0.1;
            }
        })
        $("button").eq(7).click(function() {
            var xx = v.volume - 0.3;
            if(xx <= 0) {
                v.volume = 0;
            }else {
                v.volume = xx;
            }
        })
        $("button").eq(8).click(function() {
            console.log(v.muted);
            if(v.muted) {
                v.muted = false;//开音
            }else {
                v.muted = true;// 静音
            }
        })
        $("button").eq(9).click(function() {
            v.webkitRequestFullScreen();// 有兼容性的问题
        })
    </script>
</body>
</html>