JS跨域交互(jQuery+php)之jsonp使用心得

<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.10.2.min.js">

效果：在页面尾部增加一条线，以及：getScript ok! ，后面紧跟被调用端返回的它接收到的请求地址：


getScript ok!/test2.php"http://localhost/test2.php">http://localhost/test2.php

test2.php 文件的内容：


<"var reqUrl = \"" . $_SERVER["REQUEST_URI"] . "\";"; 
echo "fncallback({\"reqUrl\": reqUrl });"; 


浏览器访问：
通过浏览器访问，自然没有后面的参数，除非你自己手动加上；
跨域交互二：jQuery.getJSON
调用端：


<script type="text/javascript"> 
//注册页面加载完成回调函数（匿名） 
$(document).ready(function(){ 
//使用getJSON方法调用跨域脚本；注册匿名回调函数 
$.getJSON("http://localhost/test.php", function(data){ 
$(document.body).append("<hr />getJSON ok!" + data.reqUrl); 
}); 
}); 
</script> 


注意：我在请求的地址中添加了“"htmlcode">

getJSON ok!/test.php"htmlcode">

<"var reqUrl = \"" . $_SERVER["REQUEST_URI"] . "\";"; 
echo $_GET["callback"] . "({\"reqUrl\": reqUrl });"; 


通过 $_GET["callback"] 获取客户端传递过来的回调函数名称；看输出：


var reqUrl = "/test.php"; 
jQuery1102019717387174726153_1467262461959({"reqUrl": reqUrl });


跨域交互三：jQuery.ajax
调用端：


<script type="text/javascript"> 
//注册页面加载完成回调函数（匿名） 
$(document).ready(function(){ 
//使用ajax方法调用跨域脚本； 
$.ajax({ 
url:"http://localhost/test.php", 
dataType: 'jsonp', 
success: function(data){ 
$(document.body).append("<hr />ajax ok!" + data.reqUrl); 
} 
}); 
}); 
</script> 


注意：在请求的地址中不需要添加“"color: #ff0000">使用总结
使用 getScript 的方式，你可以自己定义一个回调函数的名称，让服务端响应的时候使用你指定的回调函数名称；


使用 getJSON 的方式关键在于URL后面添加的“callback=?”；


使用 ajax 的方式关键在于参数中的数据类型设置“dataType: 'jsonp',”；
以上所述是小编给大家介绍的JS跨域交互(jQuery+php)之jsonp使用心得，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

                                
                                

                                    js跨域交互jsop 
                                

                                    标签：
                                        
js跨域交互jsop