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": "",
"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 跨域获取最新电视节目清单实例的更多相关文章
- jQuery之ajax的跨域获取数据
如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面.服务 ...
- Ajax实现跨域访问最新方式
在实际项目当中,我们经常会遇到同一个域名下不同项目之间通过Ajax相互调用数据,这样问题就来了,如何通过Ajax实现跨域呢? 解决方案 1.Jsonp Jsonp解决跨域相对简单,服务器无需任何配置. ...
- AJAX远程跨域获取数据
//本地获取json文件 $.ajax({ url : 'json.php', type : 'post', dataType : 'json',//返回json数据格式 success : func ...
- [ 转 ]jquery的ajax和getJson跨域获取json数据
目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端 ...
- 再也不学AJAX了！（三）跨域获取资源 ③ - WebSocket & postMessage
让我们先简单回顾一下之前谈到的内容,AJAX是一种无页面刷新的获取服务器资源的混合技术.而基于浏览器的"同源策略",不同"域"之间不可以发送AJAX请求.但是在 ...
- 再也不学AJAX了！（三）跨域获取资源 ② - JSONP & CORS
浏览器的"同源策略"固然保障了互联网世界的数据隐私与数据安全,但是如果当我们需要使用AJAX跨域请求资源时,"同源策略"又会成为开发者的阻碍.在本文中,我们会简 ...
- 再也不学AJAX了！（三）跨域获取资源 ① - 同源策略
我们之前提到过,AJAX技术使开发者能够专注于互联网中数据的传输,而不再拘泥于数据传输的载体.通过AJAX技术,我们获取数据的方式变得更加灵活,可控和优雅. 但是AJAX技术并不是一把万能钥匙,互联网 ...
- jquery的ajax和getJson跨域获取json数据
目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的. jsonp是英文json with padding的缩写.它允许在服务器端 ...
- 使用JSONP，jQuery的ajax跨域获取json数据
网上找了很多资料,写的不错,推荐下: 1.深入浅出JSONP--解决ajax跨域问题 (http://www.cnblogs.com/chopper/archive/2012/03/24/240394 ...
随机推荐
- Redis一（Redis-py与String操作）
Redis 介绍 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(so ...
- 如何在浏览器网页中显示word文件内容
如何在浏览器网页中显示word文件内容 把word文件读到byte[]中,再Response.OutputStream.Write(bytes)到客户端去 Page_Load事件中写: //FileS ...
- Linux x86架构下ACPI PNP Hardware ID的识别机制
转:https://blog.csdn.net/morixinguan/article/details/79343578 关于Hardware ID的用途,在前面已经大致的解释了它的用途,以及它和AC ...
- Django-JS实现的ajax
JS实现的ajax ajax的优缺点 AJAX使用Javascript技术向服务器发送异步请求 AJAX无须刷新整个页面 因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高 小练习 ...
- Refseq，accssion #,gi ,Ensembl的关系
accession编号的分子类型代号: Ensembl是2000年就开始开发的基因组自动注释软件,起初是只对真核生物基因组,2009年后开始对植物,细菌等开放.既然要注释,就要有注释对象(基因,转录本 ...
- 20165114 《网络对抗技术》 Exp0 Kali安装与配置 Week1
目录: 一.kail的下载与安装 二.kali的网络设置 三.安装vmware-tools. 四.更新软件源. 五.共享文件夹 六.安装中文输入法 一.kail的下载与安装 VMware workst ...
- Book Review of “The practice of programming” (Ⅲ)
The practice of programming Chapter 3 Design and Implementation In this section, we focus on one kin ...
- MapReduce:将下面的两排数字先按第一排排序，然后再按第二排排序，要求顺序排序
MapReduce:将下面的两排数字先按第一排排序,然后再按第二排排序,要求顺序排序 文件如下: 这个案例主要考察我们对排序的理解,我们可以这样做: 代码如下(由于水平有限,不保证完全正确,如果发现错 ...
- Linux系统下chkconfig命令使用详解
chkconfig命令可以用来检查.设置系统的各种服务 使用语法:chkconfig [--add][--del][--list][系统服务] 或 chkconfig [--level <等级代 ...
- SpringBoot MockMVC
使用MockMvc,我们可以完成基于RESTful风格的SpringMVC的测试,我们可以测试完整的Spring MVC流程,即从URL请求到控制器处理,再到视图渲染都可以测试. @RunWith(S ...