AJAX Hacks the HACK2. Using the Request object to deliver data to the server

Ajax|request| Object | server | data AJAX Hacks HACK2. Using the Request object to deliver data to the server

Starting with the traditional way to transfer form data, this section describes using the Post method to send data to communicate with the server, and no page refreshes occur during this process. Then display the appropriate information for the server.

The page is simply a form that requires the user to enter a name, gender, country, or region. The user can submit the form after entering the completed form. (See the original text in detail)

The HTML code for the page is as follows:
"Http://www.w3.org/tr/1999/rec-html401–19991224/strict.dtd" >
"Text/javascript" src= "/parkerriver/js/hack2.js" >

A Few Facts About yourself ...

Javascript:void%200>
< "setquerystring (); SendData (); return false" >

The name:

Last Name:

Gender:

Country of Origin:

Send Data

Which is used to load the JS file. The Submit button calls both the Setquerystring () and the SendData () functions. Their role is to obtain and set the requested data format, transfer data to the server. The Hack2.js file has a complete implementation of two functions. The following code is a function setquerystring ():

function setquerystring () {

Initialize the top-level variable; Also reset the variable to cover when

The user clicks multiple times

Querystring= "";

var frm = document.forms[0];

var numberelements = frm.elements.length;

for (var i = 0; i < numberelements; i++) {

if (I < numberElements-1) {

QueryString = Frm.elements[i].name "=" +frm.elements[i].value+ "&";

} else {

QueryString = Frm.elements[i].name "=" +frm.elements[i].value;

}

}

}

The function is simply to get the values of each INPUT element in the form and save them in a certain format to the QueryString variable. Its format is as follows: Firstname=bruce&lastname=perry&gender=m&country=usa.

When the number of elements in a form changes, the function does not have to be modified.

After the data in the form is stored in QueryString, the request can be sent to the server via an HTTP post. Next look at this section of code. As mentioned earlier, when the form is submitted, the Setquerystring function is called, and then the function SendData () is called:

var request;

var querystring; Used to save form data

function SendData () {

Setquerystring ();

var url= "Http://www.parkerriver.com/s/sender";

HttpRequest ("POST", url,true);

}

Event handler for XMLHttpRequest

function Handlecheck () {

if (request.readystate = = 4) {

if (Request.status = = 200) {

alert (Request.responsetext);

} else {

Alert ("A problem occurred with communicating between the XMLHttpRequest object and the server program."

}

}//end outer IF

}

/* Initialize A Request object is already constructed * *

function Initreq (reqtype,url,bool) {

/* Specify the function that would handle the HTTP response * *

Request.onreadystatechange=handlecheck;

Request.open (Reqtype,url,bool);

Request.setrequestheader ("Content-type",

"Application/x-www-form-urlencoded; Charset=utf-8 ";

Request.send (querystring);

}

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

Initializations succeeded

if (request) {

Initreq (Reqtype,url,asynch);

} else {

Alert ("Your browser does not permit the use of" +

"Of this application ' s features!";}

}

function HttpRequest () is used to check the type of the request object for the client's browser. The function initreq () is called, and the parameters of the two are the same.

Code Request.onreadystatechange=handleresponse, which specifies the function to process the response. This function will be introduced later. Next, call the Request object's open () method to prepare for the object to send requests.

The code can set any request headers after calling open (). In our case, we are have to create a content-type header for a POST request.

Set headers

After the Open function call, the code sets the request haders. In this case, we will create a Content-type header for the POST request

Note: It is a good habit to set a good header.

Set the headers and send the requested code as follows:

Request.setrequestheader ("Content-type",

"Application/x-www-form-urlencoded; Charset=utf-8 ";

Request.send (querystring);

If you use the value of QueryString as an argument, the Send method is shaped like: Send ("Firstname=bruce&lastname=perry&gender=m&country=usa");

Processing results

After sending the request data, the next thing to do is to display the results for the user. This is what the function Handleresponse () does (don't forget this sentence in the function initreq (): Request.onreadystatechange=handleresponse;). When the request object's ReadyState property is 4 o'clock, the operation is complete, and then check that the HTTP response state is 200. The value indicates that the HTTP request was successful. The pop-up window is then used to display the response result responsetext. This is obviously a bit abrupt, but I think it's simpler, and it's better for beginners than for examples of complex functions.

Event handler for XMLHttpRequest

function Handleresponse () {

if (request.readystate = = 4) {

if (Request.status = = 200) {

alert (Request.responsetext); Eject the requested response data

} else {

Alert ("A problem occurred with communicating between" +

"The XMLHttpRequest object and the server program."

}

}//end outer IF

}

Readers need to focus on understanding the AJAX send request, processing the response mechanism.

<