Get started with Ajax

1. Enter Ajax

(1) standard-based representation technology using XHTML and CSS

(2) Use dom for Dynamic Display and Interaction

(3) use XML and XSLT for data exchange and processing

(4) use XMLHttpRequest for asynchronous data retrieval

(5) use JavaScript to integrate the above technologies

 

2. Ajax advantages

(1) Improve the form verification method. You no longer need to open a new page or submit data on the entire page.

(2) You can change the page content without refreshing the page to reduce user waiting time.

(3) obtain data as needed. Only the required data is obtained from the server at a time.

(4) read external data for data processing and integration.

(5) asynchronously interacts with the server. During the interaction, the user can continue the operation without waiting.

 

3. Ajax thinking

The simplest example requirement is as follows: Enter the user name you want to register in the text box on the page, and then click "verify". If the user name is "wangxingkui ",

If the user name already exists, enter it again. Otherwise, the user name does not exist. You can use this user name for registration.

Traditional Method: for user name verification requirements, we need an HTML page and a servlet program. The HTML page contains the text box and the submit button. They are located in a form,

This form submits the request to the servlet program. The servlet program checks whether the current user name is "wangxingkui" and provides the corresponding prompt. At the same time, the servlet also generates a link to return the HTML page.

From this example, we can see that a feature of the traditional web development thinking mode is that the request information is submitted through the form, and then transferred to a new page to process the request and display the information returned by the server.

You can try to run the code and you will find that you have experienced it as a user: Enter the user name in the browser-> click the button to submit the user name to servlet-> switch the browser to the servlet page

-> Wait for servlet processing-> servlet return response information-> View the response information on the servlet page in the browser. Of course, there are several processes that may be too short for you to pay attention, but these processes do exist.

Figure:

 

Ajax: for user name verification, we need an HTML page and a servlet program.

The HTML page contains the text box and validation button. After clicking the submit button, I need to use JavaScript to retrieve the data in the text box and then send the data to the servlet through XMLHttpRequest,

In addition, you also need to prepare JavaScript Functions for receiving responses. After receiving the servlet prompt information, I need to dynamically write the information on the page.

The servlet program checks whether the current user name is "wangxingkui" and provides the corresponding prompt.

Note that the problem analysis method has changed in Ajax mode:

Servlet does not need to return the link to the HTML page, because we do not need to jump to the page represented by Servlet, we only need to get the results generated by the servlet page

On the HTML page, I don't need to submit data in forms. My data is obtained through JavaScript, and then a servlet is sent through an object called XMLHttpRequest. Besides, I did not perform page Jump.

I need a JavaScript function that receives servlet response information. I did not go to the page represented by servelt to view the response information. Instead, I received the servlet response information and displayed it on my current page.

Figure:

 

Comparison:

 

4. Differences between Ajax and traditional Web Development