Ajax-08 跨域获取最新电视节目清单实例

本文主要是介绍Ajax-08 跨域获取最新电视节目清单实例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目标一

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

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": "0030","name": "通宵剧场六集连播","link": "http://www.jxntv.cn/live/jxtv2.shtml"},{"time": "2250","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": "20170412084110","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": "1","vurl": "http://www.iqiyi.com/v_19rrok4nt0.html","plcdown": {"17": 0,"15": 0},"vid": "e59fa071d268247291f7737c72ea37f8","timeLength": 1500,"pd": 1,"vn": "航海王 第1集","payMark": 0,"exclusive": 1,"id": 385274600,"vt": "我是路飞！ 将要成为海贼王的男人","pds": "1"},{"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": "1","vurl": "http://www.iqiyi.com/v_19rrok4ms8.html","plcdown": {"17": 0,"15": 0},"vid": "c183093e2c60e7a34eb6758c3f997a1e","timeLength": 1500,"pd": 2,"vn": "航海王 第2集","payMark": 0,"exclusive": 1,"id": 385275700,"vt": "大剑客现身！海贼猎人罗罗诺亚·卓洛","pds": "2"}],"bossType": "0","aQipuId": 202861101,"qiyiProduced": 0,"allNum": 783,"pg": "1","isBossMixer": 0,"ic": 783,"pgt": 11,"aid": 202861101,"pm": 0,"pn": 75,"cid": 4},"timestamp": "20170412084110"});
}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>