为什么标签没被删除

为什么标签没被删除

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <title>123</title>

    <link rel="stylesheet" href="css/style.css">

    <script src="js/jquery-3.1.1.min.js"></script>

</head>


<body>

    <div class="banner" id="banner"></div>

    <script>

        // 封装通用的xhr,兼容各个版本

        function createXHR() {

            //判断浏览器是否将XMLHttpRequest作为本地对象实现,针对IE7,Firefox,Opera等浏览器

            if (typeof XMLHttpRequest != "undefined") {

                return new XMLHttpRequest();

            } else if (typeof ActiveXObject != "undefined") {

                //将所有可能出现的ActiveXObject版本放在一个数组中

                var xhrArr = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0',

                    'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'

                ];

                //遍历创建XMLHttpRequest对象

                var len = xhrArr.length;

                for (var i = 0; i < len; i++) {

                    try {

                        //创建XMLHttpRequest对象

                        xhr = new ActiveXObject(xhrArr[i]);

                        //如果创建XMLHttpRequest对象成功,则跳出循环

                        break;

                    } catch (ex) {}

                }

            } else {

                throw new Error("No XHR object available.");

            }

        }

        var xhr = createXHR(),

            date = null;

        //响应XMLHttpRequest对象状态变化的函数 

        //在我们readystate 属性发生改变时候

        // xhr.onreadystatechange = function () {

        //     //异步调用成功

        //     if (xhr.readyState === 4) {

        //         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {

        //             //获得服务器返回的数据

        //             //evel 转换为js来使用

        //             date = JSON.parse(xhr.responseText);

        //             // console.log(date.slider);

        //             //渲染数据到页面中

        //             renderDataToDom();

        //         }

        //     }

        // };

        //创建http请求

        // xhr.open('get', './ser/se.json', true);

        //发送http请求

        // xhr.send(null);


        // function renderDataToDom() {

        //     var img = date.slider,

        //         i,

        //         banner = document.getElementById("banner"),

        //         str="";

        //         len = img.length;

        //     for (i = 0; i < len; i++) {

        //        str+= '<a href="./'+img[i].linkUrl+'"><img src="./'+img[i].picUrl+'"></a>'

        //     }

        //     banner.innerHTML=str;

        //     console.log(banner);

        // }

        //jq的封装

        $.ajax({

            url: "./ser/se.json", //请求地址

            type: "get", //请求的方式

            async: true, //同步异步

            dataType: "json", //请求的数据格式

            success: function (imgDate) { //请求成功

                // JQrenderDataToDom(imgDate.slider)

                //渲染数据

                var str = "";

                $.each(imgDate.slider, function (index, obj) {

                    str += '<a href="./' + obj.linkUrl + '"><img src="' + obj.picUrl + '"></a>';

                })

                $("#banner").html(str)

            }

        })

        //渲染数据

        // function JQrenderDataToDom(date) {

        //     var str = "";

        //     $.each(date, function (index, obj) {

        //         str += '<a href="' + obj.linkUrl + '"><img src="' + obj.picUrl + '"></a>';

        //     })

        //     $("#banner").html(str)

        // }

        //json封装 

        function getJsonp(url, callback) {

            if (!url) {

                return;

            }

            //声明数组 用来 随便生成函数名

            var a = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n'],

                r1 = Math.floor(Math.random() * a.length),

                r2 = Math.floor(Math.random() * a.length),

                r3 = Math.floor(Math.random() * a.length),

                //name中的引号部分是可以任意命名的

                name = 'json.'+a[r1]+a[r2]+a[r3],

                //在服务器断传回来这个getJsonp属性,所有引号的内容要和封装的function函数名一致并且加个.

                cbname = 'getJsonp.'+name;

                // console.log(cbname);

            //判断url地址有没有?号

            if(url.indexOf('?')=== -1){

                url+='?jsonp='+cbname;

            }else{

                url+='&jsonp='+cbname;

            }

            //创建script标签

            var script = document.createElement('script');

            //定义被执行脚本的回调函数

            getJsonp[name]=function(data){

                try {

                    callback && callback(data)

                } catch (error) {

                    

                }finally{

                    delete getJsonp[name];

                    script.parentNode.removeChild(script);

                }

            }

            //将url地址添加到src里面

            script.src=url;

            //将script添加到head下面

            document.getElementsByTagName('head')[0].appendChild(script);

            

        }

        getJsonp('http//www.baidu.com',function(){});

    </script>

</body>


</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕慕子 2020-07-29 09:36:50

同学你好, 因为视频中讲解的跨域方式是针对http://class.imooc.com/api/jsonp这个链接的,这个链接规定了回调函数名不可以添加点,  由字符串组成。

如果添加了点,无法正常返回数据,导致程序出现报错,可以按下F12键,打开控制台,查看确实是有报错信息的,如下所示:

http://img1.sycdn.imooc.com//climg/5f20d2300901f0c700000000.jpg

推荐同学参考老师讲解的方式来实现效果。即如下方式:

http://img1.sycdn.imooc.com//climg/5f20d2ab090c6ee006160151.jpg

祝学习愉快~

好帮手慕慕子 2020-07-28 18:46:05

同学你好, 因为代码书写有问题,所以无法删除。具体可以参考如下解析

  1. 跨域请求的规则是针对指定链接的,并不是随随便便就可以跨域请求到资源的,同学粘贴的代码想要跨域请求百度的资源,是需要经过百度同意,根据他们的规则来书写回调函数的名称是什么的。

    老师视频中讲解的跨域方式是针对http://class.imooc.com/api/jsonp这个链接的,所以推荐同学目前学习使用这个链接进行测试。

  2. 如下所示,引号部分内容确实是可以任意命名的,但并不是说前端人员随意命名的,需要与后台商量具体命名规则。针对视频中的链接函数名中不可以添加点

    http://img1.sycdn.imooc.com//climg/5f20d10d09448baf06590123.jpg

  3. 调整之后,可以输出返回的数据,并查看是否已经删除了script标签,示例:

    http://img1.sycdn.imooc.com//climg/5f20d15809f86d1910020744.jpg

    打印结果如下:可以正常访问到数据

    http://img1.sycdn.imooc.com//climg/5f20018e09232e2716440412.jpg

    html结构中添加的script标签也已经删除了

    http://img1.sycdn.imooc.com//climg/5f2001e709bfed0511880471.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 qq_慕瓜7049344 #1
    老师为什么我在 name = 'jsonp' + a[r1] + a[r2] + a[r3],这个jsonp后面加个点它就不能删除
    2020-07-28 20:09:06
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师