web三种跨域请求数据方法

时间：2016-07-06 13:06:43 阅读：164 评论：0 收藏：0 [点我收藏+]

标签：

web三种跨域请求数据方法

以下测试代码使用php，浏览器测试使用IE9,chrome,firefox,safari

<!DOCTYPE HTML>

<html>

<head>

// 第一种

// test1.php在服务器设置请允许跨域(注意：IE9测试不通过)

$.ajax({

type: ‘POST‘,

url: ‘http://127.0.0.1:8081/test/test1.php‘,

data: ‘name=penngo‘,

dataType: ‘json‘,

success: function(msg){

$(‘#json‘).html(JSON.stringify(msg));

}

});

// 第二种

// test2.php使用jsonp

$.ajax({

type: ‘GET‘,

url: ‘http://127.0.0.1:8081/test/test2.php?callback=?‘,

data: ‘name=penngo‘,

dataType: ‘jsonp‘,

success: function(msg){

$(‘#jsonp‘).html(JSON.stringify(msg));

}

});

// 使用js标签加载方式,该方式为异步，通过testjs()回调

var testjs = function(msg){

$(‘#js‘).html(JSON.stringify(msg));

}

$(‘#loadjson‘)[0].src = ‘http://127.0.0.1:8081/test/test3.php?method=testjs&name=penngo‘;

</script>

</head>

<body>

header跨域:

</div>

<br/>

jsonp跨域:

</div>

<br/>

js请求实现跨域:

</div>

</body>

</html>

服务器端处理

test1.php

<?php

header("Access-Control-Allow-Origin: *");

$name = $_REQUEST[‘name‘];

$result = array(‘success‘=>1, ‘name‘=>$name);

echo json_encode($result);

test2.php

<?php

$callback = $_REQUEST[‘callback‘];

$name = $_REQUEST[‘name‘];

$result = array(‘success‘=>1, ‘name‘=>$name);

$jsonData = json_encode($result);

echo $callback . "(" . $jsonData . ")";

test3.php

<?php

$method = $_REQUEST[‘method‘];

$name = $_REQUEST[‘name‘];

$result = array(‘success‘=>1, ‘name‘=>$name);

$jsonData = json_encode($result);

echo "$method($jsonData);";

IE9测试，页面输出内容

header跨域:

jsonp跨域:

{"success":1,"name":"penngo"}

js请求实现跨域:

{"success":1,"name":"penngo"}

chrome,firefox,safari测试，页面输出内容

header跨域:

{"success":1,"name":"penngo"}

jsonp跨域:

{"success":1,"name":"penngo"}

js请求实现跨域:

{"success":1,"name":"penngo"}

web三种跨域请求数据方法

标签：

原文地址：http://www.cnblogs.com/lxg0/p/5646437.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行