C++,python,热爱算法和机器学习
全部博文（1214）
分类： JavaScript
2016-09-07 15:44:04
上周客户新买了服务器，原本在旧的服务器上放着客户的Web主页信息和一个后台程序(asp.net)，在客户的主页中有一个动态显示最新消息的处理，这个处理就是通过ajax异步从那个后台程序中取得的。由于又购买了新的服务器，客户想把web主页和那个后台程序分开来，后台程序被部署到了新的服务器上。不过这个项目是我的同事小福同志开发的，也就由他来把程序分开部署，然后进行一些小改动。
"怎么最新消息取不到了，异步处理的url也已经添加上新服务器的地址()，奇怪了..."小福在一边抱怨，我看了看IE7下还出了个脚本错误"アクセスが拒否されました"的错误(环境是日文的，意思是访问被拒绝了)。网上查了下中文环境应该是"没有权限"吧。在Firefox和Chrome上是看不到任何脚本错误的，不过可以通过Firebug工具测出这个错误（"Permission denied to call method XMLHttpRequest.open"）。
为什么会出这样的错误呢？这是因为所有支持Javascript的浏览器都会使用同源策略这个安全策略。看看百度的解释：
同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。
这就是引起为何取不到数据的原因了，那如何才能解决跨域的问题呢？没错，我们现在可以进入正题，来了解下什么是JSONP了。
JSONP和JSON好像啊，他们之间有什么联系吗？
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧，不是很清楚的朋友可以去上了解下，简单易懂。
JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。--来源百度
JSONP就像是JSON+Padding一样(Padding这里我们理解为填充)， 我们先看下面的小例子然后再详细介绍。
光看定义还不是很明白，那首先我们先来手动做个简单易懂的小测试。新建一个asp.net的web程序，添加sample.html网页和一个test.js文件，代码如下：
sample.html的代码：
1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> 2 <html xmlns="" > 3 <head> 4 <title>testtitle> 5 <script type="text/javascript" src="test.js">script> 6 head> 7 <body> 8 body> 9 html>
test.js的代码：
1 alert("success");
打开sample.html后会跳出"success”这样的这样的信息框，这似乎并不能说明什么， 跨域问题到底怎么解决呢？好，现在我们模拟下非同源的环境，刚才我们不是已经用Visual Studio新建了一个Web程序吗(这里我们叫A程序)，现在我们再打开一个新的Visual Studio再新建一个Web程序(B程序)，将我们的之前的test.js文件从A程序中移除然后拷贝到B程序中。两个程序都运行起来后，Visual Studio会启动内置服务器，假设A程序是localhost:20001,B程序是localhost:20002，这就模拟了一个非同源的环境了(虽然域名相同但端口号不同，所以是非同源的)。
OK，我们接下来应该改下sample.html里的代码，因为test.js文件在B程序上了，url也就变成了localhost:20002。
sample.html部分代码：
1 <script type="text/javascript" src="">script>
请保持AB两个Web程序的运行状态，当你再次刷新localhost:20001/sample.html的时候，和原来一样跳出了"success"的对话框，是的，成功访问到了非同源的localhost:20002/test.js这个所谓的远程服务了。到了这一步，相信大家应该已经大概明白如何跨域访问了的原理了。