jsonp与ajax

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]参数表示加载成功时执行的回调函数。