快捷導(dǎo)航

PHP實(shí)現(xiàn)AJAX動(dòng)態(tài)網(wǎng)頁(yè)及相關(guān)函數(shù)詳解

更新時(shí)間：2022年08月02日 10:12:17 作者：Miracle?Fan

ajax其實(shí)是利用javascript向服務(wù)器請(qǐng)求數(shù)據(jù),然后局部修改頁(yè)面,下面這篇文章主要給大家介紹了關(guān)于PHP實(shí)現(xiàn)AJAX動(dòng)態(tài)網(wǎng)頁(yè)及相關(guān)函數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

AJAX

AJAX（Asynchronous JavaScript and xml)是一種用于創(chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)，該技術(shù)可以通過(guò)后臺(tái)與服務(wù)器進(jìn)行指定的數(shù)據(jù)交換，從而使得不必重新加載整個(gè)頁(yè)面情況下對(duì)網(wǎng)頁(yè)進(jìn)行局部刷新。

1. XMLHttpRequest對(duì)象

XMLHttpRequest 用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)。

通過(guò)variable=new XMLHttpRequest()創(chuàng)建新對(duì)象給變量variable。

//如果有request請(qǐng)求則創(chuàng)建新對(duì)象 
if (window.XMLHttpRequest) { 
                // IE7+, Firefox, Chrome, Opera, Safari 執(zhí)行代碼
                xmlhttp=new XMLHttpRequest();
              } else {
                // IE6, IE5 執(zhí)行代碼
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }

2. 發(fā)出請(qǐng)求的方法

xmlhttp.open("GET","test.php?q="+parameter,true);
xmlhttp.send();

2.1XMLHttpRequest.open()

規(guī)定請(qǐng)求的類型、URL 以及是否異步處理請(qǐng)求。

Syntax

XMLHttpRequest.open(method, url, async, user, password)

Parameters

method :對(duì)http請(qǐng)求類型，如GET,POST,PUT,HEAD
url:文件在服務(wù)器地址
async:是否選擇異步處理，默認(rèn)為true
user, password （可選）用于身份認(rèn)證，默認(rèn)為null

2.2XMLHttpRequest.setRequestHeader()

設(shè)置HTTP請(qǐng)求頭部的方法。此方法必須在 open() 方法和 send() 之間調(diào)用

Syntax

XMLHttpRequest.setRequestHeader(header, value)

Parameter

header:屬性名稱

valueL:屬性的值

2.3 XMLHttpRequest.send()

發(fā)送請(qǐng)求至服務(wù)器

Syntax

XMLHttpRequest.send(str)

Parameter

str：如果請(qǐng)求方法是 GET 或者 HEAD，則應(yīng)將之設(shè)為null

3.XMLHttpRequest的響應(yīng)狀態(tài)

3.1XMLHttpRequest.readyState

返回代理請(qǐng)求當(dāng)前所處的狀態(tài)。

值	狀態(tài)	描述
0	UNSENT	代理被創(chuàng)建，但尚未調(diào)用 open() 方法。
1	OPENED	`open()` 方法已經(jīng)被調(diào)用。
2	HEADERS_RECEIVED	`send()` 方法已經(jīng)被調(diào)用，并且頭部和狀態(tài)已經(jīng)可獲得。
3	LOADING	下載中； `responseText` 屬性已經(jīng)包含部分?jǐn)?shù)據(jù)。
4	DONE	下載操作已完成。

3.2 XMLHttpRequest.status

返回請(qǐng)求響應(yīng)的數(shù)字狀態(tài)碼

值	狀態(tài)	描述
0	UNSENT,OPENED	請(qǐng)求未完成或者出錯(cuò)
200	Loading，DONE	請(qǐng)求成功

4.處理函數(shù)

XMLHttpRequest.onreadystatechange

只要readystate屬性發(fā)生變換，就會(huì)調(diào)用出處理函數(shù)callback

Syntax

XMLHttpRequest.onreadystatechange = callback;

5. 簡(jiǎn)單示例

test.html

<!doctype html>
<html lang='zh'>
<meta charset="utf-8">
    <head>
        <script>
            //自定義函數(shù)及參數(shù)
            function functest(parameter) {
              if (window.XMLHttpRequest) {
                // IE7+, Firefox, Chrome, Opera, Safari 執(zhí)行代碼
                xmlhttp=new XMLHttpRequest();
              } else {
                // IE6, IE5 執(zhí)行代碼
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
                //onreadystatechange存儲(chǔ)函數(shù)（或函數(shù)名），每當(dāng) readyState 屬性改變時(shí)，就會(huì)調(diào)用該函數(shù)
              xmlhttp.onreadystatechange=function() {
                  //xmlhttp.readyState==4 && xmlhttp.status==200表示請(qǐng)求完成并且成功返回
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    //通過(guò) document.getElementById()調(diào)用標(biāo)簽寫入Value值。
                  document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                }
              }
             //通過(guò)get調(diào)用服務(wù)器test.php的頁(yè)面，‘q'為定義的加載到PHP頁(yè)面的變量
              xmlhttp.open("GET","test.php?q="+parameter,true);
              xmlhttp.send();
            }
        </script>
    </head>
    <body>       
        <form> //每輸入一個(gè)值調(diào)用functest()函數(shù)
        測(cè)試輸入: <input type="text" onkeyup="functest(this.value)">
        </form>
        <p>返回值: <span id="txtHint" style ='color:red'></span></p>
        
    </body>
    
</html>

test.php

<?php
//從請(qǐng)求URL地址中獲取 q 參數(shù)
$trans=$_GET["trans"];
//輸出返回值
echo "你好，陌生人。";
?>

參考:

[Documenting web technologies, including CSS, HTML, and JavaScript](MDN Web Docs (mozilla.org))

總結(jié)

到此這篇關(guān)于PHP實(shí)現(xiàn)AJAX動(dòng)態(tài)網(wǎng)頁(yè)及相關(guān)函數(shù)詳解的文章就介紹到這了,更多相關(guān)PHP AJAX動(dòng)態(tài)網(wǎng)頁(yè)及相關(guān)函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: