Ajax Hack Hack 12 submitting text or textarea values to the server without refreshing the browser

ajax| Server | browser | refresh Ajax Hack Hack 12 submitting text or textarea values to the server without refreshing the browser

This section focuses on the smooth passing of text or textarea values to the server.

When the user enters a text or textarea value, Ajax can automatically send these values to the server. The program waits for text onblur

event, and then use the request object to send data to the server. In the common case, the user clicks a button and then the

The entire form is sent to the server as a large packet. The server is similar to this. For example, online testing or

The tutorial can display results quickly after user input completes without requiring the user to click the button to refresh the page.

When some elements of form, such as text, lose the keyboard focus, the onblur event is fired, usually by the user clicking the TAB key

Or click on another area. You can also use onkeypress, onkeydown, or onkeyup to work with users and text parts.

The interaction.

Next steps to send data to the server:

1. The user moves the focus into text.

2. Enter information in text.

3. The user clicks the TAB key or points to other areas.

The user enters some information in text, and the program automatically sends the information to the server. In this process, it is best to join

Informational prompts, such as alert a dialog box, it is best to let the user know that the program is working, such as a progress bar, during the send process.

The following is the HTML code for the page:

"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

Server: <br/><br/>

Users do not have to click on any button to send information, each text can control their own actions.

The onblur event fires the handler when the user presses the TAB key, or when an area other than the text part is lit. The following code

Shows how the event handler works.

This section uses the JS source code in the file hacks_2_1.js. This file has all the code needed to run the program.

The code includes all the code that sends the request and processes the corresponding value (Handleresponse () function). In the next section,

Describes how to insert the server into the text part appropriately, but that doesn't affect your understanding of handleresponse ()

function, the following is the JS code:

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;

If the application has a bug

Alert

"A problem occurred with communicating between" +

"XMLHttpRequest object and the server program.";

}

}//end outer IF

} catch (Err) {

Alert ("It does not appear", "The server is available" +

"For this application." Please "+

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

}

}

/* Initialize A Request object is already constructed * *

function Initreq (reqtype,url,bool) {

try{

/* Specify the function that would 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" +

"Of this application ' s features!";}

}

The code first declares two global JS variables: Formobj and Formobjtyp. The former holds input

or TextArea object (other functions require access), which holds a string that describes the markup of a Form object

Name, such as input or textarea. This string is also one of the variables required by the server component.

As mentioned earlier, when the browser loads the page, the code specifies the processor for the onblur event of the text part.

You can use JS in Window's OnLoad event processing to complete this work. Using Window.onload,

can also be specified directly in 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);}}; }

}

Now, these text is hot. When the user enters the information, exit the control, the information input is completed,

Next, send the message to the server, and the user does not have to click another button.

The Text-field event handler calls the GetInfo () function. function to extract the information typed by the user and send it to the server.

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

}

The argument for the GetInfo () function is the text or textarea object. To pass the initiative is to be able to obtain information about the object.

The last part of the HttpRequest ("get", url,true) function sends the user information to the server.

However, something happens before the code calls the function. The server build expects a string that describes the form type.

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

The global Function encodeURIComponent () method is used to confirm that certain attributes, such as spaces, are included in the URL

When you get the code. Otherwise, the program may send an incorrect URL to the server and raise an error.

Next:

What happens after the data is submitted? It depends on your program. The next section will cover another topic: To use JS and

Ajax inserts the server's corresponding value into an existing text part.

<