ajax 学习第四天

最新推荐文章于 2024-07-18 17:39:42 发布
最新推荐文章于 2024-07-18 17:39:42 发布
阅读量550 收藏
点赞数
分类专栏： ajax 文章标签： ajax 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33938234/article/details/123385684
版权

ajax 学习第四天

文章目录

1. 同源策略

1.1 同源

  • 定义：如果**两个页面的协议，域名和端口都相同**，则两个页面具有相同的源
  • 图解

在这里插入图片描述

1.2 同源策略

  • 浏览器提供的一个安全功能

  • 概念：浏览器规定，A网站的JavaScript，不允许与非同源的网站C之间，进行资源的交互

    • 无法读取非同源网页的Cookies、localStorage、IndexedDB
    • 无法接触非同源网页的DOM
    • 无法向非同源地址发起Ajax请求

2. 跨域

  • 同源的反义词
  • 浏览器的同源策略导致的

2.1 跨域拦截

在这里插入图片描述

2.2 实现跨域数据请求

  • 两种解决方案
    • JSONP
    • CORS
  • JSONP：兼容性好(兼容低版本IE),只支持GET请求，不支持POST请求
  • CORS：W3C标准，属于跨域Ajax请求的根本解决方案，支持GET和POST请求，不兼容低版本IE

3. JSONP

  • JSONP（JSON with Padding）是JSON的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题

3.1 JSONP 实现的原理

  • 原理：由于浏览器同源策略的限制，网页中无法提供Ajax请求

    非同源的接口数据，但是<script>标签不受浏览器的影响，可以通过src属性，请求非同源的js脚本

  • 同源策略的限制

<!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>
        $.ajax({
            method: "get",
            url: 'http://www.liulongbin.top:3006/api/jsonp',
            data: {
                name: "k",
                age: 18
            },
            succsee: function(res) {
                console.log(res);
            }
        })
    </script>
</body>

</html>
  • 效果图

在这里插入图片描述

3.2 JSONP 原理剖析

  • 在本地script标签定义一个回调函数
  • 通过另一个script标签的src属性让服务器去执行这个函数
<!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>
    <!-- 在一个script标签中定义一个函数 -->
    <script>
        function success(data) {
            console.log("返回数据是:");
            console.log(data);
        }
    </script>

    <!-- 在另一个script标签中调用上面script标签的函数 -->

    <script src="./js/test.js"></script>
</body>

</html>
  • 本地js文件
// 调用success函数

success({ name: "k", age: 18 });
  • 效果图

在这里插入图片描述

当src属性为服务器的接口时
<!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>
    <!-- 在一个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>
</body>

</html>
  • 效果图

在这里插入图片描述

3.3 JSONP的缺点

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

3.4 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>
  • 效果图

在这里插入图片描述

在这里插入图片描述

注意点
  • url地址中会自动携带一个callback=jqueryxxx的参数，jQuery是随机生成的一个回调函数名称
自定义jQuery中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',

                dataType: 'jsonp',
                // 自定义jsonp参数和回调函数的名称

                jsonp: 'callback',

                jsonpCallback: 'abc',

                success: function(res) {
                    console.log(res);
                }
            })
        })
    </script>
</body>

</html>
  • 效果图

在这里插入图片描述

3.5 jQuery中JSONP的实现过程

  • 动态的创建和移除script标签来实现
  • 发起JSONP请求是，在head标签中创建一个script标签
  • JSONP请求完成时，移除head标签中的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>
    <script src="./lib/jquery.js"></script>
</head>

<body>

    <button id="btn">发起JSONP请求</button>
    <script>
        $(function() {

            $("#btn").on("click", function() {
                $.ajax({
                    url: 'http://www.liulongbin.top:3006/api/jsonp?name=k&age=30',

                    dataType: 'jsonp',
                    // 自定义jsonp参数和回调函数的名称

                    jsonp: 'callback',

                    jsonpCallback: 'abc',

                    success: function(res) {
                        console.log(res);
                    }
                })
            })

        })
    </script>
</body>

</html>
  • 效果图

在这里插入图片描述

4. 防抖

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

  • 原理：setTimeout()定时器的应用

  • 图解

在这里插入图片描述

4.1 输入框的防抖

  • 当用户输入完内容后，才进行建议词的提示，最终只发起了一次JSONP请求
示例:1个淘宝搜索案例

  • 实现根据用户输入的部分内容给出提示词

  • **实现消抖：**再用户输入完毕后才发起请求获取搜索提示信息

  • 实现结果缓存，用户的搜索结果再本地存储起来，当用户搜索同一关键字时，不需要再向服务器发起请求，而是本地获取

  • css部分

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}

.logo {
    width: 225px;
    height: 65px;
    margin: 50px 0;
}

.tabs {
    display: flex;
}

.tabs>div {
    width: 55px;
    height: 23px;
    line-height: 23px;
    text-align: center;
    cursor: pointer;
}

.tabs>div:hover {
    text-decoration: underline;
    color: #ff5700;
}

.tab-active {
    background-color: #ff5700;
    font-weight: bold;
    color: white;
}

.tabs>.tab-active:hover {
    color: white;
    text-decoration: none;
}

.search-box {
    display: flex;
    align-items: center;
}

.search-box .ipt {
    box-sizing: border-box;
    width: 500px;
    height: 34px;
    line-height: 30px;
    margin: 0;
    padding: 0;
    padding-left: 5px;
    outline: none;
    border: 2px solid #ff5700;
}

.btnSearch {
    margin: 0;
    height: 34px;
    border: none;
    background-color: #ff5700;
    color: white;
    letter-spacing: 1em;
    text-align: center;
    width: 90px;
    padding-bottom: 5px;
    outline: none;
    cursor: pointer;
}

.btnSearch:hover {
    opacity: 0.9;
}

.tips .tips-item {
    height: 25px;
    /* background-color: pink; */
    line-height: 22px;
    font-size: 14px;
    padding-left: 2px;
    padding-top: 2px;
    box-sizing: border-box;
    margin-top: 5px;
    cursor: pointer;
}

.tips .tips-item:hover {
    background-color: rgb(221, 221, 221);
}
  • html部分
<!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>
  • 效果图

在这里插入图片描述

5.节流

  • 某事件在一段时间内被多次触发，当结果只执行一次

在这里插入图片描述

  • 实现原理：定时器
一个案例
<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        img {
            position: absolute;
        }
    </style>
</head>

<body>
    <!-- 天使图片，跟随鼠标移动 -->
    <img src="./angel.gif" alt="">


    <script>
        $(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)
            })
        })
    </script>
</body>

</html>
  • 效果图

在这里插入图片描述

凌歆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax学习
qq_45895217的博客
12-29 1165
Ajax学习
Ajax学习笔记第01天
贤蛋大眼萌
04-28 858
Ajax学习笔记第01天 1. 客户端与服务器 1.1 客户端与服务器器 上网的目的：通过互联网的形式来获取和消费资源 服务器：在上网过程中，负责存放和对外提供资源的电脑，叫做服务器 客户端：在上网过程中，负责获取和消费资源的电脑，叫客户端 1.2 URL地址 URL（全称是Uniform Resource Locator ）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。 常见的URL： http://www
Ajax 学习
2302_79523175的博客
05-14 936
AJAX全称为Asynchronous JavaScript And XML，就是异步的JS和XML。通过AJAX可以在浏览器中向服务器发送异步请求无刷新获取数据。AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。懒加载页面滚动到底之后在进行刷新新的内容用户名已被其他用户设置小米商城网页上端下拉表单的内容显示XML可扩展标记语言。XML被设计用来传输和存储数据。XML和HTML类似，不同的是HTML中都是预定义标签；XML中没有预定义标签，
Ajax学习第一天
qq_46435701的博客
03-02 55
1.客户端和服务器 2.URL地址 3.通信过程 4.请求数据 5.Ajax 6.接口
Ajax学习笔记
2301_82244607的博客
04-28 928
XMLHttpRequest()：创建 XHR 对象的构造函数status：响应状态码值，如 200、404statusText：响应状态文本，如 ’ok‘、‘not found’readyState：标识请求状态的只读属性 0-1-2-3-4onreadystatechange：绑定 readyState 改变的监听responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应response：响应体数据，类型取决于 responseType 的指定。
AJAX 学习
weixin_43466639的博客
05-04 1284
AJAX 一、基本理论 1、定义 AJAX 是一种从网页访问 Web 服务器的异步无刷新技术。 异步：同步是必须等待请求返回结果之后，才能继续其他操作。异步是可以在等待的时间里去继续其他操作，当响应就绪后对响应进行处理。 无刷新：按需加载。（当点击查看更多的时候，就会结合DOM向服务器请求将数据追加进去，并没有刷新页面） 无刷新场景：如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然
ajax学习
梦想闹钟
12-26 664
ajax学习
ajax的学多久,ajax第二天学习
weixin_35721739的博客
08-06 427
post方式发送请求要首先设置请求头(参数设置为ajax.setRequestHeader("content-type","application/x-www-form-urlencoded")-->send中放入要发送的参数(key=value&key=value)-->发送数据(ajax.send(context))当xml作为载体的时候servlet中声明发送的格式为xm...
AJAX学习笔记1发送Get请求
tiantiantbtb的博客
09-03 686
超链接请求 ---->绝对路径。第二：请求路径已经被浏览器缓存过了。超链接请求
Ajax学习第四天的代码
10-30
在"Ajax学习第四天的代码"中，我们可以推测这是一个学习教程或实例，涵盖了Ajax的基本用法和常见应用场景。 首先，`index.html`是网页的主文件，它包含了页面的结构和内容。在这个Ajax的学习过程中，`index.html`...
开始研究Ajax. 第一天
12-07
第一天首先，我是一个不适合学习程序的人，也不喜欢，因为我非常马虎，每次都会写错很多代码。不过出于对DOM，JS，CSS热爱，还是开始研究Ajax了。什么是Ajax?我答：首先Ajax的四个组成部分为[XMLHttpRequest]，...
ajax学习笔记代码
03-19
**第四天：进阶应用** 1. **jQuery与Ajax**：使用jQuery库简化Ajax操作，如`$.ajax()`，`$.get()`和`$.post()`。 2. **局部刷新**：利用Ajax更新DOM元素，实现局部刷新效果。 3. **跨域请求**：了解CORS（跨源...
揭开AJAX神秘的面纱(AJAX个人学习笔记)第1/5页
01-19
AJAX技术是多种计算机技术的结晶，它的名称来自：Asynchronism(异步)、JavaScript、And、XML这4个单词首字母，即异步JavaScript请求处理XML技术。简单的描述就是数据异步传输网页局部刷新的技术。AJAX很流行，WEB...
Spark学习之SparkSQL
m0_58050808的博客
07-16 536
Spark SQL中的DataFrame DSL（Domain Specific Language，领域特定语言）是一种用于处理DataFrame的编程风格，它允许开发者以命令式的方式，通过调用API接口来操作DataFrame。这种风格**介于代码和纯SQL之间，**提供了一种更加灵活和强大的数据处理方式。DataFrame DSL（Domain Specific Language，领域特定语言）中的。idea里面将代码编写好打包上传到集群中运行，上线使用。
webSocker消息推送，ajax轮询
weixin_43617604的博客
07-18 406
但是，传统的AJAX并不直接支持实时消息推送，因为它基于请求-响应模式。为了模拟消息推送，你可以使用轮询（polling）或长轮询（long-polling）技术。但是，传统的AJAX并不直接支持实时消息推送，因为它基于请求-响应模式。为了模拟消息推送，你可以使用轮询（polling）或长轮询（long-polling）技术。一旦建立了WebSocket连接，服务器和客户端就可以随时向对方发送消息，而不需要像AJAX那样频繁地发起请求。轮询是定期向服务器发送请求，以检查是否有新的消息。
ajax实时监测与springboot的实例分析
羽墨墨的博客
07-16 516
ajax实时监测和springboot举例分析
【.NET全栈】ASP.NET开发Web应用——AJAX开发技术
最新发布
JosieBook
07-18 937
AJAX技术是这几年中出现的较为热闹的技术。大多数的Web开发者都已经关注，或正在使用AJAX。AJAX全称是Asynchironous JavaScript and XML。中文称为异步JavaScript和XML。AJAX本身不能称为一门技术、语言或者软件。它是由多种技术组合，这些技术存在了很多年，现在借助于AJAX组合，称为一种新的开发模式。认识ASP.NET AJAXASP.NET AJAX服务器扩展ASP.NET AJAX服务器端控件扩展。
使用AJAX发起一个异步请求，从【api_endpoint】获取数据，并在成功时更新页面上的【target_element】
xixixixixixixi21的博客
07-18 223
在Web开发中，使用AJAX（Asynchronous JavaScript and XML，异步JavaScript和XML）可以实现在不刷新整个页面的情况下，向服务器发送请求并获取数据。// 发送请求xhr.send();在这个例子中，onload事件会在请求完成且成功时触发，然后我们处理返回的数据并更新指定的HTML元素内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值