Ajax Hack 之
hack 12不刷新
浏览器的情况下向
服务器提交text或textarea的值
本节主要讲的是：将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: <br/><br />
用户不必点击任何按钮来发送信息，每个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部件中。
