目标一

请求江西网络广播电视台电视节目

URL：http://www.jxntv.cn/data/jmd-jxtv2.html

分析

1.从Http头信息分析得知，器服务端未返回响应头Access-Control-Allow-xxxx 相关信息，所以只能使用JSONP方式

2.从返回值内容中分析得知，其返回值永远是:list（响应内容），即:由于服务器将函数名写死为list，所以指定callback在此程序中无效。

list({

    data: [

        {

            "week": "周日",

            "list": [

                {

                    "time": "",

                    "name": "通宵剧场六集连播",

                    "link": "http://www.jxntv.cn/live/jxtv2.shtml"

                },

                {

                    "time": "",

                    "name": "都市晚剧场",

                    "link": "http://www.jxntv.cn/live/jxtv2.shtml"

                }

            ]

        }

    ]

});

实现

get_tv_list.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>跨域请求最新电视节目清单</title>

</head>

<body>

<h1>跨域请求</h1>

<input type="submit" value="XmlSendRequest获取节目" onclick="XmlSendRequest();"/>

<input type="submit" value="JqSendRequest-获取节目" onclick="JqSendRequest();"/>

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>

    function XmlSendRequest() {

        // 创建script标签

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

        // 指定src

        tag.src = "http://www.jxntv.cn/data/jmd-jxtv2.html";

        // 添加到head标签中

        document.head.appendChild(tag);

        // 删除script标签

        document.head.removeChild(tag);

    }

    function JqSendRequest() {

        $.ajax({

            url: "http://www.jxntv.cn/data/jmd-jxtv2.html",

            type: 'GET',

            dataType: 'jsonp'

        })

    }

    function list(arg) {

        console.log(arg);

    }

</script>

</body>

</html>

目标二

请求爱奇艺海贼王节目清单

URL：http://cache.video.iqiyi.com/jp/avlist/202861101/1/?callback=call

分析

1.从Http头信息分析得知，器服务端未返回响应头Access-Control-Allow-xxxx 相关信息，所以只能使用JSONP方式

2.从返回值内容中分析得知，当传入callback时，返回callback回调函数名,所以指定callback在此程序中有效。

try{

    call({

        "bmsg": {

            "t": "",

            "f": "kafka",

            "sp": "402871101,"

        },

        "code": "A00000",

        "data": {

            "pp": 75,

            "ps": "",

            "pt": 783,

            "vlist": [

                {

                    "mdown": 0,

                    "publishTime": 1438650931000,

                    "vpic": "http://pic9.qiyipic.com/image/20150803/96/f9/v_109343020_m_601.jpg",

                    "tvQipuId": 385274600,

                    "purType": 0,

                    "qiyiProduced": 0,

                    "shortTitle": "航海王 第1集",

                    "type": "",

                    "vurl": "http://www.iqiyi.com/v_19rrok4nt0.html",

                    "plcdown": {

                        "": 0,

                        "": 0

                    },

                    "vid": "e59fa071d268247291f7737c72ea37f8",

                    "timeLength": 1500,

                    "pd": 1,

                    "vn": "航海王 第1集",

                    "payMark": 0,

                    "exclusive": 1,

                    "id": 385274600,

                    "vt": "我是路飞！ 将要成为海贼王的男人",

                    "pds": ""

                },

                {

                    "mdown": 0,

                    "publishTime": 1438678286000,

                    "vpic": "http://pic8.qiyipic.com/image/20150804/5f/27/v_109343021_m_601_m2.jpg",

                    "tvQipuId": 385275700,

                    "purType": 0,

                    "qiyiProduced": 0,

                    "shortTitle": "航海王 第2集",

                    "type": "",

                    "vurl": "http://www.iqiyi.com/v_19rrok4ms8.html",

                    "plcdown": {

                        "": 0,

                        "": 0

                    },

                    "vid": "c183093e2c60e7a34eb6758c3f997a1e",

                    "timeLength": 1500,

                    "pd": 2,

                    "vn": "航海王 第2集",

                    "payMark": 0,

                    "exclusive": 1,

                    "id": 385275700,

                    "vt": "大剑客现身！海贼猎人罗罗诺亚·卓洛",

                    "pds": ""

                }

            ],

            "bossType": "",

            "aQipuId": 202861101,

            "qiyiProduced": 0,

            "allNum": 783,

            "pg": "",

            "isBossMixer": 0,

            "ic": 783,

            "pgt": 11,

            "aid": 202861101,

            "pm": 0,

            "pn": 75,

            "cid": 4

        },

        "timestamp": ""

    });

}catch(e){

};

实现

get_tv_list.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>跨域请求最新电视节目清单</title>

</head>

<body>

<h1>跨域请求最新电视节目清单</h1>

<input type="submit" value="XmlSendRequest-jsonp" onclick="XmlSendRequest();"/>

<input type="submit" value="JqSendRequest-jsonp" onclick="JqSendRequest();"/>

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>

    // 客户端定义回调函数

    function call(arg) {

        console.log('客户端定义回调函数执行：', arg);

    }

    function XmlSendRequest() {

        // 创建script标签

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

        // 指定src

        tag.src = "http://cache.video.iqiyi.com/jp/avlist/202861101/1/?callback=call";

        // 添加到head标签中

        document.head.appendChild(tag);

        // 删除script标签

        document.head.removeChild(tag);

    }

    function JqSendRequest() {

        $.ajax({

            url: "http://cache.video.iqiyi.com/jp/avlist/202861101/1/",

            type: 'GET', // POST 也会自动转换为GET请求

            dataType: 'jsonp',

            jsonp: "callback",

            jsonpCallback: 'call', // 请求成功返回后，客户端执行call函数

            success: function (data, statusText, xmlHttpRequest) {

                // 未指定jsonCallback时，则自定执行方法

                console.log('success 回调执行:', data);

            }

            // 如上请求如 http://cache.video.iqiyi.com/jp/avlist/202861101/1/?callback=call

        })

    }

</script>

</body>

</html>

***微信扫一扫，关注“python测试开发圈”，了解更多测试教程！***

Ajax-08 跨域获取最新电视节目清单实例的更多相关文章

  1. jQuery之ajax的跨域获取数据

    如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面.服务 ...

  2. Ajax实现跨域访问最新方式

    在实际项目当中,我们经常会遇到同一个域名下不同项目之间通过Ajax相互调用数据,这样问题就来了,如何通过Ajax实现跨域呢? 解决方案 1.Jsonp Jsonp解决跨域相对简单,服务器无需任何配置. ...

  3. AJAX远程跨域获取数据

    //本地获取json文件 $.ajax({ url : 'json.php', type : 'post', dataType : 'json',//返回json数据格式 success : func ...

  4. [ 转 ]jquery的ajax和getJson跨域获取json数据

    目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端 ...

  5. 再也不学AJAX了！（三）跨域获取资源 ③ - WebSocket & postMessage

    让我们先简单回顾一下之前谈到的内容,AJAX是一种无页面刷新的获取服务器资源的混合技术.而基于浏览器的"同源策略",不同"域"之间不可以发送AJAX请求.但是在 ...

  6. 再也不学AJAX了！（三）跨域获取资源 ② - JSONP & CORS

    浏览器的"同源策略"固然保障了互联网世界的数据隐私与数据安全,但是如果当我们需要使用AJAX跨域请求资源时,"同源策略"又会成为开发者的阻碍.在本文中,我们会简 ...

  7. 再也不学AJAX了！（三）跨域获取资源 ① - 同源策略

    我们之前提到过,AJAX技术使开发者能够专注于互联网中数据的传输,而不再拘泥于数据传输的载体.通过AJAX技术,我们获取数据的方式变得更加灵活,可控和优雅. 但是AJAX技术并不是一把万能钥匙,互联网 ...

  8. jquery的ajax和getJson跨域获取json数据

    目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端 ...

  9. 使用JSONP，jQuery的ajax跨域获取json数据

    网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...

随机推荐

  1. Giraph执行报错，Error: Exceeded limits on number of counters - Counters=120 Limit=120, exiting...

    HamaWhite 原创,转载请注明出处.欢迎大家增加Giraph 技术交流群: 228591158 1. 近日用Giraph跑大数据的SSSP时,遇到例如以下错误: org.apache.hadoo ...

  2. HTTP协议简要介绍

    1. 网络基础 TCP/IP 通常使用的网络是在TCP/IP协议簇基础上运作的. HTTP属于它内部的一个子集. TCP/IP分为4个层次, 应用层, 传输层, 网络层, 链路层. (Applicat ...

  3. if 条件判断

    逻辑判断的布尔值(true&false) 1.逻辑值(bool)用来表示诸如:对与错,真与假,非于空等概念. 2.逻辑值包含了两个值:--true:表示非空的量(比如:string,tuple ...

  4. 利用python的turtle重复画六边形

    学习python,接触到turtle包,就用它来画一下六边形. 要在python中使用turtle包,就先要安装这个包.安装步骤如下:按住win+R,在打开CMD,输入命令'pip install t ...

  5. day3-python-文件操作(2)

    本文内容涉及python中的os模块和os.path模块的常用操作,这两个模块提供了与平台和操作系统无关的文件系统访问方法.os模块负责大部分的文件系统操作,包括:删除文件.重命名文件.遍历目录树等: ...

  6. Uber中国在地方城市的人员架构是怎样的？

    http://www.thepaper.cn/newsDetail_forward_1390516 澎湃新闻:Uber中国在地方城市的人员架构是怎样的?   柳甄:一般是3人组成的小团队作战.一名城市 ...

  7. s5_day12作业

    # day12作业: # 功能实现: # 一个文件夹中,存在多个文件,包括图片,视频,文本等等, # 遍历出时间在2017-06-05至2017-06-09这段时间内创建的所有文件.具体文件夹,自己创 ...

  8. shiro 拦截器

    参考

  9. mybatis 插入之后返回id

    usermapper.xml <insert id="insert" parameterType="app.models.User" keyPropert ...

  10. PAT 天梯赛 L1-003. 个位数统计

    题目链接 https://www.patest.cn/contests/gplt/L1-003 题意 计算每个不同数字出现的次数 思路 可以用 MAP标记, 也可以直接用数字 存 AC代码 #incl ...