ajax复习

ajax复习

1. 为什么叫ajax

  • async JavaScript and XML
  • 异步JavaScript和XML

2. jQuery发起ajax请求

  • get
$(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请求

  • get
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

  • get
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)
            })
        })
posted @   凌歆  阅读(15)  评论(0)  编辑  收藏  举报
相关博文：
· ajax学习第三天
· ajax 学习第四天
· ajax笔记
· 前端Ajax-Day32
· day22 ajax
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示