1,ajax(asynchronouse javascript and xml)異步的 javascrip 和xml
2,（包含了7種技術：javascript xml xstl dom xhtml css xmlhttpRequest）
3,是一種與服務器語言無關的技術，可以用在（php/jsp/asp.net）
4,ajax的工作原理： 創建一個ajax引擎->發送數據給服務器--》通過回調函數接收數據---》將數據賦給指定的頁面
下面是注冊驗證案例register。php是注冊頁面。registerProcess.php用于接收數據并返回數據
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(){
//創建一個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("創建成功");
//第一個參數表示請求方式get.post。第二個參數指定url,對哪個頁面發送ajax請求
//用get方式提交的數據如果沒有發生變化的話瀏覽器將會從緩存中直接提取
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是否成功
//第三個參數ture 表示異步機制
myXmlHttpRequest.open("get",url,true);
//指定回調函數，chul是函數名，表示如果狀態發生變化就調用該函數，有四個狀態
myXmlHttpRequest.onreadystatechange = chuli;
//發送請求，如果是get請求則填寫null即可
//額如果是post請求，則填寫實際的數據
myXmlHttpRequest.send(null);
}
}
function chuli(){
//window.alert("處理函數被回調");
if(myXmlHttpRequest.readyState == 4){
//window.alert("服務器返回"+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";
}
?>
您可能感興趣的文章:- JQuery的Ajax請求實現局部刷新的簡單實例
- jQuery+ajax實現局部刷新的兩種方法
- ajax局部刷新一個div下jsp內容的方法
- jquery ajax 局部刷新小案例
- ajax局部刷新實例 (三種方法推薦)
- Ajax實現帶有驗證碼的局部刷新登錄界面
- 純JS實現AJAX局部刷新功能
- AJAX的原理—如何做到異步和局部刷新【實現代碼】
- Ajax局部刷新應用案例---簡單登錄
- Ajax實現局部刷新的方法實例
