Shulou(Shulou.com)06/03 Report--

This article mainly explains "what is the working principle of Ajax". Interested friends may wish to take a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how Ajax works".

1. Background of ajax technology

It is undeniable that the popularity of ajax technology benefits from the promotion of google. It is the wide application of ajax technology by google earth, google suggest and gmail that gives birth to the popularity of ajax. This also makes Microsoft feel extremely embarrassed, because Microsoft already invented the key technologies in ajax as early as 1997, and it began to support XmlHttpRequest objects when IE5 was launched in 1999, and Microsoft has already started to use ajax in some of its products, such as some applications in the MSDN website menu. Unfortunately, out of no idea, after Microsoft invented the core technology of ajax at that time, it did not see its potential to develop and promote it, but shelved it. Personally, I find it very strange, because Microsoft's resources and its strategic vision should not fail to see the prospect of ajax technology. the only explanation may be that its main competitor, Netscape, was paralyzed and dull by the disappearance of its main competitor at that time. After all, giants also take a nap, such as IBM's strategic mistakes with Microsoft. It was this mistake that made its current competitor google's lead in ajax, and in fact google's current lead in ajax technology is beyond Microsoft's reach, which I will mention later when I talk about ajax defects. Now Microsoft is aware of this problem, so it is also starting to catch up in the ajax field, such as launching its own ajax framework, atlas, and providing an interface for asynchronous callbacks in .NET 2.0, the ICallBack interface. So why is Microsoft so nervous about its backwardness in ajax? Now let's analyze the profound meaning behind ajax technology.

2. The significance of ajax technology

We are in more or less contact with or applied to ajax in our usual development. When it comes to the significance of ajax technology, there is no doubt that we focus most on improving the user experience. However, if we combine the development trend of computer and Internet in the future, we will find that ajax technology represents this trend in some ways. Why do you say that? We know that desktop software has been absolutely dominant since the advent of computers, but with the advent and success of the Internet, subtle changes have begun to take place. A considerable number of people believe that sooner or later, data and computer software will be transferred from the desktop to the Internet. In other words, computers in the future may abandon their bulky hard drives and get data and services directly from the Internet. I remember when I was in college, a professor taught us a scenario that maybe there would be no extra software and programs on the computer desktop in the future, but only an IE, although it seems that we are still a long way from this day. And there are still many problems to be solved, but I think this is not a dream, but a reality that will come true sooner or later. Well, the main problem is that the connection to the Internet is unstable, and no one wants to watch their computers download data bit by bit from the server, so does ajax solve this problem? to be honest, rather than saying that ajax solves this problem, it just covers up the problem, it just acts as a buffer between the server and the client, making users think that the service is uninterrupted. To be precise, ajax doesn't increase the speed of downloading data from the server, it just makes the wait less frustrating. But this is enough to have a huge impact and shock, and it actually has a huge impact on desktop software. I will use an example to illustrate this point, we can compare Outlook Express and Gmail, the former is a typical desktop software, the latter is the ajax achieved by the BMagpare S mode, in fact, the latter has gradually replaced the former, Gmail in sending and receiving e-mail has almost no difference with the Outlook Express function, and it does not need to install client programs. This is one of the main reasons why Microsoft is so afraid of the impact of ajax and, in its recent survey, sees google as its main competitor over the next decade. Of course, this change will not eliminate all desktop software, and there is no existing browser that can handle complex images like desktop programs such as PhotoShop. But we can not ignore its impact and impact.

3. About the name of ajax

The full name of ajax is Asynchronous JavaScript and XML, in which Asynchronous means asynchronous, which is different from the synchronous approach used in traditional web development.

4. About synchronization and async

Asynchronous transmission is character-oriented transmission, its units are characters, while synchronous transmission is bit-oriented transmission, its unit is frame, when it transmits, it requires that the clocks of the receiver and the sender are consistent.

Specifically, asynchronous transmission is the division of bits into small groups for transmission. In general, each team is an 8-bit character, with a start bit and a stop bit at the head and tail of each team, which requires that the clocks of the receiver and the sender are not the same during transmission, that is, the sender can send these groups at any time, and the receiver does not know when it will arrive. One of the most obvious examples is the communication between the computer keyboard and the host, which sends an 8-bit ASCII code to the host while pressing a key. The keyboard can send the code at any time, depending on the user's input speed, and the internal hardware must be able to receive a typed character at any time. This is a typical asynchronous transmission process. A potential problem with asynchronous transmission is that the receiver does not know when the data will arrive. The first bit has passed before it detects the data and responds. It's like someone unexpectedly comes up from behind to talk to you, and you don't have time to react and leave out the first few words. Therefore, each asynchronous transmission of information begins with a start bit, which notifies the receiver that the data has arrived, which gives the receiver time to respond, receive, and cache data bits; at the end of the transmission, a stop bit indicates the termination of the transmission. By convention, idle (no data transmission) lines actually carry a signal that represents binary 1. The start bit of the step transmission causes the signal to become 0, and the other bits make the signal vary with the transmitted data information. Finally, the stop bit changes the signal back to 1, which is held until the next start bit arrives. For example, the number "1" on the keyboard, according to the 8-bit extended ASCII code, will send "00110001" with a start bit before the 8-bit bit and a stop bit after it.

The bit packets transmitted synchronously are much larger. Instead of sending each character independently, each character has its own start and stop bits, but sends them together. We call these combinations data frames, or frames for short.

The first part of the data frame contains a set of synchronization characters, which is a unique combination of bits, similar to the starting bit mentioned earlier, to inform the receiver that a frame has arrived. but it also ensures that the sampling speed of the receiver is consistent with the bit arrival speed, so that both the sender and the receiver are synchronized.

The last part of the frame is a frame end marker. Like synchronous characters, it is a unique bit string, similar to the stop bit mentioned earlier, to indicate that there is no other data to arrive before the next frame begins.

Synchronous transmission is usually much faster than asynchronous transmission. The receiver does not have to start and stop each character. Once frame synchronization characters are detected, it receives them when the next data arrives. In addition, the cost of synchronous transmission is less. For example, a typical frame may have 500 bytes (that is, 4000 bits) of data, which may contain only 4000 bits of overhead. At this point, the additional bits increase the total number of bits transmitted by 2.5%, which is much smaller than the 25% increment in asynchronous transmission. With the increase of the actual data bits in the data frame, the percentage of overhead bits will decrease accordingly. However, the longer the data bits, the larger the buffer required to cache the data, which limits the size of a frame. In addition, the larger the frame, the longer it takes to occupy the transmission media. In extreme cases, this will cause other users to wait too long.

After understanding the concepts of synchronization and asynchronism, it should be clear why ajax can improve the user experience, which uses asynchronous requests. For example, if the community where you live is facing a water outage due to certain circumstances, the relevant departments have now announced two plans: one is to completely shut down the water for eight hours, then completely stop the water within eight hours and return to normal after eight hours. Second, the water is not completely cut off for 10 hours, the water is not completely cut off within these 10 hours, but the flow is much smaller than the original, and the normal flow returns to normal after 10 hours, so, which way would you choose if it were you? Obviously the latter.

5. The technologies included in ajax

Everyone knows that ajax is not a new technology, but a combination of several existing technologies. It is a combination of the following technologies.

1. It is represented by CSS and XHTML.

two。 Use the DOM model for interactive and dynamic display.

3. Use XMLHttpRequest to communicate asynchronously with the server.

4. Use javascript to bind and invoke.

In the above several technologies, except XmlHttpRequest object, all other technologies are based on the web standard and have been widely used. Although XMLHttpRequest has not been adopted by the W3C, it is already a de facto standard, because almost all mainstream browsers support it.

6. Ajax principle and XmlHttpRequest object

The principle of Ajax is simply to send asynchronous requests to the server through the XmlHttpRequest object, get data from the server, and then use javascript to manipulate the DOM to update the page. The most critical step is to get the request data from the server. To understand this process and principle, we must have some understanding of XMLHttpRequest.

XMLHttpRequest is the core mechanism of ajax. It was first introduced in IE5. It is a technology that supports asynchronous requests. To put it simply, javascript can make requests and process responses to the server in a timely manner without blocking the user. Achieve the effect of no refresh.

So let's start with XMLHttpRequest and see how it works.

First, let's take a look at the properties of the XMLHttpRequest object.

Its properties are:

Onreadystatechange event handler for the event triggered by each state change.

ResponseText returns data from the server process in a string form.

The DOM-compatible document data object returned by responseXML from the server process.

Status returns numeric codes from the server, such as the common 404 (not found) and 200 (ready)

String information of status Text accompanying status code

ReadyState object status value

0 (uninitialized) object has been established, but has not been initialized (open method has not been called)

1 (initialization) object has been established and the send method has not been called

2 (send data) the send method has been called, but the current state and http header are unknown

3 (data transfer) has received part of the data, because the response and http headers are incomplete, there will be an error in obtaining part of the data through responseBody and responseText

4 (complete) the data has been received, and the complete response data can be obtained through responseXml and responseText

However, because of the differences between browsers, creating a XMLHttpRequest object may require different methods. This difference is mainly reflected in IE and other browsers. Here is a more standard way to create a XMLHttpRequest object.

The copy code is as follows:

Function CreateXmlHttp ()

{

/ / non-IE browsers create XmlHttpRequest objects

If (window.XmlHttpRequest)

{

Xmlhttp=new XmlHttpRequest ()

}

/ / IE browser creates XmlHttpRequest object

If (window.ActiveXObject)

{

Try

{

Xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP")

}

Catch (e)

{

Try {

Xmlhttp=new ActiveXObject ("msxml2.XMLHTTP")

}

Catch (ex) {}

}

}

}

Function Ustbwuyi ()

{

Var data=document.getElementById ("username"). Value

CreateXmlHttp ()

If (! xmlhttp)

{

Alert ("create xmlhttp object exception!")

Return false

}

Xmlhttp.open ("POST", url,false)

Xmlhttp.onreadystatechange=function ()

{

If (xmlhttp.readyState==4)

{

Document.getElementById ("user1") [xss_clean] = "data is being loaded."

If (xmlhttp.status==200)

{

[xss_clean] (xmlhttp.responseText)

}

}

}

Xmlhttp.send ()

}

As shown above, the function first checks the overall state of the XMLHttpRequest and ensures that it is readyStatus=4, that is, the data has been sent. Then ask the request status according to the server's settings, and if everything is ready (status=200), do what you need below.

For the two methods of XmlHttpRequest, open and send, where the open method specifies:

A, the type of data submitted to the server, that is, post or get.

B, the url address of the request and the parameters passed.

C. Transmission mode. False is synchronous and true is asynchronous. The default is true. In the case of asynchronous communication (true), the client does not wait for a response from the server; in the case of synchronous communication (false), the client waits for the server to return a message before performing anything else. We need to specify the synchronization method according to the actual needs. In some pages, multiple requests may be issued, or even organized, planned and formed large-scale high-intensity request, and the latter will overwrite the previous one. Of course, the synchronization method should be specified at this time.

The Send method is used to send requests.

Knowing how XMLHttpRequest works, we can see that XMLHttpRequest is entirely used to make a request to the server, and its role is limited to this, but its role is the key to the entire ajax implementation, because ajax is nothing more than two processes, making a request and responding to a request. And it is completely a client-side technology. XMLHttpRequest deals with the communication between the server and the client, which is why it is so important.

Now, we may have an understanding of the principle of ajax. We can think of the server as a data interface that returns a plain text stream. Of course, the text stream can be in XML format, it can be Html, it can be Javascript code, or it can be just a string. At this time, XMLHttpRequest requests the page from the server, and the server writes the result of the text to the page, which is the same as the normal web development process, except that after the client obtains the result asynchronously, it is not directly displayed on the page, but is first processed by javascript, and then displayed on the page. As for many popular ajax controls, such as magicajax, etc., they can return other data types such as DataSet, but the results encapsulated by this process are not much different in essence.

7. Advantages of ajax

Basically, we all have a deep understanding of the benefits brought to us by Ajax. Here, I will just briefly talk about a few points:

1. The biggest point is that the page has no refresh and communicates with the server within the page, which gives the user a very good experience.

2. Communicate with the server asynchronously, without interrupting the user's operation, and have more rapid response ability.

3. We can transfer the work of some previous servers to the client, make use of the idle ability of the client to deal with it, reduce the burden of the server and bandwidth, and save space and broadband rental costs. And reduce the burden on the server, ajax's principle is to "fetch data on demand", which can minimize the burden of redundant requests and responses on the server.

4. Based on standardized and widely supported technology, there is no need to download plug-ins or Mini Program.

8. Shortcomings of ajax

Next, I would like to focus on the shortcomings of ajax, because most of us usually pay attention to the benefits that ajax brings to us, such as the enhancement of user experience. However, the defects brought by ajax are ignored.

The defects of ajax described below are all caused by it.

1. Ajax kills the back button, which destroys the browser's fallback mechanism. The back button is an important feature of a standard web site, but it doesn't work well with js. This is a serious problem caused by ajax, because users often want to be able to cancel the previous operation by going back. So is there any way to solve this problem? The answer is yes, as those who have used Gmail know that the ajax technology adopted under Gmail solves this problem and can be retreated under Gmail, but it does not change the mechanism of ajax, it just uses a relatively stupid but effective way, that is, when the user clicks the back button to access the history, create or use a hidden IFRAME to reproduce the changes on the page. (for example, when the user clicks back in Google Maps, it searches in a hidden IFRAME and then reflects the search results on the Ajax element to restore the application state to its current state. )

However, although this problem can be solved, the development cost is very high, which is contrary to the rapid development required by the ajax framework. This is a very serious problem brought about by ajax.

2. Security issues

Technology also brings new security threats to IT enterprises. Ajax technology is like establishing a direct channel for enterprise data. This allows developers to inadvertently expose more data and server logic than ever before. The logic of ajax can be hidden from the client's security scanning technology, allowing hackers to establish new attacks from remote servers. And ajax is also difficult to avoid some known security vulnerabilities, such as cross-site footprint attacks, SQL injection attacks and credentials-based security vulnerabilities.

3. The support for search engine is weak.

4. Destroy the exception mechanism of the program. At least for now, ajax frameworks like ajax.dll,ajaxpro.dll can break the exception mechanism of the program. I have encountered this problem in the process of development, but I checked that there are few relevant introductions on the Internet. Later, I did an experiment myself, using ajax and traditional form submission mode to delete a piece of data. It brings great difficulties to our debugging.

5. In addition, like some other issues, such as violating the original intention of url and resource positioning. For example, I give you an url address, and if you use ajax technology, what you see under that url address may be different from what I see under this url address. This deviates from the original intention of resource positioning.

6. Some handheld devices (such as mobile phones, PDA, etc.) do not support ajax very well. For example, when we open a website using ajax technology on a mobile browser, it does not support it at present. Of course, this problem has nothing to do with us.

9. Several frameworks of ajax

At present, most of the ajax frameworks we use are ajax.dll,ajaxpro.dll,magicajax.dll and Microsoft's atlas framework. There is not much difference between Ajax.dll and Ajaxpro.dll, while magicajax.dll is just more encapsulated. For example, it can directly return the DataSet dataset. As we said earlier, ajax returns strings, and magicajax just encapsulates it. But this feature of it can bring us great convenience, for example, our page has a list, and the data of the list is constantly changing, then we can use magicajax to deal with, the operation is very simple, after adding magicajax, the list control to be updated is put in the control of magicajax, and then the interval between updates is defined in pageload. The principle of atlas is similar to magicajax. However, one problem to note is that all of these frameworks only support IE and do not deal with browser compatibility, which can be seen by looking at their code with decompilers.

In addition to these frameworks, the most common way we use is to create our own xmlHttpRequest objects, which is more flexible than the previous frameworks. In addition, I also mention the asynchronous callback interface that comes with aspnet2.0. Like ajax, it can also achieve local no refresh, but its implementation is actually based on xmlhttprequest objects and only supports IE. Of course, this is a competitive strategy of Microsoft.

10. Ajax example

Verify that the user name is registered.

In two ways

1 ajax.dll

2 write your own xmlhttprequest object

Some common mistakes in 10.ajax

1 problems with configuration

When configuring the page in pageload

eleven

The part of the foreground is called in the method called in the background.

At this point, I believe you have a deeper understanding of "how Ajax works". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.