一、跨域请求概念
请求在域名、端口或协议不同的服务器上的数据过程
二、原生js跨域请求
先获取接口URL并设置相应的参数，如回调函数，然后把URL添加到createElement（“script”）生成的script标签的src属性上，append到主页面中，然后编写回调函数来解析接口获得的数据
客户端
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>jsonp</title>
6 </head>
7 <body>
8 <script type="text/javascript">
9 function cb(data){
10 console.log(data);
11 }
12 </script>
13 <!--script中的src调用了cb并返回数据 -->
14 <script type="text/javascript" src="jsonp.php?_jsonp=cb"></script>
15 </body>
16 </html>
服务器端(自写的接口)
1 /*name：jsonp.php*/
2 <?php
3 $callback = $_GET[‘_jsonp‘];
4
5 $arr = array("zhangsan","lisi","zhaoliu");
6
7
8 echo $callback."(".json_encode($arr).")";
9
10 ?>
其中cb是回调函数
三、jsonp方式跨域
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>jquery跨域jsonp</title>
6 </head>
7 <body>
8 <input type="button" id="btn" value="点击">
9 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
10 <script type="text/javascript">
11 $(function(){
12
13 $.ajax({
14 type : "get",
15 async: false,
16 url : "./jsonp.php",
17 dataType : "jsonp",
18 jsonp: "cb",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
19 jsonpCallback:"fn",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名(类似：jQuery1102016820125747472048_1450147653563(["zhangsan", "lisi", "wangwu"]);)
20 success : function(data){
21 console.log(data);
22 },
23 error:function(){
24 console.log(‘fail‘);
25 }
26 });
27
28 });
29
30 </script>
31 </body>
32 </html>
接口
1 <?php 2 $fn = $_GET[‘cb‘];//获取参数：回调函数的名字 3 $arr = array(‘zhangsan‘,‘lisi‘,‘wangwu‘); 4 echo $fn.‘(‘.json_encode($arr).‘);‘;//callback([‘zhangsan‘,‘lisi‘,‘wangwu‘]); 5 ?>
时间： 2024-10-12 09:46:59