发起跨域的Ajax数据请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./lib/jquery.js"></script>
</head>
<body>
<script>
$.ajax({
method:'GET',
url:'http://ajax.frontend.itheima.net:3006/api/jsonp',
dara:{
name:'zs',
age:20
},
success:function (res){
console.log(res)
}
})
</script>
</body>
</html>
剖析JSONP实现原理（1）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function success(data){
console.log('拿到了Data数据')
console.log(data)
}
</script>
<script>
success({name:'zs',age:20})
</script>
</body>
</html>
剖析JSONP实现原理（2）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function success(data){
console.log('拿到了Data数据')
console.log(data)
}
</script>
<script src="./js/getdata.js?callack=success"></script>
</body>
</html>
实现一个简单的JSONP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function success(data){
console.log('JSONP响回来的数据是:')
console.log(data)
}
</script>
<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=zs&age=20"></script>
</body>
</html>
使用jquery发起JSONP请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./lib/jquery.js"></script>
</head>
<body>
<script>
$(function (){
//发起POST请求
$.ajax({
url:'http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=zs&age=20'
//代表我们要发起JSONP的数据请求
dataType:'jsonp',
jsonp:'callback',
jsonpCallback:'abc',
success:function (res){
console.log(res)
}
})
})
</script>
</body>
</html>
演示jquery发起JSONP请求的过程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./lib/jquery.js"></script>
</head>
<body>
<button id="btn">发起POST请求</button>
<script>
$(function (){
$('#btnJSONP').on('click',function (){
$.ajax({
url:'http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&adress=北京&location=顺义',
dataType:'jsonp',
jsonpCallback:'abc',
success:function (res){
console.log(res)
}
})
})
})
</script>
</body>
</html>
鼠标跟随效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./lib/jquery.js"></script>
</head>
<body>
<button id="btn">发起POST请求</button>
<script>
$(function (){
$('#btnJSONP').on('click',function (){
$.ajax({
url:'http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&adress=北京&location=顺义',
dataType:'jsonp',
jsonpCallback:'abc',
success:function (res){
console.log(res)
}
})
})
})
</script>
</body>
</html>
Q.E.D.