因为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的调用
网友评论