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

ajax01.html

客户端

<pre name="code" class="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(){
                //创建XHR对象,后面的Ajax操作都是基于这个对象的！
                var xhr=new XMLHttpRequest();
                xhr.addEventListener('readystatechange',function(){
                    if (xhr.readyState==4) {
                        //请求完成，将服务器返回的数据，输出来！
                        console.log(xhr.responseText);
                        $('body').append(xhr.responseText);
                    }
                });
                //启用一个http请求，以备发送,true表示发送异步（默认），flase发同步请求
//                xhr.open('get','ajxaa01.html',true);//请求的是静态文件，则会讲这个文件内的内容直接返回给客户端
                xhr.open('get','ajax01.PHP');//在服务器端执行这个PHP文件，然后将输出的内容返回给客户端！
//                发送刚刚设置好的请求
                xhr.send(null);
//                如果时间超过3秒，则取消请求
//                setTimeout(function(){
//                    xhr.abort();//取消请求！
//                },3000);
            });

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

ajax01.PHP

服务器端

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

ajxaa01.html

<!--服务器端-->
我是一个html文件!
<div>我是div</div>

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

相关文章