[前端]jsonp

mac2022-06-30  87

jsonp 

之前清蒸了几只ajax螃蟹,味道不错,不过呢?螃蟹虽好,肉却太少哦!

ajax出现,解决了页面不刷新的情况下与后台进行通讯与数据交换,但是有一个致命的缺陷,他是不能跨域的。

 

跨域:  <==慨念问题点左边

总之端口号那个冒号前面的任何一个地方不一样都是跨域请求。

 

我们知道  img标签的src   script标签的src 是可以进行跨域请求数据的,于是不知是哪位大神,异想天开曲线救国,使用script标签进行后台的数据获取,

当然这个script标签是我们用js脚本动态生成的,举个栗子

首先我准备一个写好的脚本

1.js

funDemo({"result":"远程数据"});

再写一个html文件

1.html

<!DOCTYPE html > <head> <title>1</title> <script type="text/javascript"> var funDemo= function(data){ alert( data.result); }; </script> <script type="text/javascript" src="http://aaa.com/1.js"></script> </head> <body> </body> </html>

function funDemo(data){alert(data.result);} 函数这么声明也是一样的!!!

其实就是在html文件上声明一个名字叫,funDemo的函数,里面有一个参数

然后,执行了一个远程的(跨域的)js代码,调用了这个函数,远程的js提供数据,作为参数

funDemo({"result":"远程数据"});

 

那么新问题来了,虽然能这样获取到远程的数据,但是这个函数名必须与后台的函数名保持一致,解决方案是在src的后面提供一个函数名的参数,

后台的程序根据函数名动态的生成这个js文件

1.html 修改

<script type="text/javascript" src="http://aaa.com/1.php?&callback=funDemo"></script>

后台的话可以考虑用字符串拼接的方式来返回这个js

1.php

<?php header('Content-Type:application/x-javascript'); $callback=$_REQUEST['callback']; echo "function $callback(data){alert(data.result);}" >

我稀烂的PHP也不知道有没有写对=.=

这样就大功告成了。

 

jQuery里面的jsonp是放在ajax里面的,但是真心半毛钱关系木有呀!!

螃蟹可以吃,虾也可以吃,都是清蒸,一样的做法。但是他们真心不是一种东西!!!!

附赠ajax中使用jsonp

$.ajax({ type : "get", url : "1.php", dataType : "jsonp", jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback) jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名 success : function(json){ //do something }, error:function(){ //do something } });

 

 

 

 

    

转载于:https://www.cnblogs.com/alasq/p/5986537.html

最新回复(0)