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>
