ajax01.html
客户端
<!DOCTYPE html>
<!--客户端-->
<!--课件_50.第九章：Ajax技术[5]-jQuery提供的Ajax快捷方法(1).rar-->
<!--使用get、post方式拿到服务器数据,两种方式很相似-->
<html id="html">
<head>
<Meta charset="utf-8" />
<title>demo</title>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script>
$(function(){
$('button').click(function(){
// $.get('get.PHP',{id:1,name:"张三"},function(data,textStatus,jqXHR){
// //当请求完成并且成功后执行的回调函数
// console.log('执行成功啦！');
// console.log(data);//服务器端返回的主体数据
// console.log(textStatus);//返回状态成功是：success
// console.log(jqXHR);//XHR对象的一个超集（子集）
// });
//服务器端设置了header('Content-Type:text/html');所以jQuery会将返回的数据看成是html字符串
// $.get('html.PHP',function(data){
// console.log(typeof data);
// $('body').append(data);
// });
//服务器端设置了header('Content-Type:application/x-javascript');所以jQuery会将返回的数据看成是js代码直接自动的去执行！
// $.get('script.PHP');
//服务器端设置了header('Content-type:application/json');所以jQuery会将返回的数据作为JSON格式自动的转换为js对象
//返回的数据一定要符合JSON规范
// $.get('json.PHP',function(data){
// console.log(data);
// });
//如果不在服务器端设置返回数据的类型，在客户端也可设置
//设置了html，则jQuery会讲返回的数据当做是html字符串
// $.get('get1.PHP',function(data){
// console.log(data);
// $('body').append(data);
// },'html');
//jQuery会直接将返回的数据当做是js代码来执行，而忽略响应的Content-Type信息
// $.get('get1.PHP',function(data){
//
// },'script');
/*
//注：如果要设置该值，我们最好传入上面的回调函数（用来占位防止参数被错误的认为是传入到服务器的数据），否则无效！
$.get('test/get.PHP',function(){},'script');
*/
//jQuery会讲返回的数据当做是JSON格式的数据，自动的转换为js对象
//返回的数据一定要符合JSON规范
// $.get('get1.PHP',function(data){
// console.log(data);
// },'json');
//传入jsonp，使用jsonp实现跨源请求
// $.get('http://127.0.0.1/MyTestAjax06/get1.PHP',function(data){
// console.log(data);
// },'jsonp');
//jQuery自动的帮你做了，几乎一切麻烦的事情！
$.post('post.PHP',{name:"孙胜利",sex:true},function(data){
console.log(data);
});
});
});
</script>
</head>
<body>
<button>开始</button>
</body>
</html>
ajax01.PHP
服务器端
<?PHP
echo $_GET;
//$html=<<<A
//<ul>
// <li>哈哈！</li>
// <li>哈哈！</li>
// <li>哈哈！</li>
// <li>哈哈！</li>
// <li>哈哈！</li>
//</ul>
//A;
//
//$script=<<<A
//if(1>100){
// alert('大于100');
//}else{
// alert('不大于100');
//}
//A;
//
//$json=<<<A
//{"name":"孙胜利","sex":true}
//A;
//
//
////返回调用回调函数的js代码
//echo "{$_GET['callback']}($json)";
//?>
get.PHP
服务器端
<?PHP echo'访问到服务器了'; ?>
html.PHP
服务器端
<?PHP
//响应给客户端的数据类型
header('Content-Type:text/html');
print_r($_GET);
?>
json.PHP
服务器端
<?PHP
header('Content-type:application/json');
$json=<<<A
{"name":"孙胜利","sex":true}
A;
echo $json;
?>
post.PHP
服务器端
<?PHP print_r($_POST); ?>
script.PHP
服务器端
<?PHP
header('Content-Type:application/x-javascript');
//header('Content-Type:text/javascript');
$script=<<<A
if(1>100){
alert('大于100');
}else{
alert('不大于100');
}
A;
echo $script;
?>