ajax01.html
客户端
<!DOCTYPE html>
<!--客户端-->
<!--课时46初探浏览器原生Ajax接口(1)-->
<!--使用get方式拿到服务器数据-->
<html id="html">
<head>
<Meta charset="utf-8" />
<title>demo</title>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('button').click(function(){
//从服务器载入数据并且将返回的 HTML 代码替换 匹配的元素 的后代元素
//.ul0服务器返回，内容的某个class，不指定class则表示返回的所有内容
// $('#div1').load('get.PHP .ul0',function(responseText,textStatus,jqXHR){
//
// });
//使用一个HTTP GET请求从服务器加载并拿到当前页来执行一个 JavaScript 代码
// $.getScript('get.PHP',function(script,jqXHR){
// console.log(jqXHR);
// });
// $.getJSON('get.PHP',{id:1},function(data,jqXHR){
// console.log(data);
// });
//跨源请求，只需要在 请求的URL地址后面接上一个查询字符串callback=?
// $.getJSON('http://127.0.0.1/MyTestAjax07/get.PHP?callback=?',function(data){
// console.log(data);
// });
// var jqXHR=$.get('get.PHP');
// jqXHR.done(function(data,jqXHR){
// //请求成功之后执行的回调函数
// alert('请求成功了！');
// console.log(data);
// });
// jqXHR.fail(function(jqXHR,errorThrown){
// //请求失败之后执行的回调函数
// alert('请求失败了！');
// console.log(errorThrown);
// });
// jqXHR.always(function(a,b,c){
// //该回调函数的参数如果 请求是成功的则同done方法的参数,如果请求是失败的则同fail方法的参数
// //请求完成之后执行的回调函数
// alert('请求完成了！');
// console.log(a);
// });
// 把上面的代码连起来写
$.get('get.PHP',function(){
console.log(':))');
}).done(function(data){
console.log(data);
}).fail(function(){
console.log(':((');
}).always(function(){
console.log('always');
});
});
});
</script>
</head>
<body>
<button>开始</button>
<div id="div1">
div1
</div>
</body>
</html>
get.PHP
服务器端
<?PHP
//sleep(3);
//$html=<<<A
//<ul class="ul0">
// <li>哈哈！</li>
// <li>哈哈！</li>
// <li>哈哈！</li>
// <li>哈哈！</li>
// <li>哈哈！</li>
//</ul>
//<ul class="ul1">
// <li>哈哈！</li>
// <li>哈哈！</li>
// <li>哈哈！</li>
// <li>哈哈！</li>
// <li>哈哈！</li>
//</ul>
//A;
//echo $html;
//$script=<<<A
//alert(':))');
//A;
//echo $script;
$json=<<<A
[{"title":"标题","url":"http://sifangku.com"},{"title":"标题2","url":"http://baidu.com"}]
A;
//返回json数据
echo $json;
//返回JSONP数据
//echo "{$_GET['callback']}({$json})";
?>