Ajax PHP XMLHttpRequest常见属性和事件

最新推荐文章于 2021-04-08 14:03:55 发布

houyanhua1

最新推荐文章于 2021-04-08 14:03:55 发布

阅读量309

点赞数

分类专栏： Ajax PHP 文章标签： ajax php

本文链接：https://blog.csdn.net/houyanhua1/article/details/79188280

版权

PHP 同时被 2 个专栏收录

130 篇文章 0 订阅

订阅专栏

Ajax

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />

        <script type="text/javascript">
        /**
        ajax对象成员
        成员属性：
            responseText：以字符串形式接收服务器端返回的信息
            readyState： ajax对象的状态
                0： 刚创建对象
                1： 已经调用open方法
                2： 已经调用send方法
                3： 开始返回数据，但是不完整
                4： 数据返回完整，请求成功
            onreadystatechange： 其是一个事件，可以随时感知ajax对象状态readyState的变化
                    为了感知比较多的状态变化，最好在创建对象的后边就进行设置
                    最多可以感知1/2/3/4的状态值
        成员方法：
            open()：创建新的http请求
            send()：发送请求
        */
        function f1(){
            //① 创建ajax对象
            var xhr = new XMLHttpRequest();
            //④ 设置事件，感知状态变化
            xhr.onreadystatechange = function(){
                //接收服务器返回的字符串信息
                if(xhr.readyState==4){
                    document.getElementById('result').innerHTML = xhr.responseText;
                }
            }
            //② 创建新的http请求
            xhr.open('get','./03.php');
            //③ 发送请求
            xhr.send(null);
        }
        </script>
    </head>
    <body>
        <h2>ajax接收服务器返回的信息</h2>
        <input type="button" value="触发" οnclick="f1()" />
        <div id="result"></div>
    </body>
</html>

03.php（服务端PHP代码文件）:

<?php

echo "<div>Today is very <span style='color:red;'>good</span></div>";

houyanhua1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录