03.ajax复习-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_33938234/article/details/129459710

ajax复习

1. 为什么叫ajax

async JavaScript and XML
异步JavaScript和XML

2. jQuery发起ajax请求

$(function() {
            $("button").on("click", function() {
                // 发起get请求
                // res为服务器的返回
                $.get("http://www.liulongbin.top:3006/api/getbooks", {
                    id: 1
                }, function(res) {
                    console.log(res);
                });
            })
        })

post

 $(function() {
            $.post("http://www.liulongbin.top:3006/api/addbook", {
                bookname: '斗破苍穹',
                author: '天蚕土豆',
                publisher: '上海图书出版社'
            }, function(res) {
                console.log(res);
            })
        })

ajax

$.ajax({
    type:"请求方式",
    url:"请求地址",
    data:{
        携带的数据
    },
    // 成功时回调函数
    success:function(res){
        
    }
})

3. jquery中获取form表单所有书籍

$(".form1").on("submit", function(e) {
                // alert("表单提交事件");
                // console.log(e);

                // 阻止表单默认行为
                e.preventDefault();

                // 提交交给ajax
                var data = $(this).serialize();
                // 返回值为字符串
                console.log(data);
            })

data数据为username=xxx&age=xxx格式

4. art-template

模板引擎，具体看ajax第二天笔记

5. 使用xhr发起http请求

var xhr = new XMLHttpRequest();
        // 发起带参数的get请求

        xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1");
        xhr.send();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }

post请求

 // 创建xhr对象

        var xhr = new XMLHttpRequest();

        // 调用open函数，设置方式为post
        xhr.open('post', 'http://www.liulongbin.top:3006/api/addbook');

        // 设置Content-Type属性
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        // 调用send函数，传递要提交的数据

        xhr.send('bookname=一念永恒&author=耳根&publisher=上海图书出版社');

        //监听 onreadystatechange事件
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                console.log(xhr.responseText);
            }
        }

6. XML与HTML的区别

HTML用于描述网页上的内容，是网页内容的载体
XML被设计用于传输和存储数据，是数据的载体

7 . JSON

为何加JSON
- JavaScript object Notation：JavaScript对象表示法
- 就是JavaScript对象和数组的字符串表示法
- 本质字符串

8. XMLHttpRequest Level2的新特性

8.1 旧版xhr的缺点

只支持文本数据的传输，无法用来读取和上传文件
传输和接收数据时，没有进度信息，只能提示有没有完成

8.2 xhr 2的新功能

可以设置HTTP请求的时限
可以使用FormData对象管理表单数据
可以上传文件
可以获得数据传输的进度信息

8.3 xhr设置HTTP请求时限

设置xhr的timeout属性

xhr.timeout=300 // 单位毫秒

超时回调函数

xhr.ontimeout=function(){
    
}

8.4 xhr2 的formData对象

用于实现表单的数据收集

// 创建FormData 对象

		// 阻止表单默认提交

            e.preventDefault();
        var fd = new FormData();

        // 向FormData对象中添加数据

        fd.append("id", "2");

        // 创建xhr对象

        var xhr = new XMLHttpRequest();

        xhr.open("post", "http://www.liulongbin.top:3006/api/formdata");

        // 发送formdate对象
        xhr.send(fd);

8.5 xhr实现文件上传

包含进度条效果

<!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>
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <script src="./lib/jquery.js"></script>
</head>

<body>
    <!-- 选择文件按钮 -->
    <input type="file" id="select">

    <!-- 上传文件到服务器的按钮 -->
    <button id="upload">上传文件</button>

    <!-- 显示上传给服务器的图片 -->
    <img src="" alt="">


    <!-- 进度条效果 -->

    <div class="progress" style="width:300px">
        <div class="progress-bar progress-bar-striped active" style="width: 0">
            0%
        </div>
    </div>

    <script>
        // 获取上传按钮

        var upload = document.querySelector("#upload");
        var select = document.querySelector("#select");

        // 绑定点击事件

        upload.addEventListener("click", function() {
            // 判断是否选择了文件
            if (select.files.length > 0) {

                // 创建FormData对象

                var fd = new FormData();
                // 将文件加入fd中
                fd.append("avatar", select.files[0]);

                // 创建xhr对象

                var xhr = new XMLHttpRequest();

                // 监听文件上传的进度

                xhr.upload.onprogress = function(e) {
                    // 判断当前资源是否具有可计算的长度
                    if (e.lengthComputable) {
                        // e.loaded  已经上传的字节数
                        // e.total  上传的总字节数

                        console.log(Math.ceil(e.loaded / e.total * 100));

                        // 修改进度条的样式
                        $(".progress .progress-bar").css({
                            width: Math.ceil(e.loaded / e.total * 100) + '%'
                        }).html(Math.ceil(e.loaded / e.total * 100) + '%');
                    }
                }

                xhr.open("post", 'http://www.liulongbin.top:3006/api/upload/avatar');

                xhr.send(fd);

                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var res = JSON.parse(xhr.responseText);

                        // 根据服务器的返回信息判断是否上传成功
                        if (res.status === 200) {
                            console.log(res);
                            // 将服务器返回的url地址获取

                            document.querySelector("img").src = 'http://www.liulongbin.top:3006' + res.url;
                        } else {
                            alert("文件上传失败");
                        }
                    }
                }

            } else {
                return alert("请选择要上传的文件");
            }

        })
    </script>
</body>

</html>

8.8 监听文件上传成功

// 文件上传成功的回调函数
xhr.upload.onload = function() {
                    $(".progress .progress-bar").removeClass().addClass("progress-bar progress-bar-success");
                }

9. jQuery实现文件上传

// 判断是否有文件选中

        $(function() {
            $("#upload").on("click", function() {
                // 转换成dom对象判断是否有文件
                if ($("#select")[0].files.length > 0) {
                    var fd = new FormData();
                    fd.append("avatar", $("#select")[0].files[0]);

                    // 监听 ajax请求发起时的函数

                    $(document).ajaxStart(function() {
                        // 回调函数中显示加载的图片
                        $("#loading").show();
                    })

                    // 监听 ajax请求结束的函数 ajax

                    $(document).ajaxComplete(function() {
                        $("#loading").hide();

                    })

                    $.ajax({
                        method: "post",
                        url: 'http://www.liulongbin.top:3006/api/upload/avatar',
                        data: fd,
                        // 不修改content-Type的值，使用FormData默认的content-Type的值
                        contentType: false,
                        // 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
                        processData: false,
                        success: function(res) {
                            console.log(res);
                            $("#pic").attr("src", 'http://www.liulongbin.top:3006' + res.url)
                        }
                    })


                } else {
                    return alert("请先选择文件");
                }
            })
        })
    </script>

10 axios

axios.get('url',{params:{参数}}).then(回调函数)

post

axios.post('url',{参数}).then(回调函数)

所有

axios({
    method:'请求类型',
    url:'请求地址',
    data:{
        post请求的参数
    },
    params:{
        get请求参数
    }
}).then(回调函数)

11 JSONP突破跨域

 <!-- 在一个script标签中定义一个函数 -->
    <script>
        function success(data) {
            console.log("返回数据是:");
            console.log(data);
        }
    </script>

    <!-- 让服务器调用上述的函数-->

    <script src="http://www.liulongbin.top:3006/api/jsonp?callback=success&name=k&age=30">
    </script>

12 JSONP的缺点

原理是通过script标签的src属性，来实现跨域数据获取的，本质是js脚本请求，只能是get请求
JSONP 与ajax没有任何关系，ajax使用了xhr对象，而JSONP是js脚本请求

13 jQuery中的JSONP

jQuery中使用ajax函数发起jsonp请求
- 设置dataType：‘jsonp’

<!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>
    <script src="./lib/jquery.js"></script>
</head>

<body>
    <script>
        $(function() {
            $.ajax({
                url: "http://www.liulongbin.top:3006/api/jsonp?name=k&age=30",
                // 发起JSONP请求
                dataType: 'jsonp',
                success: function(res) {
                    console.log(res);
                }
            })
        })
    </script>
</body>

</html>

14 防抖

当事件被触发后，延迟n秒后再执行回调函数，如果在这n秒内事件又被触发，则重计时

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- 导入页面的基本样式 -->
    <link rel="stylesheet" href="./css/search.css" />
    <!-- 导入 jQuery -->
    <script src="./lib/jquery.js"></script>

    <script src="./lib/template-web.js"></script>
</head>

<body>
    <div class="container">
        <!-- Logo -->
        <img src="./images/taobao_logo.png" alt="" class="logo" />

        <div class="box">
            <!-- tab 栏 -->
            <div class="tabs">
                <div class="tab-active">宝贝</div>
                <div>店铺</div>
            </div>
            <!-- 搜索区域（搜索框和搜索按钮） -->
            <div class="search-box">
                <input type="text" class="ipt" placeholder="请输入要搜索的内容" /><button class="btnSearch">
            搜索
          </button>
            </div>

            <!-- 搜索建议的ui结构 -->
            <div class="tips">

            </div>
        </div>
    </div>

    <!-- 定义一个渲染的模板 -->
    <script type="text/html" id="tep-getTips">
        {{each result}}
        <div class="tips-item">{{$value[0]}}</div>
        {{/each}}
    </script>

    <script>
        $(function() {

            // 定义一个定时器

            var timer = null;

            // 定义一个缓存对象，存储服务器之前的搜索结果
            var cache = {};

            // 当搜索框中输入内容时，监听keyup事件

            // 事件多次触发，先消抖
            $(".ipt").on("keyup", function() {

                // 消除定时器
                clearTimeout(timer);
                var text = $(this).val().trim();
                if (text.length > 0) {

                    // 先判断cache中是否存在该搜索记录

                    if (cache[text]) {
                        var htmlstr = template('tep-getTips', cache[text]);
                        $(".tips").html(htmlstr).show();
                        return false;
                    }
                    // 发起内容匹配
                    // getTips(text);
                    // 延迟发起JSONP请求
                    debounceSearch(text);

                } else {
                    // 输入为空，隐藏建议列表
                    return $(".tips").html("").hide();
                }
            })


            // 创建一个获取提示词的函数
            function getTips(text) {
                $.ajax({
                    // 这个接口用于获取提示词
                    url: "https://suggest.taobao.com/sug?q=" + text,
                    // 发起跨域请求
                    dataType: "jsonp",

                    success: function(res) {
                        console.log(res);
                        // console.log(typeof res);
                        // 渲染ui页面，使用模板引擎
                        if (res.result.length < 0) {
                            //没有建议的数据
                            return $(".tips").html("").hide();
                        }
                        var htmlstr = template('tep-getTips', res);
                        $(".tips").html(htmlstr).show();
                        // 将数据存储到cache中，搜索记录作为键，结果作为值
                        cache[$(".ipt").val().trim()] = res;
                    }
                })

            }

            // 创建一个防抖函数，让用户输入完毕后再发起跨域请求
            function debounceSearch(text) {
                // 开启定时器
                timer = setTimeout(function() {
                    // 发起getTips请求
                    getTips(text);
                }, 500)
            }
        })
    </script>
</body>

</html>

15 节流

某事件在一段事件内被多次触发，但结果只执行一次

$(function() {
            var timer = null;
            $(document).on("mousemove", function(e) {
                if (timer) {
                    return;
                }


                timer = setTimeout(function() {
                    // 通过节流来控制计算的频率
                    $("img").css({
                        left: e.pageX,
                        top: e.pageY
                    })

                    console.log('ok');
                    timer = null;
                }, 16)
            })
        })