ajax|服务器|显示Ajax Hack 之hack 13 在text或textarea里显示服务器信息 本hack讲的是不刷新页面显示服务器信息。 用户可以通过输入text和服务器组件交互而不用每次都等待页面的刷新。一个典型的例子就是拼写检测或自动完成field[Hack #78]。使用request 对象作为媒介，服务器组件可以和用户之间实时交互。 本hack显示一个自动的服务器响应，响应无刷新的显示在text中。本hack是[Hack #12]的扩展，该hack使用request对象将用户提交的数据传送给服务器组件。 本hack获取用户提交的信息，并将统计的结果显示在相同的标签里边。你也可以使用client-side JavaScript完成相同的工作，当然，为了证明某个服务器组件做了这个工作，本hack还显示了服务器的一些信息。 图2-2 显示了初始页面 图2-3显示了输入信息以后按tab后的结果 下面是页面的html代码。引入了js文件hacks_2_1.js。 “http://www.w3.org/TR/2000/REC-xhtml1–20000126/DTD/xhtml1-strict.dtd”> 上一个hack讲的是如何无刷新地提交用户信息。换句话说，在用户键入一些信息并按tab按钮或点击其他区域后，text里边的数据就被传送给了服务器。 onblur事件将调用getInfo( )函数，将text中的信息作为参数传递。 完整的代码在hack12里边，在这里就不再完整列举了。下面将getInfo( )函数和handleResponse( )函数作为重点介绍一下。 function getInfo(obj){ 这个函数将用户键入的信息作为val参数传递给服务器组件。此外obj参数持有的是text对象，用来取得键入的信息。这是一个DOM对象，如HTMLInputElement或HTMLTextAreaElement 即时服务器消息传递 服务器程序取得用户键入的信息，然后将统计的结果返回。为了确定响应信息，服务器返回的信息的格式是JSON格式[Hack #7]。JSON是一种很容易处理的XML文件格式。 返回的数据也可以作为一个简单的字符串。使用JSON格式只是作者的个人爱好而以。不过确实很容易使用。 下面的代码是一个服务器返回的JSON文件，如果用户在textarea里键入了55个词： 这段代码描述了一个有四个不同属性的js对象：Form_field_type, Text_length,Word_count, 和Server_info. 下面的代码也显示了如何处理这个对象的每个属性。接着heack取得这一服务器响应信息，并将它插入到textarea里边。 代码以文本格式取得响应信息。因为文本的格式是JSON（作为js的对象），代码使用了这一特殊的技术在hack7里边。构造函数将text作为一个js对象返回。在这个例子里，objt变量指的是服务器组件的响应，使用传递对象方法，你可以使用objt.Server_info来取得服务器信息。 下面的代码就是将响应信息作为一个对象返回： 下面的代码是将信息插入到textarea里边。 if(formObjTyp == "textarea"){ 图2-3显示了结果。 当服务器发信息给textarea而不是text时，会包括换行(\\n in JavaScript)，因为textarea能显示更多文本。而text不能包含换行符，因为text只有一行。Get stats from textareas and textfields using Ajax
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);
}
{
Form_field_type: “textarea”,
Text_length: “385”,
Word_count: “55”,
Server_inf “Apache Tomcat/5.0.19”
}
handleResponse( )函数：
//event handler for XMLHttpRequest
function handleResponse( ){
try{
if(request.readyState == 4){
if(request.status == 200){
var resp = request.responseText;
if(resp != null){
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(err.name);
alert(“It does not appear that the server ”+
“is available for this application. Please”+
“ try again very soon. \\nError: ”+err.message);
}
}
var resp = request.responseText;
var func = new Function(“return ”+resp);
//call the function and return the object to which
//the objt variable now points
var objt = func( );
if(formObj!= null){
formObj.value = objt.Form_field_type +
“ character count: ”+objt.Text_length+
“\\nWord count: ”+
objt.Word_count+“\\nServer inf ”+
objt.Server_info;
}
}
你可以访问 textarea，使因为这是一个顶级JavaScript变量，formObj指向了它。代码的关键之一是设置textarea或text的值。
Ajax Hack 之hack 13 在text或textarea里显示服务器信息
80酷酷网 80kuku.com
