Ajax getting started tutorial (1): ajax getting started tutorial

Ajax getting started tutorial (1): ajax getting started tutorial

1. What is AJAX?

AJAX (Asynchronous JavaScript And XML) is translated into Chinese as "Asynchronous Javascript And XML ". That is, the Javascript language is used for Asynchronous interaction with the server, and the transmitted data is XML (of course, the transmitted data is not just XML ).

Another major feature of AJAX is that when the server responds, it can be refreshed locally instead of refreshing the entire browser page. This feature gives the user the feeling that the request and response process are completed without knowing it.

• Asynchronous interaction with the server;
• Partial refreshing of browser pages;
  

2. synchronous interaction and Asynchronous interaction

• Synchronous Interaction: after the client sends a request, the second request can be sent only after the server responds;
• Asynchronous interaction: After a client sends a request, it can send a second request without waiting for the server to respond.

3. common AJAX application scenarios

A drop-down list will appear immediately after we enter "pass" in Baidu! The List displays 10 keywords that contain the word "pass.

In fact, AJAX technology is used here! When the input in the file box changes, the browser will use AJAX technology to send a request to the server to query the first 10 keywords that contain the word "pass, the server then returns the query result to the browser, and the browser displays the 10 keywords in the drop-down list.

• During the whole process, the page is not refreshed, but the partial location in the page is refreshed!
• After a request is sent, the browser can perform other operations without waiting for the response from the server!
  

When the user name is entered and the cursor is moved to another form item, the browser sends a request to the server using AJAX technology, and the server queries whether the user named zhangSan exists, the server returns true, indicating that the user named zhangSan already exists. The browser displays "the user name has been registered! ".

• During the whole process, the page was not refreshed, but it was partially refreshed;
• After a request is sent, the browser can perform other operations without waiting for the server to respond;
  

4 AJAX advantages and disadvantages

Advantages:

• AJAX uses Javascript technology to send asynchronous requests to servers;
• AJAX does not need to refresh the entire page;
• Because the server response content is not the whole page, but the part of the page, AJAX performance is high;

Disadvantages:

• AJAX is not suitable for all scenarios, and usually requires synchronous interaction;
• Although AJAX improves the user experience, it increases the number of requests sent to the server, resulting in increased server pressure;
• Because AJAX is completed by using Javascript technology in the browser, you still need to handle browser compatibility issues;

The basic working principle and process of Ajax:

In a common Web application, enter the form field and click the Submit button. Then the entire form is sent to the server, and the server forwards it to the script that processes the form (usually PHP or Java, or CGI process or something similar ), after the script is executed, send it back to the new page. This page may contain html of a new form with some data filled, a confirmation page, or a page with certain options selected based on the input data in the original form. Of course, the user must wait when the script or program on the server processes and returns a new form. The screen becomes blank and will be re-drawn after the server returns data. This is the cause of poor interaction. users do not receive immediate feedback, so they feel different from desktop applications.

Ajax basically stores JavaScript and XMLHttpRequest objects between Web forms and servers. When a user fills out a form, the data is sent to some JavaScript code instead of directly sent to the server. On the contrary, JavaScript code captures form data and sends requests to the server. At the same time, forms on the user's screen do not flash, disappear, or delay. In other words, JavaScript code sends a request behind the scenes, and the user does not even know how to send the request. Even better, requests are sent asynchronously, that is, JavaScript code (and users) does not have to wait for the response from the server. Therefore, you can continue to input data, scroll the screen, and use applications.

The server then returns the data to the JavaScript code (still in the Web form), which decides how to process the data. It can quickly update the form data, making users feel that the application is completed immediately, the form is not submitted or refreshed, and users get new data. JavaScript code can even execute some calculation on the received data and send another request without user intervention! This is the power of XMLHttpRequest. It can interact with the server as needed, and the user may not even know what happened behind the scenes. The result is similar to the dynamic, rapid response, and highly interactive experience of desktop applications, but it has all the power of the Internet.

The above is a small Editor to introduce you to the Ajax getting started tutorial (1), I hope to help you, if you have any questions, please leave a message, the small editor will reply to you in a timely manner. Thank you very much for your support for the help House website!