解决ajax跨域问题-深入浅出JSONP

翻译

布道8848 2023-04-30 07:20:05 博主文章分类：前端

文章标签 jsonp ajax 异步 json javascript 文章分类 HarmonyOS 后端开发

问题描述：Ajax怎么无法获取另一个网站的最新消息呢,这就是引起为何取不到数据的原因了，那如何才能解决跨域的问题呢？
这是因为所有支持Javascript的浏览器都会使用同源策略这个安全策略。看看百度的解释：
同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来百度和谷歌的页面当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。
JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。JSON系统开发方法是一种典型的面向数据结构的分析和设计方法，以活动为中心，一连串的活动的顺序组合成一个完整的工作进程。

1、JSON和JSONP

JSONP和JSON好像啊，他们之间有什么联系吗？
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧，不是很清楚的朋友可以去json.org上了解下，简单易懂。
JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
JSONP就像是JSON+Padding一样(Padding这里我们理解为填充)，我们先看下面的小例子然后再详细介绍。

2、跨域的简单原理

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

<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属性并不被同源策略所约束，所以可以获取任何服务器上脚本并执行。

3、JSONP的实现模式--CallBack

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

//程序A中sample的部分代码： 
<script type="text/javascript">
 //回调函数
 function callback(data) {
     alert(data.message);
 }
 </script>
 <script type="text/javascript" src="http://localhost:20002/test.js"></script>

//程序B中test.js的代码：调用callback函数，并以json数据形式作为阐述传递，完成回调
callback({message:"success"});

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

一般情况下，我们希望这个script标签能够动态的调用，而不是像上面因为固定在html里面所以没等页面显示就执行了，很不灵活。我们可以通过javascript动态的创建script标签，这样我们就可以灵活调用远程服务了。程序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>

上面的例子是最简单的JSONP的实现模型，不过它还算不上一个真正的JSONP服务。我们来看一下真正的JSONP服务是怎么样的，比如Google的ajax搜索接口：http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=?&callback=? q=?这个问号是表示你要搜索的内容，最重要的是第二个callback=?这个是正如其名表示回调函数的名称，也就是将你自己在客户端定义的回调函数的函数名传送给服务端，服务端则会返回以你定义的回调函数名的方法，将获取的json数据传入这个方法完成回调。有点罗嗦了，还是看看实现代码吧：

<script type="text/javascript">
    //添加<script>标签的方法
    function addScriptTag(src){
        var script = document.createElement('script');
        script.setAttribute("type","text/javascript");
        script.src = src;
        document.body.appendChild(script);
    }
    
    window.onload = function(){
        //搜索apple，将自定义的回调函数名result传入callback参数中
        addScriptTag("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=apple&callback=result");
        
    }
    //自定义的回调函数result
    function result(data) {
        //我们就简单的获取apple搜索结果的第一条记录中url数据
        alert(data.responseData.results[0].unescapedUrl);
    }
</script>

像这样的JSONP服务还有很多：

Digg API：来自 Digg 的头条新闻：http://services.digg.com/stories/top?appkey=http%3A%2F%2Fmashup.com&type=javascript&callback=?
Geonames API：邮编的位置信息：http://www.geonames.org/postalCodeLookupJSON?postalcode=10504&country=US&callback=?
Flickr JSONP API：载入最新猫的图片：http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?
Yahoo Local Search API：在邮编为 10504 的地区搜索比萨：http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza&zip=10504&results=2&output=json&callback=?

接下来我们自己来创建一个简单的远程服务，实现和上面一样的JSONP服务。还是利用Web程序A和程序B来做演示，这次我们在程序B上创建一个MyService.ashx文件。程序B的test.js代码不变，我们再执行下程序，是不是和原来的一样呢。如果我们再想调用一个远程服务的话，只要添加addScriptTag方法，传入远程服务的src值就可以了。这里说明下为什么要将addScriptTag方法放入到window.onload的方法里，原因是addScriptTag方法中有句document.body.appendChild(script);，这个script标签是被添加到body里的，由于我们写的javascript代码是在head标签中，document.body还没有初始化完毕呢，所以我们要通过window.onload方法先初始化页面，这样才不会出错。

4、jquery使用jsonp进行跨域调用

关于JSONP的概念和为什么要使用JSONP网上已经有很多教程，这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用
首先介绍下$.ajax的参数
type：请求方式 GET/POST
url:请求地址
async:布尔类型，默认为true 表示请求是否为异步，如果为false表示为同步。
dataType：返回的数据类型
jsonp：传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback：自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success：调用成功执行的函数
error：异常处理函数
示例：服务器端我们采用MVC的ACTION来返回数据

public class HomeController : Controller { 
       // GET: /Home/ 	   
       public ActionResult Index() 
       { 
           returnView(); 
       } 	   
       public ActionResult ReturnJson() 
       { 
           string callback = Request.QueryString["callback"]; 
           string json = "{'name':'张三','age':'20'}"; 
           string result = string.Format("{0}({1})", callback, json); 
           returnContent(result); 
       }   
}

客户端使用jsonp来传输数据

@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
}    
<script src="~/Scripts/jquery-1.7.1.min.js"type="text/javascript"> </script> 
 <script type="text/javascript"> 
     functionSendData() 
     { 
         $.ajax({ 
             type: "get", 
             async: false, 
             url: "/home/ReturnJson", 
             dataType: "jsonp", 
             success: function(data){ 
                 alert(data.name); 
             }, 
             error: function(){ 
                 alert('fail'); 
             } 
         }); 
     } 
 </script>    
<input  type="button" value="提交" onclick="SendData();"/>

点击提交按钮后，发现服务器端的Request.QueryString["callback"]返回一个随机函数名。这样就被设置成JSONP格式来传递数据了。可以在传递过程中自定义函数名，只要使用jsonpCallback参数就可以了。
jsonp:表示传递的参数，默认为callback，我们也可以自定义，服务器段通过此参数，获取自定义的函数名称，服务器这样获取 Request.QueryString["callback"]
jsonpCallback表示传递的参数值，也就是回调的函数名称，这是自定义的名称。

<script type="text/javascript"> 
	    functionSendData() { 
	        $.ajax({ 
	            type: "get", 
	            async: false, 
	            url: "/home/ReturnJson", 
	            dataType: "jsonp", 
	            jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) 
	            jsonpCallback: "receive",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据 
	            success: function(data) { 
	                alert(data.name); 
	            }, 
	            error: function() { 
	                alert('fail'); 
	            } 
	        }); 
	    } 
	   
	    functionreceive(data) { 
	        alert(data.age); 
	    } 
	</script>