web三种跨域请求数据方法
来源:互联网 发布:外汇编程自动交易 编辑:程序博客网 时间:2024/06/05 08:29
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" id="loadjson"></script>
<script type="text/javascript">
// 第一种
// 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));
}
});
/*
第二种JSONP:
在客户端动态注册一个函数function test(data),然后将函数名传到服务器,服务器返回一个test({json})到客户端运行,这样就调用客户端的function test(data),从而实现了跨域,jquery已经支持jsonp
*/
// 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));
}
});
/*
第三种,原理与jsonp类似,web页面上调用js文件时不受跨域影响,
只要利用<script>标签的src属性,动态加载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 id="json">
</div>
<br/>
jsonp跨域:
<div id="jsonp">
</div>
<br/>
js请求实现跨域:
<div id="js">
</div>
</body>
</html>
IE9测试,页面输出内容
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" id="loadjson"></script>
<script type="text/javascript">
// 第一种
// 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));
}
});
/*
第二种JSONP:
在客户端动态注册一个函数function test(data),然后将函数名传到服务器,服务器返回一个test({json})到客户端运行,这样就调用客户端的function test(data),从而实现了跨域,jquery已经支持jsonp
*/
// 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));
}
});
/*
第三种,原理与jsonp类似,web页面上调用js文件时不受跨域影响,
只要利用<script>标签的src属性,动态加载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 id="json">
</div>
<br/>
jsonp跨域:
<div id="jsonp">
</div>
<br/>
js请求实现跨域:
<div id="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);
?>
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 . ")";
?>
$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);
header('Content-type:application/x-javascript');
echo "$method($jsonData);";
?>
$method = $_REQUEST['method'];
$name = $_REQUEST['name'];
$result = array('success'=>1, 'name'=>$name);
$jsonData = json_encode($result);
header('Content-type:application/x-javascript');
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"}
0 0
- web三种跨域请求数据方法
- web三种跨域请求数据方法
- web三种跨域请求数据方法
- web的请求方法
- ASP.NET Web API 记录请求响应数据到日志的一个方法
- java web项目,post请求发送数据太大的处理方法
- java web项目,post请求发送数据太大的处理方法
- Android HTTPPOST方法请求数据
- Android HTTPPOST方法请求数据
- 网络请求数据 POST 方法
- 数据请求:NSURLConnection ,代理方法
- swift网络数据请求方法
- swift网络数据请求方法
- OkHttp请求数据的方法
- 一个反射方法响应web平台所有ajax数据请求,让web开发速度提高一倍
- IOS请求WEB应用的方法
- IOS请求WEB应用的方法
- web 开发中的各种页面的提交请求数据方法汇总(持续更新,内容收集来自各网络)
- 我的shiro之旅: 十八 例子源码
- 动手敲算法——快速排序
- Python中的迭代器iterator和yield生成器(constructor)
- Java Synchronized详解
- Spring中@Autowired注解,@Resource注解和xml default-autowire区别
- web三种跨域请求数据方法
- cookie session 区别
- CodeBlocks Code Template
- Oracle Linux 7.1 静默安装数据库软件时报错
- iOS8 WebKit库之——WKWebView篇
- win7 台式机建热点
- c/c++的|、||、&、&&、异或、~、!运算
- angular2 把TypeScript像写java那样面向接口编程 哈哈
- 谁偷了我的热更新?Mono,JIT,iOS