Ajax技術原理
Ajax基本原理是在web瀏覽器使用javascript程序與服務器進行通信，傳遞數據。javascript相對用戶來說就是完成數據的驗證，響應用戶的請求和服務器異步傳輸數據。javascript使用XMLHttpRequest與服務器通信。一個典型的Ajax應用工作流程如下
1.Javascript程序創建一個XMLHttpRequest對象
2.使用XMLHttpRequest對象向服務器發送HTTP請求
3.服務器響應請求並給客戶端返回信息
4.客戶端Javascript程序在收到回饋之後使用DOM等接口向用戶呈現
(1).XMLHTTPRequest對象
Ajax的一個最大的特點是無需刷新頁面便可向服務器傳輸或讀寫數據(又稱無刷新更新頁面),這一特點主要得益於XMLHTTP組件XMLHTTPRequest對象。
XMLHttpRequest 對象方法描述
| 方 法 | 描 述 |
| abort() | 停止當前請求 |
| getAllResponseHeaders() | 把HTTP請求的所有響應首部作爲鍵/值對返回 |
| getResponseHeader("header") | 返回指定首部的串值 |
| open("method","URL",[asyncFlag],["userName"],["password"]) | 建立對服務器的調用。method參數可以是GET、POST或PUT。url參數可以是相對URL或絕對URL。這個方法還包括3個可選的參數，是否異步，用戶名，密碼 |
| send(content) | 向服務器發送請求 |
| setRequestHeader("header", "value") | 把指定首部設置爲所提供的值。在設置任何首部之前必須先調用open()。設置header並和請求一起發送 ('post'方法一定要 ) |
XMLHttpRequest 對象屬性描述
| 屬 性 | 描 述 |
| onreadystatechange | 狀態改變的事件觸發器，每個狀態改變時都會觸發這個事件處理器，通常會調用一個JavaScript函數 |
| readyState | 請求的狀態。有5個可取值：0 = 未初始化，1 = 正在加載，2 = 已加載，3 = 交互中，4 = 完成 |
| responseText | 服務器的響應，返回數據的文本。 |
| responseXML | 服務器的響應，返回數據的兼容DOM的XML文檔對象 ，這個對象可以解析爲一個DOM對象。 |
| responseBody | 服務器返回的主題（非文本格式） |
| responseStream | 服務器返回的數據流 |
| status | 服務器的HTTP狀態碼（如：404 = "文件末找到" 、200 ="成功" ，等等） |
| statusText | 服務器返回的狀態文本信息 ，HTTP狀態碼的相應文本（OK或Not Found（未找到）等等） |
創建XMLHttpRequest對象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
（2）向服務器發送請求
如需將請求發送到服務器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：
xmlhttp.open("GET","url",true);
xmlhttp.send();
（3）響應事件：當請求被髮送到服務器時，我們需要執行一些基於響應的任務。通過onreadystatechange 屬性來設定事件。
http_request.onreadystatechange = alertContents; //指定alertContents作爲響應事件
實例：檢查註冊用戶名是否被佔用
checkname.html文件
<body>
<script>
var http_request = false; //開啓異步請求
function createRequest(url)
{
http_request = false;
//判斷瀏覽器類型創建XMLHttpRequest請求
if (window.XMLHttpRequest) { http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if(!http_request)
{
alert("不能創建XMLHTTP實例");
return false;
}
http_request.onreadystatechange = alertContents; //指定響應方法
http_request.open("GET", url, true); //設定發送請求方式，目標，類型
http_request.send(null);
}
function alertContents() //響應函數 處理服務器返回的信息
{
if(http_request.readyState == 4){ //結合返回的readyState和status狀態判斷
if(http_request.status == 200){
alert(http_request.responseText); //接受響應信息
}else{
alert("你請求的頁面有錯誤！");
}
}
}
function checkName(){
var username = form1.username.value;
if(username==""){
window.alert("請填寫用戶名");
form1.username.focus();
return false;
}else{ //請求地址必須添加清除緩存的代碼
createRequest('checkname.php?username='+username+'&nocache='+new Date().getTime());
}
}
</script>
<form name="form1" method="post" action="">
<tr>
<td width="29%" height="30" align="center">用 戶 名：</td>
<td width="71%" height="24"><input name="username" type="text" id="username" size="20">
<a href="#" onClick="checkName();">[檢測用戶名]</a> </td>
</tr>
</form>
</body>
處理文件checkname.php
<?php
header('Content-type: text/html;charset=GB2312'); //指定發送數據的編碼格式爲GB2312
$link=mysql_connect("localhost","root","root"); //連接數據庫
mysql_select_db("db_database23",$link);
$GB2312string=iconv( 'UTF-8', 'gb2312//IGNORE' , $RequestAjaxString); //Ajax中先用encodeURIComponent對要提交的中文進行編碼
mysql_query("set names gb2312");
$username=$_GET[username];
$sql=mysql_query("select * from tb_user where name='".$username."'"); //查詢結果
$info=mysql_fetch_array($sql);
if ($info){
echo "很報歉!用戶名[".$username."]已經被註冊!";
}else{
echo "祝賀您!用戶名[".$username."]沒有被註冊!";
}
?>