a1exlism
10/14/2017 - 6:34 AM

exmaple_JSONP

Refer: http://blog.csdn.net/longxingzhiwen/article/details/55657168 AJAX - API: http://api.jquery.com/jQuery.ajax/

server.php
content_copyfile_download
<?php
$img_src = 'http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/dogelog.jpg';

$callbackFunc = $_GET['jsonpRequest'];
if (isset ($callbackFunc) && $callbackFunc == 'imgAdd') {
    // header('Content-type: application/json');
    echo $callbackFunc.'('.json_encode($img_src).')';
}
jsonp.js
content_copyfile_download
function imgAdd(address) {
  $('#img').attr('src', address);
}
window.onload = function () {
  setTimeout($.ajax({
    url: 'http://t3st.com',
    type: 'GET',
    dataType: 'jsonp',
    crossDomain: true,  //  强制跨域
    jsonp: 'jsonpRequest',  //  key
    jsonpCallback: 'imgAdd', // value
    //  jsonp & jsonpCallback 绑定使用 jsonp改变了原来的回调函数名callback
    //  关于安全性, 可以设置jsonp: false
    //  测试下来差不多就是 jsonp=jsonpCallback
    // success: function (data) {
    //   if (data) {
    //     console.log(data);
    //   }
    // },
  }), 500);
  console.log(1);
}
index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>TEST</title>
</head>

<body>
  <h1 style="text-align:center;">TEST</h1>
  <img id="img" src="" alt="img">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
  <script src="./jsonp.js"></script>
</body>

</html>