首页 > 开发 > AJAX > 正文

浅析JSONP之解决ajax跨域问题

2024-09-01 08:28:23
字体:
来源:转载
供稿:网友

JSON和JSONP

  JSONP和JSON好像啊,他们之间有什么联系吗?

  JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧,不是很清楚的朋友可以去json.org上了解下,简单易懂。

  JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

  JSONP就像是JSON+Padding一样(Padding这里我们理解为填充), 我们先看下面的小例子然后再详细介绍。

同源策略

  为什么会出这样的错误呢?这是因为所有支持Javascript的浏览器都会使用同源策略这个安全策略。看看百度的解释:

  同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。

  这就是引起为何取不到数据的原因了,那如何才能解决跨域的问题呢?没错,我们现在可以进入正题,来了解下什么是JSONP了。

跨域的简单原理

  光看定义还不是很明白,那首先我们先来手动做个简单易懂的小测试。新建一个asp.net的web程序,添加sample.html网页和一个test.js文件,代码如下:

sample.html的代码:

 <!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd"> <html xmlns="http://www.w.org//xhtml" > <head>   <title>test</title>   <script type="text/javascript" src="test.js"></script> </head> <body> </body> </html>

test.js的代码:

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。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表