【个人学习笔记,如有问题还请前辈纠正】

jsonp 是用来跨域读取数据的,为什么从不同的域访问数据要用jsop呢?这源于一个著名的安全策略--同源策略,即:

  协议、端口号、域名相同

  举例说明:http://www.myweb.com:8080/demo/index.html [协议:http://  端口:8080  域名:www.myweb.com]

  http://www.myweb.com:8080/src/list.html  [同源]

  http://www.myweb.com/src/list.html  [不同源:端口不同]

  http://myweb.com:8080/src/list.html  [不同源:域名不同]

同源策略会限制

  1.cookie、localStorage、indexDB无法读取,

  2.DOM无法获得,

  3.Ajax请求不能发送。

这样做的好处在于保护了用户信息安全。为了既保护用户信息安全,又规避跨域(不同源则为跨域)限制,因此需要使用这种特殊的技术--jsonp.

jsonp利用script标签具有跨域能力的特点,允许用户通过script的src属性向服务器发送请求,并传递一个函数名作为参数,服务端返回数据时会将这个callback函数作为函数名包裹住从服务端接收的json数据,客户端会按照定义好的方式处理数据。举例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<body>
<div id="list"></div>
<script type="text/javascript">
function callbackFunction(result, methodName) {
  var html = '<ul>';
  for(var i = 0; i < result.length; i++) {
    html += '<li>' + result[i] + '</li>';
  }
  html += '</ul>';
  document.getElementById('list').innerHTML = html;
}
</script>
<script type="text/javascript" src="http://www.myweb.com/demo/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>

以上,callbackFunction函数名作为参数传递给服务器,服务器返回数据形式为:callbackFunction(["list1","list2"]),显示结果会按照 callbackFunction()函数来处理。

												

jsonp原理及同源策略的更多相关文章

  1. jsonp突破浏览器同源策略

    jsonp突破浏览器同源策略 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. 跨域JSONP原理及调用详细演示样例

      上篇博客介绍了同源策略和跨域訪问概念,当中提到跨域经常使用的基本方式:JSONP和CORS.   那这篇博客就介绍JSONP方式.   JSONP原理   在同源策略下,在某个server下的页面 ...

  3. Cookie中的sessionid与JSONP原理

    一.首先说明一下cookie中的sessionid的作用. 1.cookie只是一些文本内容,多是键值对的形式,是请求头中的一部分 2.http是无连接的 知道这两点,就可以很容易的理解session ...

  4. 简单说一说jsonp原理

    背景:由于浏览器同源策略的限制,非同源下的请求,都会产生跨域问题,jsonp即是为了解决这个问题出现的一种简便解决方案. 同源策略即:同一协议,同一域名,同一端口号.当其中一个不满足时,我们的请求即会 ...

  5. 面试汇总——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?

    本文是面试汇总分支——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?. 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能, ...

  6. javascript 同源策略和 JSONP 的工作原理

    同源策略 同源策略是一个约定,该约定阻止当前脚本获取或操作另一域的内容.同源是指:域名.协议.端口号都相同. 简单地说,A 服务器下的 a 端口执行 ajax 程序,不能获取 B 服务器或者 A 服务 ...

  7. 同源策略与JSONP劫持原理

    同源策略 浏览器中有两个安全机制,一个浏览器沙盒(Sandbox),另一个就是同源策略(Same Origin Policy,简称SOP) ,下面介绍同源策略.同源是指同协议.同域名.同端口,必须三同 ...

  8. 同源策略jsonp和cors

    同源策略: 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上 ...

  9. AJAX_违反了同源策略_就是"跨域"——jsonp 和 cors

    https 协议    默认端口号 443 http 协议    默认端口号 80 同源策略 由网景公司提出的——浏览器 的 为了浏览器安全而生 同源策略: 协议.域名.端口号    必须完全一致 违 ...

随机推荐

  1. coursera-斯坦福-机器学习-吴恩达-笔记week1

    1 Introduction 1.1 概念:一个程序被认为能从经验E中学习,解决任务 T,达到性能度量值P,当且仅当, 有了经验E后,经过P评判, 程序在处理 T 时的性能有所提升. 1.2 机器学习 ...

  2. .net core IIS/Kestrel上传大文件的解决方法

    大文件,就是内容的大小超过了一定数量的文件,比如1个GB的文件. 站点一般会限制上传文件的大小,如果超过了一定限制,则会报错误. 在处理大文件上传的方式上,IIS代理和Kestrel宿主服务器的处理方 ...

  3. 超哥教你发布CRM

    发布CRM你将使用以下软件 nginx uWSGI CentOS7 CRM项目文件 virtualenv supervisor WSGI.uWSGI python web服务器开发使用WSGI协议(W ...

  4. 马凯军201771010116《面向对象程序设计(java)》第六周学习总结

    第一部分:理论知识学习部分 枚举是一种特殊的数据类型,之所以特殊是因为它既是一种类(class)类型却又比类型多了些特殊的约束,但是这些约束的存在也造就了枚举类型的简洁,安全性以及便捷性.创建枚举类型 ...

  5. 自动化测试-12.selenium的弹出框处理

    前言 不是所有的弹出框都叫alert,在使用alert方法前,先要识别出到底是不是alert.先认清楚alert长什么样子,下次碰到了,就可以用对应方法解决. alert\confirm\prompt ...

  6. How to create your iOS team provisioning profile ?

    From Apple Developer: https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppS ...

  7. window.location.href webkit不兼容

    window.event.returnValue=false; 在location.href后加上后修复 来自为知笔记(Wiz)

  8. python:用wordcloud生成一个文本的词云

    今天学习了wordcloud库,对<三国演义>生成了词云图片,非常漂亮.就想多尝试几个,结果发现一系列问题.最常出现的一个错误就是"UnicodeDecodeError : .. ...

  9. HTML文本元素标签

    <b></b>表示关键字和产品名称如:<b>查看效果</b> 效果:加粗 查看效果 <strong></strong>表示重要的 ...

  10. QT4.8.6-VS2010开发环境配置

    目录 1.下载软件 2.环境配置 3.VAssistX配置 1.下载软件 VS2010下载地址:链接: https://pan.baidu.com/s/1gvPjZWBtSEwW37H1xf2vbA ...