Ajax Hack Hack 13 display server information in text or textarea

Ajax| Server | display Ajax Hack Hack 13 display server information in text or textarea

This hack is about not refreshing the page to display server information.

Users can interact with the server component by entering text and without waiting for the page to refresh each time. A typical example is spell detection or automatic completion of Field[hack #78]. Using the Request object as a medium, the server component can interact with the user in real time.

This hack displays an automatic server response that is displayed in text with no refreshing response. This Hack is an extension of [Hack #12] that uses the request object to deliver data submitted by the user to the server component.

This hack gets the information submitted by the user and displays the results of the statistics in the same label. You can also use client-side JavaScript to do the same job, and of course, to prove that a server component does this, this hack also shows some information about the server.

Figure 2-2 shows the initial page

Figure 2-3 shows the result of pressing TAB after the input information

The following is the HTML code for the page. The introduction of JS file Hacks_2_1.js.

"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/>

The last hack is about how to submit user information without refreshing. In other words, after the user types some information and presses the TAB button or clicks another area, the data inside the text is sent to the server.

The onblur event calls the GetInfo () function to pass the information in text as a parameter.

The complete code is inside the hack12, and it is no longer fully enumerated here. The GetInfo () function and the Handleresponse () function are highlighted below.

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);

}

This function passes the information typed by the user as a Val parameter to the server component. Additionally, the obj parameter holds a text object that is used to get the information typed. This is a DOM object, such as Htmlinputelement or htmltextareaelement

Instant Server Message Delivery

The server program gets the information that the user typed, and then returns the results of the statistic. In order to determine the response information, the information returned by the server is formatted in JSON format [Hack #7]. JSON is a very easy to handle XML file format.

The returned data can also be used as a simple string. Using the JSON format is just the author's personal hobby. But it's really easy to use.

The following code is a JSON file returned by a server, if the user typed 55 words into the TEXTAREA:

{

Form_field_type: "TextArea",

Text_length: "385",

Word_count: "55",

Server_inf "Apache tomcat/5.0.19"

}

This code describes a JS object with four different attributes: Form_field_type, Text_length,word_count, and Server_info. The following code also shows how to handle each property of this object. The heack then gets the server response information and inserts it into the textarea.

Handleresponse () function:

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;

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 server" +

' is available to this application. Please "+

"Try again very soon." \\nError: "+err.message);

}

}

The code obtains the response information in text format. Because the format of the text is JSON (as the object of JS), the code uses this particular technique in the hack7. The constructor returns text as a JS object. In this example, the OBJT variable refers to the response of the server component, using the Pass object method, where you can use OBJT. Server_info to obtain server information.

The following code returns the response information as an object:

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 ();

The following code inserts information into the textarea.

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;

}

}

Figure 2-3 shows the results.

You can access textarea so that because it's a top-level JavaScript variable, formobj points to it. One of the keys to the code is to set the value of textarea or text.

When the server sends a message to textarea instead of text, it includes a newline (\\n in JavaScript) because textarea can display more text. Text cannot contain line breaks because text has only one row.

<