温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

AJAX 跨域请求 - JSONP获取JSON数据

发布时间:2020-07-03 03:49:31 来源:网络 阅读:932 作者:umgsai 栏目:web开发

同一个url,使用普通的http请求和使用Ajax请求时,在请求头里有一个字段不同。

Ajax请求

AJAX 跨域请求 - JSONP获取JSON数据

普通http请求

AJAX 跨域请求 - JSONP获取JSON数据

可见如果 Ajax请求,请求头中多了一个字段X-Requested-With:XMLHttpRequest

通过这个字段阻止跨域请求。

JSONP是一种跨域交换协议,具体介绍网上很多,这里记录一个例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
     <title>Untitled Page</title>
     <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
     <script type="text/javascript">
     jQuery(document).ready(function(){
        $.ajax({
             type: "get",
             async: false,
             url: "http://localhost/jquery-autocomplete/demo/json.php",
             dataType: "jsonp",
             jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
             success: function(result){
                 alert(result.employees.length);
             },
             error: function(){
                 alert('fail');
             }
         });
     });
     </script>
     </head>
  <body>
  </body>
 </html>

后端json.php

<?php
$callback=$_GET['callback']; 
$result = "{\"employees\": [ { \"firstName\":\"Bill\" , \"lastName\":\"Gates\" }, { \"firstName\":\"George\" , \"lastName\":\"Bush\" } ] }";
echo $callback."($result)";
?>

浏览器请求http://localhost/jquery-autocomplete/demo/json.php?callback=flightHandler

返回的数据为

flightHandler({"employees": [ { "firstName":"Bill" , "lastName":"Gates" 
}, { "firstName":"George" , "lastName":"Bush" }, { "firstName":"Thomas" ,
 "lastName":"Carter" } ] })

浏览器端弹出alert提示,跨域请求成功。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI