利用ajax實現(xiàn)簡單的注冊驗證局部刷新實例
更新時間：2013年10月08日 14:40:22 作者：
ajax的工作原理想必大家都有所了解吧，不懂的可以看看本文。下面是注冊驗證案例register。php是注冊頁面。registerProcess.php用于接收數(shù)據(jù)并返回數(shù)據(jù)
1,ajax(asynchronouse javascript and xml)異步的 javascrip 和xml
2,（包含了7種技術(shù)：javascript xml xstl dom xhtml css xmlhttpRequest）
3,是一種與服務(wù)器語言無關(guān)的技術(shù)，可以用在（php/jsp/asp.net）
4,ajax的工作原理： 創(chuàng)建一個ajax引擎->發(fā)送數(shù)據(jù)給服務(wù)器--》通過回調(diào)函數(shù)接收數(shù)據(jù)---》將數(shù)據(jù)賦給指定的頁面
下面是注冊驗證案例register。php是注冊頁面。registerProcess.php用于接收數(shù)據(jù)并返回數(shù)據(jù)
register.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用戶注冊</title>
<!-- 告訴瀏覽器不要緩存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
<!--
function sendRequest(){
//創(chuàng)建一個ajax引擎
var xmlHttpRequest;
//不同瀏覽器獲取xmlRequest對象方法不一樣
if(window.ActiveXObject){
xmlHttpRequest = new ActiveXObject("MMMMMictofrt");
}else{
xmlHttpRequest = new XMLHttpRequest();
}
return xmlHttpRequest;
}
var myXmlHttpRequest
function checkName(){
myXmlHttpRequest = sendRequest();
if(myXmlHttpRequest){
//window.alert("創(chuàng)建成功");
//第一個參數(shù)表示請求方式get.post。第二個參數(shù)指定url,對哪個頁面發(fā)送ajax請求
//用get方式提交的數(shù)據(jù)如果沒有發(fā)生變化的話瀏覽器將會從緩存中直接提取
var url = "/ajax_yhyz/registerProcess.php? username=getValue('username').value";
//1,用這樣就可以不從緩存提取了
//var url = "/ajax_yhyz/registerProcess.php? mytime='new Date()' & username=getValue('username').value";
//2,<meta http-equiv="pragma" content="no-cache">告訴瀏覽器不要緩存
//window.alert(url); 用于測試url是否成功
//第三個參數(shù)ture 表示異步機制
myXmlHttpRequest.open("get",url,true);
//指定回調(diào)函數(shù)，chul是函數(shù)名，表示如果狀態(tài)發(fā)生變化就調(diào)用該函數(shù)，有四個狀態(tài)
myXmlHttpRequest.onreadystatechange = chuli;
//發(fā)送請求，如果是get請求則填寫null即可
//額如果是post請求，則填寫實際的數(shù)據(jù)
myXmlHttpRequest.send(null);
}
}
function chuli(){
//window.alert("處理函數(shù)被回調(diào)");
if(myXmlHttpRequest.readyState == 4){
//window.alert("服務(wù)器返回"+myXmlHttpRequest.responseText);
getValue("myres").value = myXmlHttpRequest.responseText;
}
}
function getValue(id){
//return document.getElementById(id).value; 這樣做的話沒辦法完成局部刷新
return document.getElementById(id);
}
-->
</script>
</head>
<body>
<form action="???" method="post">
用戶名字:<input type="text" name="username1" id="username" ><input type="button" onclick="checkName()" value="驗證用戶名">
<input type="text" id="myres" />
<br/>
用戶密碼:<input type="password" name="password"><br>
電子郵件:<input type="text" name="email"><br/>
<input type="submit" value="用戶注冊">
</form>
<form action="???" method="post">
用戶名字:<input type="text" name="username2" >
<br/>
用戶密碼:<input type="password" name="password"><br>
電子郵件:<input type="text" name="email"><br/>
<input type="submit" value="用戶注冊">
</form>
</body>
</html>
regiseterProcess.php
<?php
$username=$_REQUEST['username'];
if($username=="shunping"){
echo "err";
}else{
echo "ok";
}
?>
2,（包含了7種技術(shù)：javascript xml xstl dom xhtml css xmlhttpRequest）
3,是一種與服務(wù)器語言無關(guān)的技術(shù)，可以用在（php/jsp/asp.net）
4,ajax的工作原理： 創(chuàng)建一個ajax引擎->發(fā)送數(shù)據(jù)給服務(wù)器--》通過回調(diào)函數(shù)接收數(shù)據(jù)---》將數(shù)據(jù)賦給指定的頁面
下面是注冊驗證案例register。php是注冊頁面。registerProcess.php用于接收數(shù)據(jù)并返回數(shù)據(jù)
register.php
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用戶注冊</title>
<!-- 告訴瀏覽器不要緩存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
<!--
function sendRequest(){
//創(chuàng)建一個ajax引擎
var xmlHttpRequest;
//不同瀏覽器獲取xmlRequest對象方法不一樣
if(window.ActiveXObject){
xmlHttpRequest = new ActiveXObject("MMMMMictofrt");
}else{
xmlHttpRequest = new XMLHttpRequest();
}
return xmlHttpRequest;
}
var myXmlHttpRequest
function checkName(){
myXmlHttpRequest = sendRequest();
if(myXmlHttpRequest){
//window.alert("創(chuàng)建成功");
//第一個參數(shù)表示請求方式get.post。第二個參數(shù)指定url,對哪個頁面發(fā)送ajax請求
//用get方式提交的數(shù)據(jù)如果沒有發(fā)生變化的話瀏覽器將會從緩存中直接提取
var url = "/ajax_yhyz/registerProcess.php? username=getValue('username').value";
//1,用這樣就可以不從緩存提取了
//var url = "/ajax_yhyz/registerProcess.php? mytime='new Date()' & username=getValue('username').value";
//2,<meta http-equiv="pragma" content="no-cache">告訴瀏覽器不要緩存
//window.alert(url); 用于測試url是否成功
//第三個參數(shù)ture 表示異步機制
myXmlHttpRequest.open("get",url,true);
//指定回調(diào)函數(shù)，chul是函數(shù)名，表示如果狀態(tài)發(fā)生變化就調(diào)用該函數(shù)，有四個狀態(tài)
myXmlHttpRequest.onreadystatechange = chuli;
//發(fā)送請求，如果是get請求則填寫null即可
//額如果是post請求，則填寫實際的數(shù)據(jù)
myXmlHttpRequest.send(null);
}
}
function chuli(){
//window.alert("處理函數(shù)被回調(diào)");
if(myXmlHttpRequest.readyState == 4){
//window.alert("服務(wù)器返回"+myXmlHttpRequest.responseText);
getValue("myres").value = myXmlHttpRequest.responseText;
}
}
function getValue(id){
//return document.getElementById(id).value; 這樣做的話沒辦法完成局部刷新
return document.getElementById(id);
}
-->
</script>
</head>
<body>
<form action="???" method="post">
用戶名字:<input type="text" name="username1" id="username" ><input type="button" onclick="checkName()" value="驗證用戶名">
<input type="text" id="myres" />
<br/>
用戶密碼:<input type="password" name="password"><br>
電子郵件:<input type="text" name="email"><br/>
<input type="submit" value="用戶注冊">
</form>
<form action="???" method="post">
用戶名字:<input type="text" name="username2" >
<br/>
用戶密碼:<input type="password" name="password"><br>
電子郵件:<input type="text" name="email"><br/>
<input type="submit" value="用戶注冊">
</form>
</body>
</html>
regiseterProcess.php
復(fù)制代碼 代碼如下:
<?php
$username=$_REQUEST['username'];
if($username=="shunping"){
echo "err";
}else{
echo "ok";
}
?>
相關(guān)文章
實現(xiàn)AJAX異步調(diào)用和局部刷新的基本步驟
AJAX?可以在不重新加載整個網(wǎng)頁的情況下,與服務(wù)器交換數(shù)據(jù),并且更新部分網(wǎng)頁,下面這篇文章主要給大家介紹了關(guān)于實現(xiàn)AJAX異步調(diào)用和局部刷新的基本步驟,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了一個簡單的ajax上傳進度顯示示例,需要的朋友可以參考下2014-02-02![[asp]天楓AJAX blog V1.0 程序提供下載了](http://img.jbzj.com/images/xgimg/bcimg2.png)
[asp]天楓AJAX blog V1.0 程序提供下載了...2007-09-09
ajax動態(tài)查詢數(shù)據(jù)庫數(shù)據(jù)并顯示在前臺的方法
今天小編就為大家分享一篇ajax動態(tài)查詢數(shù)據(jù)庫數(shù)據(jù)并顯示在前臺的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
我很開心您來閱讀我寫的關(guān)于ajax的實例教程,無論您是第一次還是老朋友.我將在這里獻上我至今所學(xué),并毫不吝嗇。2010-08-08
ajax跨域請求數(shù)據(jù)在谷歌火狐我本地IE11都是沒問題的，IE9版本以下ajax 跨域卻有問題，解決方法是對Internet 安全選項進行自定義級別2014-10-10
今天小編就為大家分享一篇關(guān)于Ajax報錯400的參考解決辦法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2018-10-10
這篇文章主要為大家詳細(xì)介紹了Ajax實現(xiàn)頁面無刷新留言效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
本篇文章通過兩種方法實例講解ajax定時刷新局部頁面，當(dāng)然方法有很多種，也可以不使用ajax來刷新頁面，可以使用jquery中的append來給指定內(nèi)容加?xùn)|西，但是都不太實用，最實用的方法還是ajax加載數(shù)據(jù)了。2015-09-09
ThinkPHP5 通過ajax插入圖片并實時顯示(完整代碼)
這篇文章主要介紹了ThinkPHP5 通過ajax插入圖片并實時顯示功能，本文給大家分享網(wǎng)站代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12