jsonp跨域请求原理

今天咱们讲讲jsonp跨域请求原理吧！

在进行网站开发的过程中经常会用到第三方的数据，但是由于同源策略的限制导致ajax不能发送请求，因此也无法获得数据。解决ajax的跨域问题有两种方法：
一、jsonp

二、XMLHttpRequest2中可以配合服务端来解决，在响应头中加入Access-Control-Allow-Origin:*

1、同源：

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口号完全相同
　　1.1目的：保护用户信息安全
　　1.2限制：cookie、localStorage和IndexDB无法读取
　　无法操作跨域的iframe里的dom元素
　　ajax请求不能发送
2、跨域：

不同源则为跨域

(1) http://api.example.com/detail.html 不同源域名不同
(2) https//www.example.com/detail.html 不同源协议不同
(3) http://www.example.com:8080/detail.html 不同源端口不同
(4) http://api.example.com:8080/detail.html 不同源域名、端口不同
(5) https://api.example.com/detail.html 不同源协议、域名不同
(6) https://www.example.com:8080/detail.html 不同源端口、协议不同
(7) http://www.example.com/detail/index.html 同源只是目录不同

3、jsonp原理：

其本质是利用了标签具有可跨域的特性，由服务端返回预先定义好的javascript函数的调用，并且将服务端数据以该函数参数的形式传递过来

4、案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>后台获取的结果</h1>{{ result }}<h1>js直接获取结果</h1><input type="button" value="获取数据" onclick="getContent();" /><div id="container"></div><script src="/static/js/jquery-1.12.4.js"></script><script>function getContent(){/*                   ajax原生方式发送var xhr = new XMLHttpRequest();xhr.open('GET','http://wupeiqi.com:8001/jsonp.html?k1=v1&k2=v2');xhr.onreadystatechange = function(){console.log(xhr.responseText);};xhr.send();*//*                      var tag = document.createElement('script');tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';document.head.appendChild(tag);document.head.removeChild(tag);*/$.ajax({url: 'http://www.jxntv.cn/data/jmd-jxtv2.html',   //江西电视台的urltype: 'POST',                                        //请求方式为POSTdataType: 'jsonp',                                  //数据格式为jsonpjsonp: 'callback',jsonpCallback: 'list'                              //表示url的callback等于list,会额外的通过url发过去})}function list(arg){console.log(arg);}</script>
</body>
</html>

今天就到这儿吧！下课。。。。。

jsonp跨域请求原理相关推荐

.net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器...
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
深入理解jsonp跨域请求原理
在进行网站开发的过程中经常会用到第三方的数据,但是由于同源策略的限制导致ajax不能发送请求,因此也无法获得数据.解决ajax的跨域问题有两种方法: 一.jsop 二.XMLHttpRequest2中 ...
JSONP跨域的原理解析
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略). ...
JSONP跨域的原理解析及其实现介绍
JSONP 即 Json padding ,JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并且探讨下JSONP跨域的原理 JavaScript是一种在Web ...
轻松搞定JSONP跨域请求
轻松搞定JSONP跨域请求一.同源策略要理解跨域,先要了解一下"同源策略".所谓同源是指,域名,协议,端口相同.所谓"同源策略",简单的说就是基于安全考虑, ...
JS的jsonp是什么？5分钟学会jsonp跨域请求
一.jsonp是什么? jsonp是解决跨域请求的一种技术.浏览器为了防止CSRF攻击会采用同源策略(协议/主机/端口均相同)限制,对非同源发起http请求(即跨域请求)会被浏览器阻止. 二.json ...
实现百度下拉菜单实例（利用jsonp跨域请求百度数据接口）
JSONP:是JSON with padding(填充式JSON或参数式JSON)的简写,它由两部分组成:回调函数和数据.回调函数是当响应到来时应该在页面中调用的函数,回调函数的名字一般是在请求中指 ...
【漏洞利用】JSONP跨域请求漏洞挖掘、利用详解
参考文章轻松搞定JSONP跨域请求 jsonp跨域原理,使用以及同源策略跨域漏洞丨JSONP和CORS跨域资源共享 Tag: Ref: [[019.同源策略]] 本片文章仅供学习使用,切勿触犯法律 ...
JSONP跨域请求数据报错 “Unexpected token :”的解决办法
原文 http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 "Uncaught SyntaxError ...
Jsonp 跨域请求实例
Jsonp 跨域请求实例关于jsonp的一个实例,其实自己也不是很了解,今天下午稍微研究了一下: 简单来说,jsonp就是为了两个不同网站之间数据传递而产生的,主要用于js脚本,因为浏览器本身是禁止 ...

jsonp跨域请求原理

jsonp跨域请求原理

jsonp跨域请求原理相关推荐

最新文章

热门文章