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

发布时间：2020-12-16 01:47:39 所属栏目：百科来源：网络整理

导读：ajax01.html 客户端 pre name="code" class="html"?!DOCTYPE html!--客户端--!--课时46初探浏览器原生Ajax接口(1)--!--使用get方式拿到服务器数据--html id="html"head meta charset="utf-8" / titledemo/title script type="text/javascript" src="jquery-2

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!