首先我们来看一组代码：
http://a.com/index.html下面代码如下;
http://b.com/index.php代码如下：
访问http://a.com/index.html，得到如下结果：
这个错误的意思其实就是：浏览器不允许你从a.com这个网站通过ajax去请求b.com网站里面的内容。
为什么会出现这个错误？
这就要回到浏览器的安全机制上，浏览器有一种安全机制，就是同源策略，所谓同源是指域名，协议，端口相同。现在所有支持JavaScript 的浏览器都会使用这个策略。策略的内容是当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面，当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。
因此上图中的报错，也就有了合理的解释，当a.com页面上的ajax脚本去请求b.com页面上的内容的时候，浏览器会判断这个js的脚本的所属页面与请求的页面否是来自于同一个源（即域名，协议，端口是否相同），如果不是，那么浏览器就会拒绝这个操作，然后弹出报错。
上面的问题中，a.com下面的js脚本去请求b.com下面的页面，这种不同源页面之间的脚本访问，叫做“跨域”；
基于跨域的问题，引出我们今天的主角，jsonp（json with padding的简写，意思是插入的json）。
jsonp是目前使用的比较多的处理方式。
当然，处理这个问题其实有很多种解决方案，比如：
1 flash在xml白名单中添加不同源的站点（具体的不在这里详细描述）
2 通过后端程序做代理的方式，比如a.com下的index.html页面先请求a.com/get.php，a.com/get.php去请求b.com/index.php页面的内容，然后返回给a.com/index.html页面。
3通过jsonp的方式去实现。
接下来，我们主要讲解一下jsonp的原理和实现的方式。
网友评论