Javascript-jsonp原理

1.项目中遇到跨域请求的,很多情况会用到jsonp。
2.jsonp是怎样实现跨域请求的那,原理是怎么实现的那,为什么会用到jsonp(这是因为同源策略。它是由 Netscape 提出的一个著名的安全策略,现在所有支持 JavaScript 的浏览器都会使用这个策略。)
客户端模拟(jsonp原理使用script标签的src属性实现跨域请求的)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP</title>
</head>
<body>
<div id="jsonp"></div>
<script type="text/javascript">
function callbackFunction(result, methodName)
{
   var html = '<ul>';
   for(var i = 0; i < result.length; i++){
  html += '<li>' + result[i] + '</li>';
   }
   html += '</ul>';
   document.getElementById('jsonp').innerHTML = html;
}
</script>
<script type="text/javascript" src="https://aaaa/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>

服务端(jsonp.php)
<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["hello","world"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>

3.jsonp项目中都是使用JQuery中的ajax异步请求,要求:请求地址,类型,数据类型等参数
4.前台js要定义jsonp方法的回调函数名
$.ajax({
    url: 'https://**********',
    type: "post",
   dataType:'JSONP',
    jsonp:'jsonpcallback',
    jsonpCallback:"fun",
    cache:true,
    success: function(data){
    }
});

posted on 2019-10-09 10:39  (代码小工)  阅读(153)  评论(0编辑  收藏  举报