Ajax跨域--JsonP

来源：互联网发布：淘宝企业店铺优势缺点编辑：程序博客网时间：2024/06/04 19:05

本文转载自“@快乐乔巴”，特此声明，如有侵权，望告知删除，谢谢。
原文出处：http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html

说到Ajax跨域，就不得不说一下JavaScript的“同源策略”，正是因为它才有了“跨域”问题。

同源策略(Same-Origin Policy)：

它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript
的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。

先来复习一下域名地址的组成：

http:// www . google : 8080 / script/jquery.js

　　http:// （协议号）

　　www （子域名）

　　google （主域名）

　　 8080 （端口号）

　　script/jquery.js （请求的地址）
　　
当协议、子域名、主域名、端口号中任意一各不相同时，都算不同的“域”。

不同的域之间相互请求资源，就叫“跨域”。

如何解决跨域问题呢？→→→→→→→→→ JSONP（JSON with Padding）。

什么是JSONP:

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

跨域的原理：

script标签的src属性并不被同源策略所约束，所以可以获取任何服务器上脚本并执行。

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

sample.html的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/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。

sample.html部分代码：

<script type="text/javascript" src="http://localhost:20002/test.js"></script>

请保持AB两个Web程序的运行状态，当你再次刷新localhost:20001/sample.html的时候，和原来一样跳出了”success”的对话框，是的，成功访问到了非同源的localhost:20002/test.js这个所谓的远程服务了。到了这一步，相信大家应该已经大概明白如何跨域访问了的原理了。

script标签的src属性并不被同源策略所约束，所以可以获取任何服务器上脚本并执行。

JSONP的实现模式–CallBack

刚才的小例子讲解了跨域的原理，我们回上去再看看JSONP的定义说明中讲到了javascript callback的形式。那我们就来修改下代码，如何实现JSONP的javascript callback的形式。

程序A中sample的部分代码：

<script type="text/javascript">    function callback(data) {        alert(data.message);    }    //添加<script>标签的方法    function addScriptTag(src){    var script = document.createElement('script');        script.setAttribute("type","text/javascript");        script.src = src;        document.body.appendChild(script);    }    window.onload = function(){        addScriptTag("http://localhost:20002/test.js");    }</script>

程序B中test.js的代码：

 //调用callback函数，并以json数据形式作为阐述传递，完成回调 callback({message:"success"});

这其实就是JSONP的简单实现模式，或者说是JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。

　　将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义吧。

本文只截取了原文片段，更多请查阅原文。

阅读全文

0 0