DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> Ajax Hack 之hack 12不刷新浏覽器的情況下向服務器提交text或textarea的值
Ajax Hack 之hack 12不刷新浏覽器的情況下向服務器提交text或textarea的值
編輯:AJAX詳解     

本節主要講的是:將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”>

Get stats from textareas and textfIElds using AJax

Javascript:void%200> Enter a few Words for submitting to our server:



Enter a phrase for submitting to our

server:

用戶不必點擊任何按鈕來發送信息,每個text都能控制自己的行動。

當用戶按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部件中。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved