JSONP实现ajax跨域

技术背景

当向网站A发送请求时(可以通过ajax发送请求)即进行跨域,由于浏览器的同源策略所以会拦截网站A的响应,导致我们不能拿到数据,这时候可以通过JSONP的方式进行跨域。

同源策略

概念

当浏览器的百度主页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台console中报一个异常，提示拒绝访问。
所谓同源是指，域名，协议，端口相同。

作用

同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截目标网站的响应数据，即请求发送了，目标服务器响应了，但是无法被浏览器接收。

实现原理

注意：JSONP只是进行跨域的一种方式

虽然通过ajax的方式得到的响应会被浏览器拦截,但是我们发现img标签、script标签中的src不受同源策略限制，因此可以加以利用。
得到的响应内容也会被放在script标签中

function submitJsonp2() {
	// 该函数利用script中的src获取目标url的响应数据
    var tag = document.createElement('script');
    tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';
    //添加后再删除script标签
    document.head.appendChild(tag);
    document.head.removeChild(tag);
}

这是得到的响应体：

#发现想要的数据是ptyhon中熟悉的基本数据格式，但是被放在list（）的括号里
list({data:[ {"week":"周日","list":[{"time":"0030","name":"通宵剧场六集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0530","name":"《都市现场》60分钟精编版（重播）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0630","name":"《快乐生活一点通》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0700","name":"《e早晨报》60分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0800","name":"精选剧场四集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1120","name":"《地宝当家》（重播）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1200","name":"《都市60分》60分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1300","name":"《谁是赢家》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1400","name":"女性剧场三集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1700","name":"《快乐生活一点通》精编版","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1730","name":"《地宝当家》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1800","name":"《都市现场》90分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1930","name":"《都市情缘》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2000","name":"《晚间800》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2020","name":"《都市剧场》黄金剧（第1集）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2110","name":"《都市剧场》黄金剧（第2集）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2200","name":"《拍案》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2230","name":"江西新闻联播(重播)","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2250","name":"都市晚剧场","link":"http://www.jxntv.cn/live/jxtv2.shtml"}] }, {"week":"周一","list":[{"time":"0030","name":"通宵剧场六集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0530","name":"《都市现场》60分钟精编版（重播）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0630","name":"《快乐生活一点通》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0700","name":"《e早晨报》60分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0800","name":"精选剧场四集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1120","name":"《地宝当家》（重播）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1200","name":"《都市60分》60分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1300","name":"《谁是赢家》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1400","name":"女性剧场三集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1700","name":"《快乐生活一点通》精编版","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1730","name":"《地宝当家》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1800","name":"《都市现场》90分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1930","name":"《都市情缘》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2000","name":"《晚间800》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2020","name":"《都市剧场》黄金剧（第1集）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2110","name":"《都市剧场》黄金剧（第2集）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2200","name":"《拍案》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2230","name":"江西新闻联播(重播)","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2250","name":"都市晚剧场","link":"http://www.jxntv.cn/live/jxtv2.shtml"}] },{"week":"周二","list":[{"time":"0030","name":"通宵剧场六集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0530","name":"《都市现场》60分钟精编版（重播）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0630","name":"《快乐生活一点通》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0700","name":"《e早晨报》60分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0800","name":"精选剧场四集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1120","name":"《地宝当家》（重播）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1200","name":"《都市60分》60分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1300","name":"《谁是赢家》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1400","name":"女性剧场三集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1700","name":"《快乐生活一点通》精编版","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1730","name":"《地宝当家》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1800","name":"《都市现场》90分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1930","name":"《都市情缘》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2000","name":"《晚间800》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2020","name":"《都市剧场》黄金剧（第1集）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2110","name":"《都市剧场》黄金剧（第2集）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2200","name":"《拍案》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2230","name":"江西新闻联播(重播)","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2250","name":"都市晚剧场","link":"http://www.jxntv.cn/live/jxtv2.shtml"}] },{"week":"周三","list":[{"time":"0030","name":"通宵剧场六集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0530","name":"《都市现场》60分钟精编版（重播）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0630","name":"《快乐生活一点通》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0700","name":"《e早晨报》60分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0800","name":"精选剧场四集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1120","name":"《地宝当家》（重播）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1200","name":"《都市60分》60分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1300","name":"《谁是赢家》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1400","name":"女性剧场三集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1700","name":"《快乐生活一点通》精编版","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1730","name":"《地宝当家》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1800","name":"《都市现场》90分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1930","name":"《都市情缘》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2000","name":"《晚间800》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2020","name":"《都市剧场》黄金剧（第1集）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2110","name":"《都市剧场》黄金剧（第2集）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2200","name":"《拍案》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2230","name":"江西新闻联播(重播)","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2250","name":"都市晚剧场","link":"http://www.jxntv.cn/live/jxtv2.shtml"}] },{"week":"周四","list":[{"time":"0030","name":"通宵剧场六集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0530","name":"《都市现场》60分钟精编版（重播）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0630","name":"《快乐生活一点通》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0700","name":"《e早晨报》60分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0800","name":"精选剧场四集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1120","name":"《地宝当家》（重播）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1200","name":"《都市60分》60分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1300","name":"《谁是赢家》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1400","name":"女性剧场三集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1700","name":"《快乐生活一点通》精编版","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1730","name":"《地宝当家》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1800","name":"《都市现场》90分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1930","name":"《都市情缘》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2000","name":"《晚间800》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2020","name":"《都市剧场》黄金剧（第1集）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2110","name":"《都市剧场》黄金剧（第2集）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2200","name":"《拍案》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2230","name":"江西新闻联播(重播)","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2250","name":"都市晚剧场","link":"http://www.jxntv.cn/live/jxtv2.shtml"}] },{"week":"周五","list":[{"time":"0030","name":"通宵剧场六集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0530","name":"《都市现场》60分钟精编版（重播）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0630","name":"《快乐生活一点通》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0700","name":"《e早晨报》60分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0800","name":"精选剧场四集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1120","name":"《地宝当家》（重播）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1200","name":"《都市60分》60分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1300","name":"《谁是赢家》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1400","name":"女性剧场三集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1700","name":"《快乐生活一点通》精编版","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1730","name":"《地宝当家》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1800","name":"《都市现场》90分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1930","name":"《都市情缘》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2000","name":"《晚间800》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2020","name":"《都市剧场》黄金剧（第1集）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2110","name":"《都市剧场》黄金剧（第2集）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2200","name":"《拍案》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2230","name":"江西新闻联播(重播)","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2250","name":"都市晚剧场","link":"http://www.jxntv.cn/live/jxtv2.shtml"}] },{"week":"周六","list":[{"time":"0030","name":"通宵剧场六集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0530","name":"《都市现场》60分钟精编版（重播）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0630","name":"《快乐生活一点通》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0700","name":"《e早晨报》60分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"0800","name":"精选剧场四集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1120","name":"《地宝当家》（重播）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1200","name":"《都市60分》60分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1300","name":"《谁是赢家》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1400","name":"女性剧场三集连播","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1700","name":"《快乐生活一点通》精编版","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1730","name":"《地宝当家》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1800","name":"《都市现场》90分钟直播版块","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"1930","name":"《都市情缘》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2000","name":"《晚间800》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2020","name":"《都市剧场》黄金剧（第1集）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2110","name":"《都市剧场》黄金剧（第2集）","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2200","name":"《拍案》","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2230","name":"江西新闻联播(重播)","link":"http://www.jxntv.cn/live/jxtv2.shtml"},{"time":"2250","name":"都市晚剧场","link":"http://www.jxntv.cn/live/jxtv2.shtml"}] }] }); 

此时的响应体还在script标签中，然后在js中编写list（）函数就可以获取跨域得到的数据啦
注：最后在js中编写的list（）函数要根据返回的响应内容去定义函数名
为什么返回的响应内容会是list（…）的格式呢?如果网站A遵循JSONP的格式去定制响应的内容,那么就可以通过这种方式获取其数据

/*
<script>
	list('这里面包含想要的数据'')
</script>
*/ 
function list(arg) {
	//数据此时转移到了arg中
   console.log(arg);
}

JSONP实现ajax跨域

上述的一些代码在ajax中已经帮我们做了一些封装
如何让定义的函数名不受响应内容的限制呢?
可以让url中带上参数, callback=fun2,然后目标url返回callback中我们要求的函数名fun2就可以实现函数名的这一限制问题
由于JSONP的原理,所以其只能发送GET请求

function kuayu_test() {
    $.ajax({
        url:'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',
        type:'GET',
        dataType:'JSONP',  
        //dataType的值设置为JSONP时,ajax会帮我们通过script的src获取响应,并进行script标签的生成和删除工作
        jsonp: 'callback',
        jsonpCallback:'fun2',
        //这两行表示url?callback=fun2
        
    })
}

function fun2(arg) {
	//该函数的函数名取决于响应的内容
    console.log(arg)
}

延申:
跨域资源共享（CORS，Cross-Origin Resource Sharing），其本质是设置响应头，使得浏览器允许跨域请求
COSR可以发送GET请求也可发送POST请求

参考

浏览器同源政策及其规避方法_ 阮一峰

同源策略_百度百科

Ajax总结_博客园