PHP實現(xiàn)AJAX動態(tài)網(wǎng)頁及相關函數(shù)詳解
AJAX
AJAX（Asynchronous JavaScript and xml)是一種用于創(chuàng)建動態(tài)網(wǎng)頁的技術，該技術可以通過后臺與服務器進行指定的數(shù)據(jù)交換，從而使得不必重新加載整個頁面情況下對網(wǎng)頁進行局部刷新。
1. XMLHttpRequest對象
XMLHttpRequest 用于在后臺與服務器交換數(shù)據(jù)。
通過variable=new XMLHttpRequest()創(chuàng)建新對象給變量variable。
//如果有request請求則創(chuàng)建新對象
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 執(zhí)行代碼
xmlhttp=new XMLHttpRequest();
} else {
// IE6, IE5 執(zhí)行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2. 發(fā)出請求的方法
xmlhttp.open("GET","test.php?q="+parameter,true);
xmlhttp.send();
2.1XMLHttpRequest.open()
規(guī)定請求的類型、URL 以及是否異步處理請求。
Syntax
XMLHttpRequest.open(method, url, async, user, password)
Parameters
- method :對http請求類型，如
GET,POST,PUT,HEAD - url:文件在服務器地址
- async:是否選擇異步處理，默認為true
- user, password （可選）用于身份認證，默認為null
2.2XMLHttpRequest.setRequestHeader()
設置HTTP請求頭部的方法。此方法必須在 open() 方法和 send() 之間調(diào)用
Syntax
XMLHttpRequest.setRequestHeader(header, value)
Parameter
header:屬性名稱
valueL:屬性的值
2.3 XMLHttpRequest.send()
發(fā)送請求至服務器
Syntax
XMLHttpRequest.send(str)
Parameter
str：如果請求方法是 GET 或者 HEAD，則應將之設為null
3.XMLHttpRequest的響應狀態(tài)
3.1XMLHttpRequest.readyState
返回代理請求當前所處的狀態(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)包含部分數(shù)據(jù)。 |
| 4 | DONE | 下載操作已完成。 |
3.2 XMLHttpRequest.status
返回請求響應的數(shù)字狀態(tài)碼
| 值 | 狀態(tài) | 描述 |
|---|---|---|
| 0 | UNSENT,OPENED | 請求未完成或者出錯 |
| 200 | Loading，DONE | 請求成功 |
4.處理函數(shù)
XMLHttpRequest.onreadystatechange
只要readystate屬性發(fā)生變換，就會調(diào)用出處理函數(shù)callback
Syntax
XMLHttpRequest.onreadystatechange = callback;
5. 簡單示例
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存儲函數(shù)（或函數(shù)名），每當 readyState 屬性改變時，就會調(diào)用該函數(shù)
xmlhttp.onreadystatechange=function() {
//xmlhttp.readyState==4 && xmlhttp.status==200表示請求完成并且成功返回
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//通過 document.getElementById()調(diào)用標簽寫入Value值。
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
//通過get調(diào)用服務器test.php的頁面，‘q'為定義的加載到PHP頁面的變量
xmlhttp.open("GET","test.php?q="+parameter,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form> //每輸入一個值調(diào)用functest()函數(shù)
測試輸入: <input type="text" onkeyup="functest(this.value)">
</form>
<p>返回值: <span id="txtHint" style ='color:red'></span></p>
</body>
</html>
test.php
<?php //從請求URL地址中獲取 q 參數(shù) $trans=$_GET["trans"]; //輸出返回值 echo "你好，陌生人。"; ?>
參考:
[Documenting web technologies, including CSS, HTML, and JavaScript](MDN Web Docs (mozilla.org))
總結
到此這篇關于PHP實現(xiàn)AJAX動態(tài)網(wǎng)頁及相關函數(shù)詳解的文章就介紹到這了,更多相關PHP AJAX動態(tài)網(wǎng)頁及相關函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了php的常量和變量實例詳解的相關資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了ThinkPHP 整合Bootstrap Ajax分頁的相關資料,需要的朋友可以參考下2016-12-12
下面小編就為大家分享一篇PHP 記錄訪客的瀏覽信息方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
Closure類又被大家稱之為匿名函數(shù)，在php5.3的時候引入的。顧名思義匿名函數(shù)就是沒有定義名字的函數(shù)。本篇文章給大家介紹php中Closure類的使用及詳解，需要的朋友可以參考下2015-10-10
這篇文章主要介紹了Yii2框架使用計劃任務的方法,結合實例形式分析了Yii2框架下計劃任務的具體使用技巧,需要的朋友可以參考下2016-05-05
有天在努力的搜索計算器，發(fā)現(xiàn)都是JavaScript，而且要一個個地點擊，并且不能記錄，輸入計算式子時容易出錯，于是就想了想該怎樣才能讓它好用點呢，能夠用鍵盤直接輸入。2010-10-10
這篇文章主要介紹了Laravel 微信小程序后端搭建步驟詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
目前網(wǎng)絡上的sns網(wǎng)站已經(jīng)不少了，但是可以找到的sns源碼似乎還很少見到。2008-05-05
這篇文章主要介紹了Yii2增加驗證碼步驟詳解的相關資料,需要的朋友可以參考下2016-04-04
php下實現(xiàn)農(nóng)歷日歷的代碼...2007-03-03