课件_48.第九章：Ajax技术[3]-初探浏览器原生Ajax接口(3)

ajax02.html

客户端

<!DOCTYPE html>
<!--客户端-->
<!--课件_48.第九章：Ajax技术[3]-初探浏览器原生Ajax接口(3).rar	-->
<!--处理服务器响应的数据-->
<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(){
                //创建XHR对象,后面的Ajax操作都是基于这个对象的！
                var xhr=new XMLHttpRequest();
                xhr.addEventListener('readystatechange',function(){
                    if (xhr.readyState==4) {
                         //返回html格式的数据
//                         $('body').append(xhr.responseText);

                         //返回js格式的数据
//                         eval(xhr.responseText);

                         //返回JSON格式的数据,处理起来更加灵活！
                         var obj=JSON.parse(xhr.responseText);//eval也可以
                         var str='';
                         for (var i=0;i<obj.length;i++) {
                         str+="<p><a href='"+obj[i].url+"'>"+obj[i].title+"</a></p>";
                         }
                         $('body').append(str);



                    }
                });
                //启用一个http请求，以备发送,true表示发送异步（默认），flase发同步请求
                xhr.open('get','ajax02.PHP');//在服务器端执行这个PHP文件，然后将输出的内容返回给客户端！
//                发送刚刚设置好的请求
                xhr.send(null);
//                如果时间超过3秒，则取消请求
                setTimeout(function(){
                    xhr.abort();//取消请求！
                },3000);
            });

        });
    </script>
</head>
<body>
<button>开始</button>
</body>
</html>

ajax02.PHP

服务器端

<?PHP
//服务器端
//可以执行各种PHP代码，各种判断，以及从数据库中获取到数据,返回给客户端
//sleep(5);
//echo "嘿嘿，这个数据返回给你";

//echo'<ul>
//    <li><a href="#">我是一条新闻的标题</a></li>
//    <li><a href="#">我是一条新闻的标题</a></li>
//    <li><a href="#">我是一条新闻的标题</a></li>
//    <li><a href="#">我是一条新闻的标题</a></li>
//    <li><a href="#">我是一条新闻的标题</a></li>
//    <li><a href="#">我是一条新闻的标题</a></li>
//</ul>';

//$str1=<<<A
//if(1>100){
//    alert(':))');
//}else{
//    alert(':((');
//}
//A;
//echo $str1;

$arr=array(
    array('title'=>'这是一条文章的标题','url'=>'#'),array('title'=>'这是一条文章的标题','url'=>'http://sifangku.com'),'url'=>'#')
);
$str2=json_encode($arr);
echo $str2;



?>

课件_48.第九章：Ajax技术[3]-初探浏览器原生Ajax接口(3)

相关文章