Basic Ajax concepts

Basic Ajax concepts

Is a technology that comprehensively uses JavaScript and XML to build Web pages.

The essence is the asynchronous transmission technology of HTML web pages:

Form: users can still interact with the system while waiting for webpage transmission.

Benefit: you can update content without refreshing the page.

 

Typical process:

1. asynchronous operations on the client

2. Create a New XMLHTTPRequest object.

3. Connect to the server

4. Connect to the server

5. Return the XML document containing the processing result

6. receive and analyze the processing results of the XMLHTTPRequest object

7. Update page

 

XMLHTTPRequest object:

It is a browser-built object that initiates a request to the server through javascript. If multiple requests are to be initiated, multiple xhr objects are required.

When this request is initiated, the page is not refreshed and runs in the background.

The request result is processed by a pre-defined method (javacript.

 

ExampleProgram:

Check the User Name:

 

1. Client triggering

<Tr>

<TD
Class="Altbg1"Width="21%">User Name:</TD>

< TD
Class = "Altbg2" > < Input ID = "Userid" Name = "Username" Size = "25" Maxlength = "25" Type = "Text" Onblur = "Validate () " >

<SpanID="Usermsg"> </Span>

</Tr>

 

Note that the onblur event occurs when the object loses focus.

Onblur = "Validate ()" is an event that occurs when the object loses focus.

 

 

VaRREQ ;//Define global variables

FunctionValidate ()
{

VaR
Idfield = Document. getelementbyid ("Userid");//Obtain the page elements to be passed

VaRUrl =
"Validate. jsp? Id ="+ Escape (idfield. Value );//PassValidatePage to request,IDIs the passed value.EscapeIt is a special function that can convert the passed valueURL. For example, space can be converted% 20

Different browsers use different methods to create and initializeXhrequestObject.

If(Window. XMLHttpRequest){
// NetscopeBrowser

Req =New
XMLHttpRequest ();

} Else if(Window. activexobject)
{//

Req =New
Activexobject ("Microsoft. XMLHTTP"); // IEBrowser

}

// open this object, in this example, Get is used to open the file, URL: URL , true indicates that the asynchronous mode is used. The first parameter can be Get , post , put , Delete , the second parameter, is the address to be sent. The third is to check whether the mode is asynchronous. true asynchronous mode, false synchronization mode.

Req. Open ("Get", URL,True);

// ReadystateYesXhr.

0IsUninitializedNot initialized,

1IsLoadingThe request has not been sent to the client, but is a connection established,

2IsLoadedThe request has been sent to the client andHTTPHeader information.

3IsInteractiveThe content submitted by the server is being obtained,

4IsCompleted. The server has finished processing.OnreadystatechangeThat is, when the status changesCallbackMethod.

 

// Callback is the called method. Note that callback should not contain parentheses.

Req. onreadystatechange = callback;

//PassSendSubmit the request to the server

Req. Send (Null);

}

 

 

Below we will write the callback method:

FunctionCallback ()
{

If(Req. readystate = 4){//Real completion

If(Req. Status = 200){// SeverCorrect feedback

// Alert (req. responsetext );//Pop-up window.

//The feedback isXML, As shown belowCodeAnalysisXML. SetXMLThe document is passed as an object.TagnameTo obtain the corresponding elements.

VaRMSG = Req. responsexml. getelementsbytagname ("MSG") [0];

// Alert (MSG); // msgItself isObject.

// Call another function, setmsg ()

Setmsg (msg. childnodes [0]. nodevalue );

}

}

}

 

Next let's write setmsg ();

FunctionSetmsg (MSG)
{

// Alert (MSG );

Mdiv = Document. getelementbyid ("Usermsg");

If(MSG ="Invalid")
{

Mdiv. innerhtml ="<Font color = 'red'> usernameexists </font>";

} Else {

Mdiv. innerhtml ="<Font color = 'green'> congratulations! You canuse This username! </Font>";

}

}

Server processing method:

The server does not change the way requests are processed. It does not matter what is output. You can directly output statements.

<%

Response. setcontenttype ("Text/XML");

Response. setheader ("Cache-control","No-store");
// Http1.1Prevent the browser from Buffering

Response. setheader ("Pragma","No-Cache");
// Http1.0Prevent the browser from Buffering

Response. setdateheader ("Expires", 0 );// Prevents catching at Proxy Server
Prevent the browser from Buffering

System. Out. println (request. getparameter ("ID"));

// Check the database

Response. getwriter (). Write ("<MSG> valid </MSG>");

%>