本節主要講的是:將text或textarea的值平滑地傳遞給服務器。
當用戶輸入text或textarea的值以後,AJax能將這些值自動的發給服務器。程序等待text的onblur
事件,然後使用request對象向服務器發送數據。在常用的情況是,用戶點擊一個按鈕,然後將
整個form作為一個大的數據包向服務器發送。服務器相應也與此類似。例如,在線測試或者
教程能在用戶輸入完成以後很快顯示結果,而不需要用戶點擊按鈕刷新頁面得到結果。
形如form的某些元素,如text等失去鍵盤焦點的時候將激發onblur事件,通常是用戶點擊tab鍵
或者點擊其他區域。也可以使用onkeypress, onkeydown, 或 onkeyup 等來處理用戶和text部件
的交互。
接下來向服務器發送數據的步驟:
1. 用戶將焦點移入text。
2. 在text中輸入信息。
3. 用戶點擊tab鍵或點其他區域。
用戶在text裡輸入一些信息,然後程序自動將信息發給服務器。在這個過程中,最好加入
信息提示,如alert一個對話框,在發送過程中最好能讓用戶知道程序在運作,如有一個進度條。
下面是頁面的Html代碼:
“http://www.w3.org/TR/2000/REC-xhtml1–20000126/DTD/xHtml1-strict.dtd”>
當用戶按tab鍵,或者點了text部件以外的區域時,onblur事件將激發處理程序。下面的代碼
將顯示事件處理者是如何進行工作的。
本節使用的js源代碼在文件hacks_2_1.JS中。這個文件中有程序運行所需的所有代碼。
代碼中包括了發送請求和處理相應值(handleResponse( )函數)的所有代碼。在下一節中,
會講述如何將服務器相應插入到text部件中的相關技術,但這絲毫不影響你理解handleResponse( )
函數,下面是JS代碼:
var formObj = null;
var formObjTyp = “”;
var request=null;
//input fIEld’s event handlers
window.onload=function( ){
var txtA = document.getElementById(“tarea”;
if(txtA != null){
txtA.onblur=function( ){if (this.value) { getInfo(this);}}; }
var tfd = document.getElementById("tfIEld");
if(tfd != null){
tfd.onblur=function( ){if (this.value) { getInfo(this);}}; }
}
function getInfo(obj){
if (obj == null ) { return; }
formObj=obj;
formObjTyp =obj.tagName;
if(formObjTyp "input" || formObjTyp "INPUT"){
formObjTyp = formObjTyp " "formObj.type;
}
formObjTyp = formObjTyp.toLowerCase( );
var url = “http://www.parkerriver.com/s/webforms?objtype=”+
encodeURIComponent(formObjTyp)+“&val=”+ encodeURIComponent(obj.value);
httpRequest(“GET”,url,true);
}
//event handler for XMLHttpRequest
function handleResponse( ){
try{
if(request.readyState == 4){
if(request.status == 200){
var resp = request.responseText;
var func = new Function(“return ”+resp);
var objt = func( );
if(formObjTyp == “textarea”{
if(formObj != null){
formObj.value = objt.Form_fIEld_type +
“ character count: ”+objt.Text_length+
“\\nWord count: ”+
objt.Word_count+“\\nServer inf ”+
objt.Server_info;
}
} else if(formObjTyp == “input text”{
if(formObj != null){
formObj.value = objt.Form_fIEld_type +
“ # characters: ”+objt.Text_length+
“ Word count: ”+objt.Word_count; }
}
} else {
//request.status is 503
//if the application isn‘t available;
//500 if the application has a bug
alert(
“A problem occurred with communicating between the ”+
“XMLHttpRequest object and the server program.”;
}
}//end outer if
} catch (err) {
alert(“It does not appear that the server is available ”+
“for this application. Please”+
“ try again very soon. \\nError: ”+err.message);
}
}
/* Initialize a request object that is already constructed */
function initReq(reqType,url,bool){
try{
/* Specify the function that will handle the
HTTP response */
request.onreadystatechange=handleResponse;
request.open(reqType,url,bool);
request.send(null);
} catch (errv) {
alert(
“The application cannot contact the server ”+
“at the moment. ”+
“Please try again in a few seconds.” );
}
}
/* Wrapper function for constructing a request object.
Parameters:
reqType: The HTTP request type, such as GET or POST.
url: The URL of the server program.
asynch: Whether to send the request asynchronously or not. */
function httpRequest(reqType,url,asynch){
//Mozilla-based browsers
if(window.XMLHttpRequest){
request = new XMLHttpRequest( );
} else if (window.ActiveXObject){
request=new ActiveXObject(“Msxml2.XMLHTTP”;
if (! request){
request=new ActiveXObject(“Microsoft.XMLHTTP”;
}
}
//the request could still be null if neither ActiveXObject
//initialization succeeded
if(request){
initReq(reqType,url,asynch);
} else {
alert(“Your browser does not permit the use of all ”+
“of this application‘s features!”;}
}
代碼首先聲明了兩個全局的JS變量:formObj和formObjTyp。前者持有input
或textarea對象(其他函數需要訪問),後者持有一個string描述form對象的標記
名稱,如input或textarea。這個string也是服務器組件需要的變量之一。
如前所述,在浏覽器加載頁面時,代碼就為text部件的onblur事件指定了處理器。
你可以使用JS在window的onload事件處理中來完成這個工作。使用window.onload,
也可在Html中直接指定。
window.onload=function( ){
var txtA = document.getElementById(“tarea”;
if(txtA != null){
txtA.onblur=function( ){if (this.value) { getInfo(this);}}; }
var tfd = document.getElementById(“tfIEld”;
if(tfd != null){
tfd.onblur=function( ){if (this.value) { getInfo(this);}}; }
}
現在,這些text是hot的。當用戶輸入完信息,退出控制以後,信息輸入就完成了,
接下來向服務器發送信息;用戶不必點擊其他按鈕。
text-fIEld事件處理器調用getInfo( )函數。函數抽取用戶鍵入的信息,並向服務器發送。
function getInfo(obj){
if (obj == null ) { return; }
formObj=obj;
formObjTyp =obj.tagName;
if(formObjTyp "input" || formObjTyp "INPUT"){
formObjTyp = formObjTyp " "formObj.type;
}
formObjTyp = formObjTyp.toLowerCase( );
var url = “http://www.parkerriver.com/s/webforms?objtype=”+
encodeURIComponent(formObjTyp)+“&val=”+
encodeURIComponent(obj.value);
httpRequest(“GET”,url,true);
}
getInfo( )函數的參數是text或textarea對象。傳遞進取是為了能夠取得該對象的信息。
最後一部分httpRequest("GET",url,true)函數發送用戶信息到服務器。
然而,在代碼調用函數前,一些事情發生了。服務器組建期待的是一個描述form類型的字符串。
formObjTyp =obj.tagName;
if(formObjTyp "input" || formObjTyp "INPUT"){
formObjTyp = formObjTyp " "formObj.type;
}
formObjTyp = formObjTyp.toLowerCase( );
var url = “http://www.parkerriver.com/s/webforms?objtype=”+
encodeURIComponent(formObjTyp)+“&val=”+ encodeURIComponent(val);
httpRequest(“GET”,url,true);
全局函數encodeURIComponent( )方法用來確認某些特性,如空格等,在他們被包含到URL中
的時候得到編碼。否則,程序可能會發送一個錯誤的URL給服務器,而引發錯誤。
接下來:
在提交數據以後,會發生什麼呢? 這要取決於你的程序。下一節將講述另一個話題:是用JS和
AJax將服務器相應值插入到一個存在的text部件中。