Basic Ajax concepts

Source: Internet
Author: User

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.



Check the User Name:


1. Client triggering


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>



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

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



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.