利用ajax實(shí)現(xiàn)簡(jiǎn)單的注冊(cè)驗(yàn)證局部刷新實(shí)例
更新時(shí)間：2013年10月08日 14:40:22 作者：
ajax的工作原理想必大家都有所了解吧，不懂的可以看看本文。下面是注冊(cè)驗(yàn)證案例register。php是注冊(cè)頁(yè)面。registerProcess.php用于接收數(shù)據(jù)并返回?cái)?shù)據(jù)
1,ajax(asynchronouse javascript and xml)異步的 javascrip 和xml
2,（包含了7種技術(shù)：javascript xml xstl dom xhtml css xmlhttpRequest）
3,是一種與服務(wù)器語(yǔ)言無(wú)關(guān)的技術(shù)，可以用在（php/jsp/asp.net）
4,ajax的工作原理： 創(chuàng)建一個(gè)ajax引擎->發(fā)送數(shù)據(jù)給服務(wù)器--》通過(guò)回調(diào)函數(shù)接收數(shù)據(jù)---》將數(shù)據(jù)賦給指定的頁(yè)面
下面是注冊(cè)驗(yàn)證案例register。php是注冊(cè)頁(yè)面。registerProcess.php用于接收數(shù)據(jù)并返回?cái)?shù)據(jù)
register.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用戶注冊(cè)</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)建一個(gè)ajax引擎
var xmlHttpRequest;
//不同瀏覽器獲取xmlRequest對(duì)象方法不一樣
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)建成功");
//第一個(gè)參數(shù)表示請(qǐng)求方式get.post。第二個(gè)參數(shù)指定url,對(duì)哪個(gè)頁(yè)面發(fā)送ajax請(qǐng)求
//用get方式提交的數(shù)據(jù)如果沒(méi)有發(fā)生變化的話瀏覽器將會(huì)從緩存中直接提取
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); 用于測(cè)試url是否成功
//第三個(gè)參數(shù)ture 表示異步機(jī)制
myXmlHttpRequest.open("get",url,true);
//指定回調(diào)函數(shù)，chul是函數(shù)名，表示如果狀態(tài)發(fā)生變化就調(diào)用該函數(shù)，有四個(gè)狀態(tài)
myXmlHttpRequest.onreadystatechange = chuli;
//發(fā)送請(qǐng)求，如果是get請(qǐng)求則填寫null即可
//額如果是post請(qǐng)求，則填寫實(shí)際的數(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; 這樣做的話沒(méi)辦法完成局部刷新
return document.getElementById(id);
}
-->
</script>
</head>
<body>
<form action="???" method="post">
用戶名字:<input type="text" name="username1" id="username" ><input type="button" onclick="checkName()" value="驗(yàn)證用戶名">
<input type="text" id="myres" />
<br/>
用戶密碼:<input type="password" name="password"><br>
電子郵件:<input type="text" name="email"><br/>
<input type="submit" value="用戶注冊(cè)">
</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="用戶注冊(cè)">
</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ù)器語(yǔ)言無(wú)關(guān)的技術(shù)，可以用在（php/jsp/asp.net）
4,ajax的工作原理： 創(chuàng)建一個(gè)ajax引擎->發(fā)送數(shù)據(jù)給服務(wù)器--》通過(guò)回調(diào)函數(shù)接收數(shù)據(jù)---》將數(shù)據(jù)賦給指定的頁(yè)面
下面是注冊(cè)驗(yàn)證案例register。php是注冊(cè)頁(yè)面。registerProcess.php用于接收數(shù)據(jù)并返回?cái)?shù)據(jù)
register.php
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用戶注冊(cè)</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)建一個(gè)ajax引擎
var xmlHttpRequest;
//不同瀏覽器獲取xmlRequest對(duì)象方法不一樣
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)建成功");
//第一個(gè)參數(shù)表示請(qǐng)求方式get.post。第二個(gè)參數(shù)指定url,對(duì)哪個(gè)頁(yè)面發(fā)送ajax請(qǐng)求
//用get方式提交的數(shù)據(jù)如果沒(méi)有發(fā)生變化的話瀏覽器將會(huì)從緩存中直接提取
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); 用于測(cè)試url是否成功
//第三個(gè)參數(shù)ture 表示異步機(jī)制
myXmlHttpRequest.open("get",url,true);
//指定回調(diào)函數(shù)，chul是函數(shù)名，表示如果狀態(tài)發(fā)生變化就調(diào)用該函數(shù)，有四個(gè)狀態(tài)
myXmlHttpRequest.onreadystatechange = chuli;
//發(fā)送請(qǐng)求，如果是get請(qǐng)求則填寫null即可
//額如果是post請(qǐng)求，則填寫實(shí)際的數(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; 這樣做的話沒(méi)辦法完成局部刷新
return document.getElementById(id);
}
-->
</script>
</head>
<body>
<form action="???" method="post">
用戶名字:<input type="text" name="username1" id="username" ><input type="button" onclick="checkName()" value="驗(yàn)證用戶名">
<input type="text" id="myres" />
<br/>
用戶密碼:<input type="password" name="password"><br>
電子郵件:<input type="text" name="email"><br/>
<input type="submit" value="用戶注冊(cè)">
</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="用戶注冊(cè)">
</form>
</body>
</html>
regiseterProcess.php
復(fù)制代碼 代碼如下:
<?php
$username=$_REQUEST['username'];
if($username=="shunping"){
echo "err";
}else{
echo "ok";
}
?>
您可能感興趣的文章:
- JQuery的Ajax請(qǐng)求實(shí)現(xiàn)局部刷新的簡(jiǎn)單實(shí)例
- jQuery+ajax實(shí)現(xiàn)局部刷新的兩種方法
- ajax局部刷新一個(gè)div下jsp內(nèi)容的方法
- jquery ajax 局部刷新小案例
- ajax局部刷新實(shí)例 (三種方法推薦)
- Ajax實(shí)現(xiàn)帶有驗(yàn)證碼的局部刷新登錄界面
- 純JS實(shí)現(xiàn)AJAX局部刷新功能
- AJAX的原理—如何做到異步和局部刷新【實(shí)現(xiàn)代碼】
- Ajax局部刷新應(yīng)用案例---簡(jiǎn)單登錄
- Ajax實(shí)現(xiàn)局部刷新的方法實(shí)例
相關(guān)文章
SpringMVC環(huán)境下實(shí)現(xiàn)的Ajax異步請(qǐng)求JSON格式數(shù)據(jù)
這篇文章主要介紹了SpringMVC環(huán)境下實(shí)現(xiàn)的Ajax異步請(qǐng)求JSON格式數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細(xì)介紹了ajax使用formdata上傳文件流，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要為大家詳細(xì)介紹了ajax實(shí)現(xiàn)分頁(yè)查詢功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了Ajax驗(yàn)證用戶名實(shí)例代碼，非常實(shí)用，特此分享供大家學(xué)習(xí)2016-04-04
jquery ajax實(shí)現(xiàn)批量刪除具體思路及代碼
回調(diào)函數(shù)，在請(qǐng)求完成后需要進(jìn)行的操作：此處是把選中的checkbox去掉，接下來(lái)為大家詳細(xì)介紹下，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-04-04
Ajax與mysql數(shù)據(jù)交互實(shí)現(xiàn)留言板功能
最近自己做了一個(gè)小demo，實(shí)現(xiàn)了Ajax與MySQL的數(shù)據(jù)交互，js部分用的是jq，后臺(tái)用的是PHP，數(shù)據(jù)庫(kù)是mysql，下面通過(guò)本文給大家詳細(xì)介紹下2016-12-12
Ajax 向數(shù)據(jù)庫(kù)修改和添加功能(較簡(jiǎn)答)
這篇文章主要介紹了Ajax 向數(shù)據(jù)庫(kù)修改和添加功能(較簡(jiǎn)答)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
通過(guò)history解決ajax不支持前進(jìn)/后退/刷新的問(wèn)題
下面小編就為大家?guī)?lái)一篇通過(guò)history解決ajax不支持前進(jìn)/后退/刷新的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
一文掌握ajax、fetch和axios的區(qū)別對(duì)比
AJAX可以在不更新全局的情況下更新局部頁(yè)面。通過(guò)在與服務(wù)器進(jìn)行數(shù)據(jù)交換，可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新，這篇文章主要介紹了ajax、fetch和axios的比較,需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細(xì)介紹了基于ajax實(shí)現(xiàn)驗(yàn)證碼功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11