AjaxAJAX基础_AJAX获取PHP数据

前言

本篇AJAX基础教程,只称干货,拒绝废话。
全文通过个别独实例来讲学AJAX的中坚用法,第1单实例是采取AJAX技术自服务器获取纯文本(HTML)数据,
第2单实例是获得从服务器PHP文件之多寡。

小心:必须在服务器环境下于才会运作AJAX程序,本文使用的WAMP
准备知识而免看,有一些基础直接跨越到实例部分也克理解,代码中还起详尽注解。

预备知识

操纵AJAX技术之基本是知情XMLHttpRequest本条目标,它是一个JavaScript对象。下面简单介绍下其
的特性和方。

属性

readyState
代表要时之状态,共有5个价值,含义分别如下:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = completed
此地我们仅关心第4个状态,代表为服务器发送的请求都完结(不表示成功)。

onreadystatechange
随即是一个波性质,就像onclick单击事件相同,readyState的价如果变化,就会触发这个波。

status
表示HTTP请求的状态码,值也200常常表示求成功。

responseText
坐字符串的花样返回从服务器请求的多寡。

方法

open(‘GET/POST’, ‘URL’)
GET与POST 2选1,URL表示如打服务器请求文件之地址。

send(content)
望服务器发送数据,请求方法吗POST时见面因此。

实例1 由劳动赢得HTML文件之数据

欲2单文本在WAMP的WWW目录下通过,浏览器localhost运行即可。
文件1: apples.html
文件2: k1.html

<!-- filename: apples.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<p style="color: red">hello world</p>
<p>你看到的信息来自外部文件apples.html</p>
</body>
</html>

<!-- filename: k1.html -->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Ajax示例</title>
</head>
<body>
<div>
    <button>Apples</button>
</div>

<div id="target">
    Press a button
</div>

<script>
(function() {
    var buttons = document.getElementsByTagName("button")[0];
    buttons.addEventListener("click", handleButtonPress);

    function handleButtonPress() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = handleResponse; // onreadystatechange有5种状态
        xhr.open("GET", "apples.html"); // 从服务器获取信息
        xhr.send(); // 没有向服务器发送信息,所以这里为空
    }

    function handleResponse(e) {
        // console.log(e.target);
        // console.log("he_" + Math.random());
        /*
            xhr刚创建的时候,onreadystatechange=1
            使用open方法后1,请求结束返回4
            这里一共打印4次信息
        */

        // if (xhr.readyState == XMLHttpRequest.DONE &&
        // xhr.status == 200) {
        //     document.getElementById("target").innerHTML
        //     = xhr.responseText;
        // }

        if (e.target.readyState == XMLHttpRequest.DONE &&
        e.target.status == 200) {
            document.getElementById("target").innerHTML
            = e.target.responseText;
        }
        /*
            XMLHttpRequest.DONE 相当于 xhr.readyState == 4
            由于xhr变量是一个局部变量,所以只能使用e.target才能访问到xhr对象。
            若果直接使用xht对象,就会出现未找到xhr对象的错误。
            如果不想这么麻烦,直接把xhr对象定义到函数外边也是可以的。
        */
    }
})()

</script>
</body>
</html>

效果

Ajax 1

实例2 自服务器获取PHP文件的多少

动用Ajax技术取得PHP文件之数据,与收获HTML等纯文本格式的文书不同。
服务器上PHP格式的公文未能够当成纯文本文件来取,当我们利用
open(method, php_filename)时,服务器会优先实施这个PHP文件,只有echo
出来的数目,才能够于JavaScirpt获取到,并回到给xhr.responseText

实例2 ajax+php
抱服务器时间小程序,需要简单个文件k1.phptell_time.php
欲在安排好之PHP环境下运行。代码如下:

<!-- filename: k1.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax Demonstration</title>
<style>
body {
    background-color:#ccc;
    text-align:center;
}
.displaybox {
    width:150px;
    height: 40px;
    margin: 0 auto;
    margin-top: 20px;
    background-color:#ffffff;
    border:2px solid #000000;
    padding:10px;
    font-size: 24px;
    font-family: "微软雅黑";
}
</style>
</head>
<body>

<h1>Ajax Demonstration</h1>
<h2>无刷新获取服务器时间</h2>
<form>
    <input type="button" value="Get Server Time" id="btn">
</form>
<div id="showtime" class="displaybox"></div>

<script>
(function(){

    var btn = document.getElementById('btn');
    btn.addEventListener('click', getServerTime);
    var xhr = new XMLHttpRequest();

    function getServerTime() {
        var myurl = 'tell_time.php';
        myRand = parseInt(Math.random() * 99999999);
        // 构造随机数,防止缓存问题

        var modurl = myurl + "?rand=" + myRand;
        xhr.open("GET", myurl);
        xhr.onreadystatechange = xhrResponse;
        xhr.send();
    }

    function xhrResponse() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var timeValue = xhr.responseText;

            document.getElementById('showtime').innerHTML = timeValue;;
        }
    }

})()
</script>

</body>
</html>

<?php
// filename: tell_time.php
    date_default_timezone_set('Asia/shanghai');
    // 把默认时区设置成中国/上海,也就是设置成北京时间。

    echo date('H:i:s');
    // 直接打印当前时间。
?>

效果

Ajax 2

相关文章