AjaxAJAX基础_AJAX获取PHP数据

前言

本篇AJAX基础教程,只讲干货,拒绝废话。
全文通过八个实例来讲课AJAX的着力用法,第3个实例是应用AJAX技术从服务器获取纯文本(HTML)数据,
第二个实例是赢得从服务器PHP文件的数据。

瞩目:必须在服务器环境下在才能运营AJAX程序,本文使用的WAMP
准备知识可不看,有一些基础间接跳到实例部分也能明了,代码中都有详实表明。

预备知识

操纵AJAX技术的主导是通晓XMLHttpRequest本条目的,它是一个JavaScript对象。上面简单介绍下它
的属性和办法。

属性

readyState
表示请求当前的情况,共有八个值,含义分别如下:
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = completed
那里大家只关怀第陆个状态,代表向服务器发送的央浼已经成功(不意味着成功)。

onreadystatechange
这是一个事变性质,就好像onclick单击事件相同,readyState的值假若变化,就会触发这几个事件。

status
意味着HTTP请求的状态码,值为200时表示请求成功。

responseText
以字符串的样式重回从服务器请求的数据。

方法

open(‘GET/POST’, ‘URL’)
GET与POST 2选1,UENVISIONL代表要从服务器请求文件的地点。

send(content)
向服务器发送数据,请求方法为POST时会用。

实例1 从服务获得HTML文件的数目

亟需3个文本放在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

相关文章