本文實(shí)例講述了php+Ajax無刷新驗(yàn)證用戶名操作。分享給大家供大家參考,具體如下:
AJAX 簡介
AJAX = Asynchronous JavaScript And XML(異步 JavaScript 及 XML)
AJAX 是 Asynchronous JavaScript And XML 的首字母縮寫。
AJAX 并不是一種新的編程語言,而僅僅是一種新的技術(shù),它可以創(chuàng)建更好、更快且交互性更強(qiáng)的 web 應(yīng)用程序。
AJAX 使用 JavaScript 在 web 瀏覽器與 web 服務(wù)器之間來發(fā)送和接收數(shù)據(jù)。
通過在幕后與 web 服務(wù)器交換數(shù)據(jù),而不是每當(dāng)用戶作出改變時(shí)重載整個(gè) web 頁面,AJAX 技術(shù)可以使網(wǎng)頁更迅速地響應(yīng)
Ajax請求
傳統(tǒng)的 web 應(yīng)用程序會把數(shù)據(jù)提交到 web 服務(wù)器(使用 HTML 表單)。在 web 服務(wù)器把數(shù)據(jù)處理完畢之后,會向用戶返回一張完整的新網(wǎng)頁。
由于每當(dāng)用戶提交輸入,服務(wù)器就會返回新網(wǎng)頁,傳統(tǒng)的 web 應(yīng)用程序往往運(yùn)行緩慢,且越來越不友好。
通過 AJAX,web 應(yīng)用程序無需重載網(wǎng)頁,就可以發(fā)送并取回?cái)?shù)據(jù)。完成這項(xiàng)工作,需要通過向服務(wù)器發(fā)送 HTTP 請求(在幕后),并通過當(dāng)服務(wù)器返回?cái)?shù)據(jù)時(shí)使用 JavaScript 僅僅修改網(wǎng)頁的某部分。
一般使用 XML 作為接收服務(wù)器數(shù)據(jù)的格式,盡管可以使用任何格式,包括純文本。
無刷驗(yàn)證新用戶名
自己最近看視頻自學(xué)ajax,想把一些實(shí)例分享給大家,第一個(gè)案列是無刷新驗(yàn)證用戶名是否可用。
一、效果圖
1、用戶可用
2、用戶不可用
3、項(xiàng)目文件(register.php-注冊頁面 和process.php-判斷用戶名是否可用)
二、代碼
register.php-注冊頁面以及ajax發(fā)送請求
!doctypehtml>
htmllang="en">
head>
meta charset="UTF-8">
title>注冊/title>
scripttype="text/javascript">
//創(chuàng)建ajax引擎
function getXmlHttpObject(){
var xmlHttpRequest;
//不同瀏覽器獲取對象XMLHttpRequest
if(window.ActiveXObject){
xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP");
}
else{
xmlHttpRequest=newXMLHttpRequest();
}
return xmlHttpRequest;
}
var myXmlHttpRequest="";
//驗(yàn)證用戶名是否存在
function checkName(){
myXmlHttpRequest=getXmlHttpObject();
//判斷xmlHttpRequest是否成功
if(myXmlHttpRequest){
//通過myXmlHttpRequest對象發(fā)送請求到服務(wù)器的某個(gè)頁面
//第一個(gè)參數(shù)標(biāo)示請求的方式,‘get'、‘post'
//第二個(gè)參數(shù)指定url,對那個(gè)頁面發(fā)送ajax請求(本質(zhì)仍然是http請求)
/*XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser,bstrPassword);
*/
varurl="/Ajax/process.php?username="+$("username").value;
//window.alert(url);
myXmlHttpRequest.open("get",url,true);
//window.alert('創(chuàng)建ajax引擎成功');
//指定回調(diào)函數(shù),chuili是函數(shù)名
myXmlHttpRequest.onreadystatechange=chuli;//調(diào)用
//真的發(fā)送請求,如果是各塔請求則填入null即可
//如果是post請求,則填入實(shí)際數(shù)據(jù)
myXmlHttpRequest.send(null);
}
else
{
// window.alert('創(chuàng)建失敗');
}
}
function chuli(){
// window.alert("cuhli函數(shù)被調(diào)用"+myXmlHttpRequest.readyState);
//我要取出從register.php返回的數(shù)據(jù)
if(myXmlHttpRequest.readyState==4){
//取出值,根據(jù)返回信息的數(shù)據(jù)格式
//window.alert("服務(wù)器返回"+myXmlHttpRequest.responseText);
$('myres').value=myXmlHttpRequest.responseText;
}
}
function $(id){
return document.getElementById(id);
}
/script>
/head>
body>
formaction="???" method="post">
用戶名字:inputtype="text" name="username1"onkeyup="checkName()" id="username">
input type="button"value="驗(yàn)證用戶名">
input style="border-width:0;color: #e93b3d" type="text" id="myres">
br/>
用戶密碼:inputtype="password" name="password">br>
電子郵件:inputtype="text" name="email">br/>
input type="submit"value="用戶注冊">
/form>
/body>
/html>
process.php—判斷用戶名是否可用
?php
//接受數(shù)據(jù)
$username=$_GET['username'];
// echo "用戶名".$username;
if($username=="李四"){
echo "用戶名不可用";
}
else{
echo"恭喜用戶名可用";
}
?>
三、原理圖
更多關(guān)于PHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《PHP+ajax技巧與應(yīng)用小結(jié)》、《PHP網(wǎng)絡(luò)編程技巧總結(jié)》、《PHP基本語法入門教程》、《php面向?qū)ο蟪绦蛟O(shè)計(jì)入門教程》、《php字符串(string)用法總結(jié)》、《php+mysql數(shù)據(jù)庫操作入門教程》及《php常見數(shù)據(jù)庫操作技巧匯總》
希望本文所述對大家PHP程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:- php注冊系統(tǒng)和使用Xajax即時(shí)驗(yàn)證用戶名是否被占用
- PHP+Ajax異步通訊實(shí)現(xiàn)用戶名郵箱驗(yàn)證是否已注冊( 2種方法實(shí)現(xiàn))
- PHP+Ajax簡單get驗(yàn)證操作示例
- ajax+php實(shí)現(xiàn)無刷新驗(yàn)證手機(jī)號的實(shí)例
- php傳值方式和ajax的驗(yàn)證功能
- PHP+Ajax驗(yàn)證碼驗(yàn)證用戶登錄
- PHP與Ajax相結(jié)合實(shí)現(xiàn)登錄驗(yàn)證小Demo
- AJAX PHP無刷新form表單提交的簡單實(shí)現(xiàn)(推薦)
- PHP+AJAX實(shí)現(xiàn)無刷新注冊(帶用戶名實(shí)時(shí)檢測)