一.什么是ajax?
ajax = asynchronous + javascript + xml = 同步傳輸數據 + javascrip處理返回XML數據
實際上,幾年前ajax這個技術就應用於互聯網上,但因思維的禁錮,一直在ajax的"X", 即處理返回XML數據上打轉.
只至偉大的夢想家GOOGLE將其應用於GMAIL及GMAP上,告知世人AJAX也可以玩的這么COOL, 這種老技術才被大家重新所重視.
二.為什么要用ajax
富客戶端已經成為網站以及基於網站的程序發展的必然(什么是富客戶端?自己google),要構建一個富客戶端的程序,必須滿足以下條件:
1. 用戶定制服務(實例: www.live.com)
2.無需等待(實例:Gmail)
3.桌面化界面(實例:www.backbase.com)
OK,再來講講ajax能實現的功能:
1.采用XMLHttpRequest實現后台數據提交,客戶端無刷新(此功能滿足富客戶端要求2)
2.返回數據能完美與CSS結合,實現豐富界面(此功能滿足富客戶端要求3)
3.采用javascript腳本實時控制當前瀏覽界面(此功能滿足富客戶端要求1)
4.兼容絕大部分瀏覽器,只要你的瀏覽器支持JAVASCRIP,支持XMLHttpRequest
5.豐富的自定義擴展(請允許我叫他API吧),能用於FLASH,能用於ASP,能用於PHP.能用於......
綜上,ajax的使用無疑能大大完善客戶端與服務器端的交流與溝通,較完美處理客戶端指令,試想,當你跟客戶溝通已經達致完美,還有什么生意談不成呢?
三. ajax原理
請允許我采用這張已經廣為流傳的圖片作為ajax原理的展示,雖然他還不夠完全表達,但已經是目前最直觀最完美的展示了<附件>
四.實例告訴你怎么用ajax
精彩部分開始了!
實例1: 注冊模塊
假如我要構造一個會員注冊頁面,傳統的方法是客戶端填寫注冊內容,然后交給服務器端處理,然后返回注冊結果
假設我注冊一個ID為 tony的會員,而數據庫中已經存在這個ID,整個流程將是這樣的:
1. 客戶填寫注冊表單(當然,你可以加入javascript已檢測客戶端填寫表單是否正確),並表明要求注冊的ID為tony
2.發送表單至處理頁面(客戶端刷新一次,並等待)
3.服務器端處理表單,檢測tony這一ID已經注冊,返回"ID已注冊信息"(視程序而定,客戶端刷新一次或不刷新)
4.重新跳轉至注冊頁面(客戶端再刷新一次)
OMG, 這最少要刷新2次,還得要我等上半分鍾,如果不是很重要,我情願不注冊了!
不刷新? 不等待? 讓ajax來幫你吧
Step1:
已存在數據庫
會員表單 member
列
ID 登陸ID
Password 登陸密碼
其中已經有一行 ID為 tony 的數據
Step2:
構造注冊表單 reg.html
CODE:[Copy to clipboard]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>注冊</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="msg"></div>
ID: <input type="text" id="regid" /><br />
Password: <input type="password" id="regpassword" /><br />
<input type="submit" id="regsubmit" />
</body>
</html>
Step3:
XmlHTTPrequest調用 javascript ajax.js
CODE:[Copy to clipboard]//功能: 根據瀏覽器調用支持的XMLHTTPREQUEST
// IE support
if (window.ActiveXObject && !window.XMLHttpRequest)
{
window.XMLHttpRequest = function()
{
var msxmls = new Array('Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP','Microsoft.XMLHTTP');
for (var i = 0; i < msxmls.length; i++)
{
try
{
return new ActiveXObject(msxmls);
}
catch (e)
{
}
}
return null;
};
}
// Gecko support
/* ;-) */
// Opera support
if (window.opera && !window.XMLHttpRequest)
{
window.XMLHttpRequest = function()
{
this.readyState = 0; // 0=uninitialized,1=loading,2=loaded,3=interactive,4=complete
this.status = 0; // HTTP status codes
this.statusText = '';
this._headers = [];
this._aborted = false;
this._async = true;
this._defaultCharset = 'ISO-8859-1';
this._getCharset = function()
{
var charset = _defaultCharset;
var contentType = this.getResponseHeader('Content-type').toUpperCase();
val = contentType.indexOf('CHARSET=');
if (val != -1)
{
charset = contentType.substring(val);
}
val = charset.indexOf(';');
if (val != -1)
{
charset = charset.substring(0, val);
}
val = charset.indexOf(',');
if (val != -1)
{
charset = charset.substring(0, val);
}
return charset;
};
this.abort = function()
{
this._aborted = true;
};
this.getAllResponseHeaders = function()
{
return this.getAllResponseHeader('*');
};
this.getAllResponseHeader = function(header)
{
var ret = '';
for (var i = 0; i < this._headers.length; i++)
{
if (header == '*' || this._headers.h == header)
{
ret += this._headers.h + ': ' + this._headers.v + '\n';
}
}
return ret;
};
this.getResponseHeader = function(header)
{
var ret = getAllResponseHeader(header);
var i = ret.indexOf('\n');
if (i != -1)
{
ret = ret.substring(0, i);
}
return ret;
};
this.setRequestHeader = function(header, value)
{
this._headers[this._headers.length] = {h:header, v:value};
};
this.open = function(method, url, async, user, password)
{
this.method = method;
this.url = url;
this._async = true;
this._aborted = false;
this._headers = [];
if (arguments.length >= 3)
{
this._async = async;
}
if (arguments.length > 3)
{
opera.postError('XMLHttpRequest.open() - user/password not supported');
}
this.readyState = 1;
if (this.onreadystatechange)
{
this.onreadystatechange();
}
};
this.send = function(data)
{
if (!navigator.javaEnabled())
{
alert("XMLHttpRequest.send() - Java must be installed and enabled.");
return;
}
if (this._async)
{
setTimeout(this._sendasync, 0, this, data);
}
else
{
this._sendsync(data);
}
};
this._sendasync = function(req, data)
{
if (!req._aborted)
{
req._sendsync(data);
}
};
this._sendsync = function(data)
{
this.readyState = 2;
if (this.onreadystatechange)
{
this.onreadystatechange();
}
var url = new java.net.URL(new java.net.URL(window.location.href), this.url);
var conn = url.openConnection();
for (var i = 0; i < this._headers.length; i++)
{
conn.setRequestProperty(this._headers.h, this._headers.v);
}
this._headers = [];
if (this.method == 'POST')
{
// POST data
conn.setDoOutput(true);
var wr = new java.io.OutputStreamWriter(conn.getOutputStream(), this._getCharset());
wr.write(data);
wr.flush();
wr.close();
}
// read response headers
// NOTE: the getHeaderField() methods always return nulls for me :(
var gotContentEncoding = false;
var gotContentLength = false;
var gotContentType = false;
var gotDate = false;
var gotExpiration = false;
var gotLastModified = false;
for (var i = 0; ; i++)
{
var hdrName = conn.getHeaderFieldKey(i);
var hdrValue = conn.getHeaderField(i);
if (hdrName == null && hdrValue == null)
{
break;
}
if (hdrName != null)
{
this._headers[this._headers.length] = {h:hdrName, v:hdrValue};
switch (hdrName.toLowerCase())
{
case 'content-encoding': gotContentEncoding = true; break;
case 'content-length' : gotContentLength = true; break;
case 'content-type' : gotContentType = true; break;
case 'date' : gotDate = true; break;
case 'expires' : gotExpiration = true; break;
case 'last-modified' : gotLastModified = true; break;
}
}
}
// try to fill in any missing header information
var val;
val = conn.getContentEncoding();
if (val != null && !gotContentEncoding) this._headers[this._headers.length] = {h:'Content-encoding', v:val};
val = conn.getContentLength();
if (val != -1 && !gotContentLength) this._headers[this._headers.length] = {h:'Content-length', v:val};
val = conn.getContentType();
if (val != null && !gotContentType) this._headers[this._headers.length] = {h:'Content-type', v:val};
val = conn.getDate();
if (val != 0 && !gotDate) this._headers[this._headers.length] = {h:'Date', v:(new Date(val)).toUTCString()};
val = conn.getExpiration();
if (val != 0 && !gotExpiration) this._headers[this._headers.length] = {h:'Expires', v:(new Date(val)).toUTCString()};
val = conn.getLastModified();
if (val != 0 && !gotLastModified) this._headers[this._headers.length] = {h:'Last-modified', v:(new Date(val)).toUTCString()};
// read response data
var reqdata = '';
var stream = conn.getInputStream();
if (stream)
{
var reader = new java.io.BufferedReader(new java.io.InputStreamReader(stream, this._getCharset()));
var line;
while ((line = reader.readLine()) != null)
{
if (this.readyState == 2)
{
this.readyState = 3;
if (this.onreadystatechange)
{
this.onreadystatechange();
}
}
reqdata += line + '\n';
}
reader.close();
this.status = 200;
this.statusText = 'OK';
this.responseText = reqdata;
this.readyState = 4;
if (this.onreadystatechange)
{
this.onreadystatechange();
}
if (this.onload)
{
this.onload();
}
}
else
{
// error
this.status = 404;
this.statusText = 'Not Found';
this.responseText = '';
this.readyState = 4;
if (this.onreadystatechange)
{
this.onreadystatechange();
}
if (this.onerror)
{
this.onerror();
}
}
};
};
}
// ActiveXObject emulation
if (!window.ActiveXObject && window.XMLHttpRequest)
{
window.ActiveXObject = function(type)
{
switch (type.toLowerCase())
{
case 'microsoft.xmlhttp':
case 'msxml2.xmlhttp':
case 'msxml2.xmlhttp.3.0':
case 'msxml2.xmlhttp.4.0':
case 'msxml2.xmlhttp.5.0':
return new XMLHttpRequest();
}
return null;
};
}
//上述代碼也是網上廣為流傳的,請允許我調用,雖然我不知道原作者是誰:P
Step4:
構造表單處理及提交javascript腳本 reg.js
CODE:[Copy to clipboard]//獲取頁面指定ID公用函數
function GE(a){return document.getElementById(a);}
//表單檢測
function Check(){
//檢測ID是否為空
if(GE('regid').value==''){GE('msg').innerHTML='ID不能為空';return false}
//檢測PASSWORD是否為空
if(GE('regpassword').value==''){GE('msg').innerHTML='password 不能為空';return false}
//檢測OK后提交數據
//建立XMLHttpRequest對象
var X=new XMLHttpRequest();
//檢測瀏覽器是否支持XMLHttpRequest
if(X){
//禁止客戶端再次提交表單
GE('regsubmit').disabled=true;
//onreadystatechange為XMLHttpRequest的狀態改變的事件觸發器
X.onreadystatechange=function(){
//readyState 對象狀態
//0 = 未初始化
//1 = 讀取中
//2 = 已讀取
//3 = 交互中
//4 = 完成
if(X.readyState==4){
//交互完成的處理
//status,服務器返回的狀態碼, 200為成功
if(X.status==200){
//運行服務器返回的腳本
eval(X.responseText)
}
//服務器端程序運行失敗,返回錯誤代碼
else{GE('msg').innerHTML=X.statusText}
}
};
//獲取服務器端數據
//open("method","URL"[,asyncFlag])
//請求的目標 URL, 方法
//采用POST為提交數據
//采用true為異步傳輸, false為同步傳輸
X.open('POST','reg.asp',true);
X.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
var SendData = 'regid='+GE('regid').value+'®password='+GE('regpassword').value
X.send(SendData)
}
//不支持的話返回錯誤提示
else{
GE('msg').innerHTML='你的瀏覽器不支持XMLHttpRequest'
}
}
Step5:
OK,客戶端頁面全部完成, 重新調整下reg.html
CODE:[Copy to clipboard]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>注冊</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="reg.js"></script>
</head>
<body>
<div id="msg"></div>
ID: <input type="text" id="regid" /><br />
Password: <input type="password" id="regpassword" /><br />
<input type="submit" id="regsubmit" onclick="Check()" />
</body>
</html>
Step6:
構造服務器端程序 reg.asp
CODE:[Copy to clipboard]<%
dim regid, regpassword, str
regid=Request.Form("regid")
regpassword=Request.Form("regpassword")
if regid="" or regpassword="" then
str = "ID和PASSWORD必須填寫"
else
'查詢數據庫是否存在該ID
'代碼略
if rs.EOF then
'不存在則添加數據
'代碼略
str = "注冊成功,ID為" & regid & " , 密碼為" & regpassword
else
str = "注冊失敗,ID已經存在"
end if
Set rs = nothing
End if
Response.Write "GE('msg').innerHTML='" & str & "';GE('regsubmit').disabled=false"
Response.End
%>
至此,一個簡單的注冊頁面 已經打造成功. 當然,你可以添加更多的代碼(比如添加表單內容,擴充表單檢測腳本,提高后台程序安全性等)以提高程序實用性
上述代碼及實例實現了一個簡單的ajax過程.
或許,這不能叫ajax,只能叫aja, 因為它沒有實現xml數據處理. 但是,能實現ajax的特色功能,能使客戶端更滿意,更人性化,這樣用法又何嘗不可? Google不就是這么用的嗎
Ajax實現無刷新頁面提交
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。