zoukankan      html  css  js  c++  java
  • AJAX-跨域解决之 JSONP

    (一)AJAX

    ajax 就是从某个文件中去找相关的数据,把数据拿过来以后,利用数据 分析数据 去做我们想做的事情
        分两部分:拿数据
                      用数据

    oUsername1.onblur = function() {
                //(以get方式       接口地址                          配参数 m,a,        当前输入的用户名    回调函数      )
    拿数据-->    ajax('get', 'guestbook/index.php', 'm=index&a=verifyUserName&username=' + this.value, function(data) {
                alert(data);
    解析数据-->        var d = JSON.parse(data);//解析
                
    用数据-->    oVerifyUserNameMsg.innerHTML = d.message;
                
                if (d.code) {
                    oVerifyUserNameMsg.style.color = 'red';
                } else {
                    oVerifyUserNameMsg.style.color = 'green';
                }
            });
        }



        
        
        
    (二)AJAX-跨域解决之 JSONP

    跨域的问题
        域:域名
        跨域请求(访问):一个域名下的文件请求另外一个域名下的资源,就产生了跨域
    跨域的解决
        Jsonp : json with padding

    <script>标签

    src的作用 : 加载(包含指定的外部文件)
                     -可以跨域包含
                     -被包含的资源可以是任何类型的文件(可以是txt,php等)
                     -他只关注被包含的文件的内容是否是合法的JS
    原理
        定义函数
        包含外部文件,在被包含的文件中执行调用定义好的函数
        参数的(数据)的实现
        -问题:包含就调用,通过动态创建<script>实现按需调用
        -问题:包含动态文件时可以通过一个接口实现按需生成调用函数名称

    1、JSONP : JSON with Padding
        1.script标签
        2.用script标签加载资源是没有跨域问题的
        在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据),函数里面利用这个参数做一些事情
        然后需要的时候通过script标签加载对应远程文件资源,当远程的文件资源被加载进来的时候,就会去执行我们前面定义好的函数,并且把数据当作这个函数的参数传入进去
    <script>
    function fn(data) {
        alert(data);
    }
    </script>
    <!--<script src="2.txt"></script>-->
    <script>
    window.onload = function() {
        
        var oBtn = document.getElementById('btn');
        
        oBtn.onclick = function() {
            
            //当按钮点击的时候再去加载远程资源,让他执行
            
            var oScript = document.createElement('script');
            oScript.src = '2.txt';
            document.body.appendChild(oScript);//添加到页面当中
            
        }
        
    }
    </script>
    </head>

    <body>
        <input type="button" id="btn" value="按钮" />
    </body>


  • 相关阅读:
    syslog命令
    linux命令 info
    Alibaba(阿里) RocketMQ入门实例
    java基础-学java util类库总结
    java 23种设计模式教程
    Linux
    Scrapy框架
    MongoDB的安装与使用
    爬虫小案例——爬取天猫
    爬虫小案例——爬取豆瓣电影
  • 原文地址:https://www.cnblogs.com/webzwf/p/5712257.html
Copyright © 2011-2022 走看看