因为ajax的跨域问题,导致在进行跨域操作时,数据无法接收,从而产生了这个不正规但好用的JOSNP技术。
ajax存在跨域问题,但纵观前端技术中,发现我们可以通过src去引用cdn的js,可以通过src去引用网上的某个图片。
那么,我们能通过src去引用js并执行js中的内容吗。答案是肯定的
HTML
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JSONP的应用JS例子</title>
</head>
<body>
<script>
var test = function(data){
alert(data.name+data.age);//获取数据后的逻辑处理
}
var url = "http://localhost:63342/test/test.js"; //设置该js文件的url地址
var script = document.createElement("script"); //创建script标签
script.src = url; //设置script标签的src地址为设置的要跨域的js地址
document.getElementsByTagName('head')[0].appendChild(script); //将该script标签插入head标签内
</script>
</body>
</html>
JavaScript
/*
如在上面js中创建的函数名为test();
如此一来,当调用成功后则执行该函数,并处理数据。
则在下方使用test({//要传输的数据});
如:
test({name:"张三",age:18,sex:"男"});
*/
test({name:"张三",age:18,sex:"男"});
如此以来,便可以通过src的方式进行跨域获取数据。
那么jquery的方式又该如何去使用呢?
尽管jsonp和ajax没有任何关联,但因为jsonp通过前端的方式解决了ajax的跨域问题,所以Jquery将jsonp和ajax封装在了一起
HTML
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JSONP的应用JQUERY例子</title>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
$.ajax({
url:"http://localhost:63342/test/test.js",
type:"get",
dataType:"jsonp",//设置请求格式为jsonp
jsonp: "callback",//设置方式为callback回调
jsonpCallback:"test",//设置回调函数的名称,和要请求的js中函数名称一致
success:function(data){//Jquery直接将结果在success中写出,不需要和原生js一样去自己定义回调函数
alert(data.name+data.age);
}
})
});
</script>
</body>
</html>
/*
如在上面js中创建的函数名为test();
如此一来,当调用成功后则执行该函数,并处理数据。
则在下方使用test({//要传输的数据});
如:
test({name:"张三",age:18,sex:"男"});
*/
test({name:"张三",age:18,sex:"男"});
通过以上方法,便可以使用jquery实现jquery的调用