发起跨域的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.