zoukankan      html  css  js  c++  java
  • ajax式的jsonp

    json是一种轻量级的数据交换格式,你可以把它理解成没有方法的,键名要加引号的对象。

    jsonp是一种跨域传输数据的解决方案,利用src属性的跨域能力来拉取数据

    建两个文件夹a,b来模拟两台服务器
    a里建a.js,代码如下:
     1 alert("i am a server") 

    b里建index.html,代码如下:

    <!DOCTYPE html><html><head><title>bserver</title></head><body><script type="text/javascript" src="http://localhost:3000/a.js"></script></body></html>

    启动这两台服务器,打开b里的index即可弹出i am a server

    平常从cdn引入jQuery,bootstrap,甚至图片链接,均是通过src跨域拉取文件的。

    如果本地声明了一个函数,而远程服务器上是一个函数调用呢,挂了一串数据的那种 调用。那么拉取过来之后就直接执行了该函数。
    aserver/a.js

    aserver({a:1,b:2});

    bserver/index.html

    <!DOCTYPE html>
    <html>
    <head>
    <title>bserver</title>
    </head>
    <body>
    <script type="text/javascript">
    // 定义了一个函数
    function aserver(data) {
    alert(data.a +'+'+data.b)
    }
    </script>
    <script type="text/javascript" src="http://localhost:3000/a.js"></script>
    </body>
    </html>

    如果动态定义了script标签里的src url,同后端约定了回掉函数callback的函数名,还挂载了一段查询数据呢?这也是可以实现的。

    jquery里的ajax也封装了jsonp的方法。如下代码是抓取qq音乐的数据。

    $.ajax({
    type: "get",
    url: "https://c.y.qq.com/splcloud/fcgi-bin/gethotkey.fcg",
    data:{
    g_tk:5381,
    loginUin:0,
    hostUin:0,
    format:'jsonp',
    inCharset:'utf8',
    outCharset:'utf-8',
    notice:0,
    platform:'yqq',
    jsonpCallback:"hotSearchKeysmod_top_search",
    needNewCode:0
    },//挂载到链接上的数据。
    dataType: "jsonp",
    cache:true,//消去链接上的时间戳以允许缓存
    jsonp: "callback",//传给后端用来获取jsonp回掉函数名的参数名,一般默认是callback。
    jsonpCallback:"hotSearchKeysmod_top_search",//和后端约定的函数名
    success: function(json){
    //json即是我们需要的数据。
    alert(JSON.stringify(json.data))
    },
    error: function(){
    alert('fail');
    }
    });

    简单来说,jsonp是利用了script的src能够跨域获取数据的能力,用前后端约定的函数来包裹数据,前端声明,后端调用,来达到获取数据的目的。

  • 相关阅读:
    软件工程概论课后作业2
    第三周进度表
    软件工程概论课后作业1
    第二周进度表
    9.异常处理
    《构建之法》阅读笔记二
    《构建之法》阅读笔记一
    第五周进度表
    软件工程个人作业03
    第四周进度表
  • 原文地址:https://www.cnblogs.com/zhouxiaohouer/p/7900602.html
Copyright © 2011-2022 走看看