Ajax技术[6]-jQuery提供的Ajax快捷方法(2)

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})";

?>

Ajax技术[6]-jQuery提供的Ajax快捷方法(2)

猜你在找的Ajax相关文章