jsonp一个熟悉的名字,做为一个不牛逼的前端总是不断的复制别人写的跨域调用,今天终于理解了跨域ajax请求前端和后端的结合了。
本人理解上可能有误,如有错误请忽略
首先稍微理解下jsonp,
jsonp我今天的理解就是浏览器跨域请求返回一个js函数字符串,返回一个有效的可执行的js标签。
上案例
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跨域调用</title>
<script type="text/javascript" src="jquery.mini.js"></script>
</head>
<body>
<input type="button" οnclick="getTime()" value="跨域按钮">
<script type="text/javascript">
function showJson(data){
//result= data;
alert(data);
}
function getTime(){
var url = 'http://yichou:81/zhang.php?callback=showJson';
$.ajax({
url:url,
dataType:"jsonp",
success: function(msg){
alert(msg.err);
},
error:function(){
alert('请求失败');
}
});
}
</script>
</body>
</html>
showJson(data)函数 作为 jsonp回调函数 必须存在 因为后台返回的是一个有效的js函数调用字符串 不存在将导致失败
var url = 'http://yichou:81/zhang.php?callback=showJson'; 此处跟其他的ajax调用一样 是请求的url 注意 此处必须传递要一个参数 做为jsonp的回调函数 就是定义的showJson函数
dataType:"jsonp" 定义为jsonp
其他的参数就不做解释了
php
$data = json_encode(array('err'=>'跨域调用','code'=>'你错了'));
echo $_GET['callback'].'('.$data.')';
此处就可以看到传递的callback的用处
后台返回的就是回调函数即
showJson('{"err":"\u8de8\u57df\u8c03\u7528","code":"\u4f60\u9519\u4e86"}')
返回的是一个有效的可执行的js函数调用的字符串
请求成功 $data 就作为返回的结果可在success中使用
注意事项:
必须要有回调函数,回调函数必须跟后台程序返回函数名称一致 本人理解有限 希望大家多多指导
更多推荐
jsonp 前端和后端的结合
发布评论