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){
}
});