（注：本文由一九八网络科技V客学院PHP工程师原创，转载请注明出处，谢谢！）
第一：为什么要跨域
为了解决同源策略问题，换一句话说就是放在两个服务器的页面之间是不能进行通信。比如：http://www.a.com/test.html与http://www.b.com/test.php之间不能进行数据访问。
第二：跨域的几个概念
1、jsonp:是json的一种使用模式
2、跨域：就是两个不在同一台服务器上的页面进行数据访问。
第三：跨域的几个步骤
1、静态页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="jquery-1.5.2.min.js"></script>
<script src="ajax.js"></script>
</head>
<body>
<form name="form_info">
<input type="text" name="user_name">
<input type="text" name="user_sex">
<input type="button" id="user_btn" value="button" />
</form>
</body>
</html>
2、js页面
ajax.js
$(document).ready(function(){
$("#user_btn").click(function(k) {
//...
var info = $("form_info").serializeArray();//序列化name/value
$.ajax({
type: 'GET', //这里用GET
url: 'ajax.php',
dataType: 'jsonp', //类型
data: info,
jsonp: 'callback', //jsonp回调参数，必需
async: false,
success: function(result) {//返回的json数据
alert(result.message); //回调输出
result = result || {};
if (result.msg=='err'){
alert(result.info);
}else if (result.msg=="ok"){
alert('提交成功');
}else{
alert('提交失败');
}
}
})
//...
});
});
3、PHP页面
<?php
$callback = isset($_GET['callback']) ? trim($_GET['callback']) : ''; //jsonp回调参数，必需
$date = array("age"=>$_GET['user_name'], "message"=>$_GET['user_sex']);
$date["msg"]="err";
$date["info"]="发送失败";
$tmp= json_encode($date); //json 数据
echo $callback . '(' . $tmp .')'; //返回格式，必需
?>
第四：总结
通过上面几个步骤，对上面每个步骤进行总结
1、静态页面:要引入jquery包，可以到官网去下载;静态页面的元素可以接收跨域接收过来的数据.
2、js页面:jsonp: 'callback', //jsonp回调参数，必需;dataType: 'jsonp', //类型
3、$callback = isset($_GET['callback']) ? trim($_GET['callback']) : ''; //jsonp回调参数，必需
（本文原创：管工，一九八网络科技V客学院教学总监，PHP高级工程师）
（想了解更多PHP技术，请进入一九八网络科技有限公司V客学院网站：http://www.vikeyit.com）
第一：为什么要跨域
为了解决同源策略问题，换一句话说就是放在两个服务器的页面之间是不能进行通信。比如：http://www.a.com/test.html与http://www.b.com/test.php之间不能进行数据访问。
第二：跨域的几个概念
1、jsonp:是json的一种使用模式
2、跨域：就是两个不在同一台服务器上的页面进行数据访问。
第三：跨域的几个步骤
1、静态页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="jquery-1.5.2.min.js"></script>
<script src="ajax.js"></script>
</head>
<body>
<form name="form_info">
<input type="text" name="user_name">
<input type="text" name="user_sex">
<input type="button" id="user_btn" value="button" />
</form>
</body>
</html>
2、js页面
ajax.js
$(document).ready(function(){
$("#user_btn").click(function(k) {
//...
var info = $("form_info").serializeArray();//序列化name/value
$.ajax({
type: 'GET', //这里用GET
url: 'ajax.php',
dataType: 'jsonp', //类型
data: info,
jsonp: 'callback', //jsonp回调参数，必需
async: false,
success: function(result) {//返回的json数据
alert(result.message); //回调输出
result = result || {};
if (result.msg=='err'){
alert(result.info);
}else if (result.msg=="ok"){
alert('提交成功');
}else{
alert('提交失败');
}
}
})
//...
});
});
3、PHP页面
<?php
$callback = isset($_GET['callback']) ? trim($_GET['callback']) : ''; //jsonp回调参数，必需
$date = array("age"=>$_GET['user_name'], "message"=>$_GET['user_sex']);
$date["msg"]="err";
$date["info"]="发送失败";
$tmp= json_encode($date); //json 数据
echo $callback . '(' . $tmp .')'; //返回格式，必需
?>
第四：总结
通过上面几个步骤，对上面每个步骤进行总结
1、静态页面:要引入jquery包，可以到官网去下载;静态页面的元素可以接收跨域接收过来的数据.
2、js页面:jsonp: 'callback', //jsonp回调参数，必需;dataType: 'jsonp', //类型
3、$callback = isset($_GET['callback']) ? trim($_GET['callback']) : ''; //jsonp回调参数，必需
（本文原创：管工，一九八网络科技V客学院教学总监，PHP高级工程师）
（想了解更多PHP技术，请进入一九八网络科技有限公司V客学院网站：http://www.vikeyit.com）
