Ajax-first Knowledge

Looking at the process of DRP, I learned Ajax again, and realized the charm of Ajax more deeply. Ajax is a technology or method.

Art. It presents our programs to users in a more perfect fashion. Let's join in the Ajax world.

Introduction
Full name:

Asynchronousjavascript and XML.

Working principle:

The working principle of AJAX is equivalent to adding an intermediate layer (Ajax engine) between the user and the server, so that user operations and server responses are asynchronous. No

All user requests are submitted to the server. For example, some data verification and data processing are handed over to the Ajax engine for self-processing. Only the user must read the data from the server.

When new data is retrieved, the Ajax engine submits a request to the server.

Use the XMLHTTPRequest object to send an asynchronous request to the server, obtain data from the server, and then use JavaScript to update the Dom.

Page.

Core technologies:

Asynchronous

Main members:

Javascript, XMLHttpRequest, Dom

Application:

Sina Weibo, Google maps, etc.

Synchronous and asynchronous

When Ajax is mentioned, synchronization and Asynchronization are inevitable.

Synchronization: it can be understood as a single thread or a "dead eye ". That is, after a function or method is executed, it waits for the system to return.

Value or message. At this time, the program is out of blocking. Other commands are executed only after the returned value or message is received.

Asynchronous: it can be understood as multithreading (asynchronous must be multithreading ). After the function or method is executed, you do not need to wait for the return value or message in a obstructive manner.

To delegate an asynchronous process to the system, when the system receives the return value or message, the system will automatically trigger the asynchronous process of the delegation to complete

The whole process.

Still don't understand? Synchronization means that you ask me to go to dinner. When I hear it, I will go to dinner with you. If I don't hear it, you will keep calling until I tell you to hear it.

Now, we can have dinner together. Asynchronous mode means that you call me and then eat on your own. After receiving the message, I may leave immediately or wait until I get off work. Institute

So, if you want to invite you to dinner, you can use the synchronous method. If you want to invite me to dinner, you can use the asynchronous method, so that you can save money.

Our Ajax only needs to apply Asynchronization to show its charm and improve the user experience. Speaking of this, we have to mention the core object of Ajax.

XMLHttpRequest. It is its existence that makes Ajax show its powerful functions to the world.

 

XMLHttpRequest

Here we will not detail the attributes and methods of XMLHttpRequest. Let's take a rough look at the working process of XMLHttpRequest:

1. To obtain a reference to the XMLHTTPRequest object instance, you can create a new instance or access a variable containing the XMLHttpRequest instance.
2. Tells the XMLHTTPRequest object which function will handle changes to the state of the XMLHTTPRequest object. To this end, set the onreadystatechange attribute of the object to a pointer to the JavaScript function.
3. Specify the request attributes. The open () method of the XMLHTTPRequest object specifies the request to be sent. The open () method has three parameters: a string indicating the method used (usually get or post), a string indicating the URL of the target resource, and a Boolean value, indicates whether the request is asynchronous.
4. Send the request to the server. The send () method of the XMLHTTPRequest object sends the request to the specified target resource. The send () method accepts a parameter, usually a string or a DOM object. This parameter is sent to the target URL as part of the Request body. When providing parameters to the send () method, make sure that the method specified in open () is post. If no data is sent as part of the Request body, null is used.

These steps are intuitive: you need an instance of the XMLHTTPRequest object to tell it how to do it if its status changes, and to which

And how to send the request, and finally guide XMLHttpRequest to send the request. Simply create an instance and tell it

What does he need to do and who will serve him.

Advantages and disadvantages

Any piece of work is not perfect, and Ajax is also the same. Since the emergence of Ajax, the discussion on it has never been stopped. Advantages:

1. Partial page refresh to reduce user psychology and actual waiting time, and bring a better user experience
2. Reduces the burden on the server, obtains data on demand, and minimizes redundant requests.
3. XML-based standardization, widely supported, and plug-ins not required
4. Further promote the separation of pages and Data

 

However, its shortcomings are also obvious. Some people have summed up the "seven sins" of Ajax. Here we will not elaborate on it. I will roughly summarize its shortcomings:

1. Ajax kills the back button, which destroys the browser's back-up mechanism.
2. Weak support for search engines.
3. Damage Exception Handling Mechanism

Summary:

This is an article that helps you understand Ajax. Without much detailed technical explanation, Ajax is a very practical technology that can be improved.

Customer experience, but it is not perfect. It is not suitable for many scenarios, for example, when a large number of texts need to be replaced.