jsonp思维导图:
1、定义
2、为什么用
3、json原理
4、优缺点
何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术?

JSON和JSONP??
虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方,JSON是地下党们用来书写和交换情报的“暗号”,而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。看到没?一个是描述信息的格式,一个是信息传递双方约定的方法。

1、定义
跨域:就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下的对象或数据。简单理解同一个域就是:相同域名、相同端口、相同协议!
跨域访问,简单来说就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容。由于安全原因,跨域访问是被各大浏览器所默认禁止的。
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。
即:可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
其实JSONP跨域技术本质上是创建<script>标签,并通过其src指向跨域地址而实现跨域获取数据。
利用具有跨域能力的标签(<script></script> <img> <iframe> <link>)
2、为什么用
ajax不能解决跨域,引出jsonp来实现跨域。
为什么我们从不同的域(网站)访问数据需要一个特殊的技术(JSONP )呢?这是因为同源策略。
同源策略:就是阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。即受到请求的URL的域必须与当前Web页面的域相同,意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。
解决跨域
参考理论一:在浏览器中不能直接来跨域访问,而在服务器端没有跨域安全限制。
这样的话,可以在服务端完成跨域访问,而在客户端来取得结果就可以了。
参考理论二:同源策略不阻止动态脚本元素插入,脚本访问可以跨域。
用服务器端的XmlHttpRequest代理实现跨域访问
只要让用户添加一个script标签,这个script标签的src属性指向我们api的url,并提供 api需要的一些参数,通常其中包括了一个作为callback的js函数名。针对这个脚本请求,我们服务器端的http handler会根据url中携带的参数,生成并返回相应的脚本,通常这个脚本的内容是调用callback函数,并传入用户需要的数据作为参数。
可以通过script标签远程引用其他域名下的脚本文件的。而且,script标签的 src属性不一定必须是一个存在的js文件,也可以是一个http handler的url,只要这个http handler返回的是一个text/javascript类型的响应就可以了。
“同源策略”的意义
“同源策略”有效地阻止了一些危险行为,如你同时打开多个网站时,其中有一个木马网站,那么木马网站就有可能窃取其他网站上关于你的信息或资料(因为多个网站间是可以相互通信的),给网上用户带来很大的泄密风险。正是由于有了“同源策略”,才大大降低了这种风险,由于木马网站与其他你浏览的网站不同源,因此无法相互间通信访问、获取数据等。
“同源策略”的不足
虽然“同源策略”在一定程度上保护了用户的网络安全,但如果有时就是需要让www.aaa.com取得www.bbb.com上的数据,同样是因为”同源策略”造成无法从自己信任的其他网页上取得数据。
3、jsonp原理
JSONP(JSON with Padding),就是异步请求跨域的服务器端时,不是直接返回数据,而是返回一个js方法,把数据作为参数传过来。如果只是跨域传递数据那么这种方式是比较好的。字面理解就是:利用内填充的原理,将json填充到一个box中的概念。

4、优缺点

------------------------------------------------------------------

1、被jquery简化的ajax
eg:$.ajax({
url:"", //请求路径
type:"post/get", 默认get
data:{name:name}, //发送数据以键值对格式发送
async:true/false, 默认异步true; 同步false
success:function(e){ e只是形参
//ajax返回值
}
})
可选项参数[options]为$.ajax()方法中的请求设置,其格式为key/value,既包含发送请求的参数,也含有服务器相应后回调的数据。

Ajax在Jquery中的实现
在Jquery中的Ajax是js的封装,常用的Ajax操作的方法
1、$(选择器).load(url,[data],[callback]) 加载html格式的数据
2、$.get() 加载xml格式的数据
3、$.post()
载入远程HTML文件到DOM ,返回数据,字符串 $.get(url,data,callback)
4、$.getJSON(url,[data],[callback]) 直接返回数据就是json对象格式
5、$.ajax()
6、$.getScript():加载js格式的数据
注:参数url表示请求的地址,可选项[data]参数表示发送到服务器的数据,其格式为key/value。可选项[callback]参数表示加载成功时执行的回调函数。

jsonp与ajax的更多相关文章

  1. 关于试用jquery的jsonp实现ajax跨域请求数据的问题

    我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...

  2. jQuery中利用JSONP解决AJAX跨域问题

    写在前面 跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨 ...

  3. JSON、JSONP、Ajax的区别

    什么是JSON JSON是一种基于文本的数据交换方式,或者叫做数据描述格式. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量 ...

  4. jsonp,ajax,json问题

    JSONP技术 JSONP是解决跨域问题的一种常见方式 跨域问题,因为浏览器有同源策略,所以当不同域间进行数据交互的时候就会出现跨域问题 同源策略:只有在同协议.同域名.同端口的情况下才能进去数据交互 ...

  5. 小渣渣的json和jsonp和ajax的实质和区别

    json和jsonp和ajax的实质和区别ajax的两个问题 1.ajax以何种格式来交换数据 2.跨域的需求如何解决 数据跨域用自定义字符串或者用XML来描述 跨域可以用服务器代理来解决jsonp来 ...

  6. jsonp和ajax的区别

    一.Ajax工作原理 相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化.对于用户请求ajax引擎会做一些数据验证和数据处理,不是所有请求都提交给服务器,当需要从服务 ...

  7. Jsonp实现Ajax跨域Demo

    JSONP 1.一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准: 2.不过我们又发现,Web页面上调用j ...

  8. JSONP实现Ajax跨域请求

    前言 由于浏览器存在同源策略的机制,所谓同源策略就是阻止从一个源(域名,包括同一个根域名下的不同二级域名)加载的文档或者脚本获取/或者设置另一个源加载的文档属性. 但比较特别的是:由于同源策略是浏览器 ...

  9. JSONP解决ajax跨域问题

    在A域名下,用ajax请求B域名下的请求,会报类似这样的错误:No 'Access-Control-Allow-Origin' header is present on the requested r ...

随机推荐

  1. select、epoll、twisted网络编程

    select.poll和epoll的区别 select select最早于1983年出现在4.2BSD中,它通过一个select()系统调用来监视多个文件描述符的数组,当select()返回后,该数组 ...

  2. PHP性能优化简述

    先谢慕课网,这里只做理论简述/** * PHP性能优化 * * 1.问题分析 * PHP语法使用不正确 * PHP不擅长的事 * PHP连接的服务不给力 * PHP自身短板 * 其它原因 * 2.PH ...

  3. 删除svn文件的批处理文件

    @echo on color 2f mode con: cols=80 lines=25 @REM @echo 正在清理SVN文件,请稍候...... @rem 循环删除当前目录及子目录下所有的SVN ...

  4. androidannotations 简单配置

    1.build.gradle 需要添加的内容 标注的颜色是新建项目之后,build.gradle文件需要添加的内容. buildscript { repositories { jcenter() } ...

  5. RPC应用的java实现(转)

    一.RPC介绍 什么是RPC?Remote Procedure Call,远程过程调用.也就是说,调用过程代码并不是在调用者本地运行,而是要实现调用者与被调用者二地之间的连接与通信.比较严格的定义是: ...

  6. json传值以及ajax接收

    一开始进入公司,做起项目来比较不知所措,现在一个月过去了,越来越得心应手,下面是json向前端传值以及前端ajax接收,给自己记下也分享给大家. 这是两个类型不同的json与ajax的数据交互(集合. ...

  7. PHP 判断是否为Get/Post/Ajax提交

    <?php PHP 判断是否为Get/Post/Ajax提交 /** * 是否是AJAx提交的 * @return bool */ function isAjax(){ if(isset($_S ...

  8. AVL树模板

    ///AVL树模板 typedef struct Node ///树的节点 { int val,data; int h; ///以当前结点为根结点的数的高度 int bf; ///平衡因子(左子树高度 ...

  9. Notepad++ 快捷键 大全

    Notepad++ 快捷键 大全Ctrl+C 复制Ctrl+X 剪切Ctrl+V 粘贴Ctrl+Z 撤消Ctrl+Y 恢复Ctrl+A 全选Ctrl+F 键查找对话框启动Ctrl+H 查找/替换对话框 ...

  10. mysql提示2002错误的解决方法

    前两天,负责的一个项目出现问题,总是提示"SQLSTATE[HY000] [2002] 由于目标计算机积极拒绝,无法连接",由于负责服务器的同事联系不到,我无法登陆服务器查看原因, ...