03.ajax复习

洪鸿博

2023-12-01

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)
            })
        })

03.ajax复习

ajax复习

1. 为什么叫ajax

2. jQuery发起ajax请求

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

4. art-template

5. 使用xhr发起http请求

6. XML与HTML的区别

7 . JSON

8. XMLHttpRequest Level2的新特性

8.1 旧版xhr的缺点

8.2 xhr 2的新功能

8.3 xhr设置HTTP请求时限

8.4 xhr2 的formData对象

8.5 xhr实现文件上传

8.8 监听文件上传成功

9. jQuery实现文件上传

10 axios

11 JSONP突破跨域

12 JSONP的缺点

13 jQuery中的JSONP

14 防抖

15 节流

相关阅读

相关文章

相关问答

相关文档