Analysis on the principle and advantages and disadvantages of Ajax _ajax related

1, the background of Ajax technology

It is undeniable that the popularity of Ajax technology has benefited from Google's vigorous promotion, it is because of Google Earth, Google suggest and Gmail and other applications of Ajax technology, the emergence of the Ajax popularity. This also makes Microsoft feel extremely embarrassed, because as early as 97, Microsoft has invented the key technology in Ajax, and in 99 IE5 launch, it began to support the XMLHttpRequest object, and Microsoft has already begun to use in some of its products Ajax, For example, some apps in the MSDN Web menu. Unfortunately, I do not know what the idea, when Microsoft invented the core Ajax technology, and did not see its potential to develop and promote, but put it on hold. For this, I personally feel very strange, because Microsoft's resources and its strategic vision should not see the future of Ajax technology, the only explanation may be that the disappearance of its main rival, Netscape, has paralyzed and dulled it, after all, when the Giants have dozed off. , such as IBM's failure in its strategy for Microsoft. It is this time of failure that has made its current competitor, Google's leading position in Ajax, and in fact Google's current lead in Ajax technology is beyond Microsoft's reach, which I will mention when I talk about Ajax flaws. Now that Microsoft is aware of the problem, it is also starting to catch up in the Ajax arena, for example, to launch its own AJAX framework, Atlas, and to. NET2.0 also provides an interface for implementing asynchronous callbacks, the Icallback interface. So why is Microsoft so nervous about its backwardness in Ajax? Now let's analyze the profound implications behind Ajax technology.

2, the significance of Ajax technology

We are in peacetime development are more or less contact or applied to Ajax, talking about the significance of Ajax technology, we focus on the most is undoubtedly to enhance the user experience. However, if we combine future trends in computers and the Internet, we will find that Ajax technologies represent this trend in some ways. Why do you say that? We know that since the advent of computers, desktop software has been the absolute dominant position, but the advent of the Internet and the success of this has begun to make a subtle change. Quite a few people believe that sooner or later, data and computer software will be transferred from the desktop to the Internet. In other words, future computers may discard bulky hard drives, and directly from the Internet to obtain data and services, I remember when I was in college, a professor gave us a lesson, once conceived such a scenario, perhaps in the future of the computer desktop, there is no redundant software and procedures, but only one ie, Although it seems that we are far away from this day, and there are many problems to be solved, but I think this is not a dream, but sooner or later will realize the reality. Then, this is the main problem is the Internet connection is not stable, who also do not want to look at their own computer from the server to download a little bit of data, then, Ajax is not the solution to this problem, to tell the truth, rather than Ajax solve the problem, rather than it just cover up the problem, It simply acts as a buffer between the server and the client, allowing the user to mistakenly assume that the service is not interrupted. To be precise, Ajax does not improve the speed of downloading data from the server side, but simply 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. This point I use an example to illustrate, we can compare Outlook Express and Gmail, the former is a typical desktop software, the latter is the AJAX implementation of B/s mode, in fact, the latter is now slowly replacing the former, Gmail has almost no difference with Outlook Express when sending and receiving emails, and it doesn't need to install a client program. That's why Microsoft is so frightened by the impact of Ajax, and in its recent survey, it sees Google as one of the main reasons for its major rivals over the next 10 years. Of course, this change does not completely eliminate desktop software, the existing browser does not have a desktop program like Photoshop to deal with complex images. But we cannot ignore the impact and impact of it.

3, about the name of Ajax

The full name of Ajax is asynchronous JavaScript and XML, where asynchronous is meant to be asynchronous, unlike the synchronized approach used in traditional web development.

About synchronous and asynchronous

Asynchronous transmission is a character-oriented transmission, its unit is a character, while synchronous transmission is a bit-oriented transmission, its unit is a frame, it is transmitted when the receiver and the sender of the clock is consistent.

In particular, asynchronous transmission is the transfer of bits into groups. Generally each group is a 8-bit character, there is a start bit and a stop bit in each group's head and tail, and the receiver and the sender's clock are not required to be consistent 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 computer keyboard and host communication, press a key while sending a 8-bit ASCII code to the host, the keyboard can send code at any time, depending on the user's input speed, the internal hardware must be able to receive a typed character at any time. This is a typical asynchronous transfer process. A potential problem with asynchronous transmissions 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 came up from behind unexpectedly and talked to you, and you didn't get a chance to react, missing the first few words. Therefore, each asynchronous transmission of information begins with a starting bit, which notifies the receiver that the data has arrived, giving the receiver the time to respond, receive, and cache the data bits; At the end of the transmission, a stop bit indicates the termination of the transmission information. By convention, a line that is free (without transmitting data) actually carries a signal representing binary 1. The starting bit of the step transfer makes the signal 0, and the other bits change the signal with the transmitted data information. Finally, the stop bit causes the signal to change back to 1, and the signal remains until the next start bit arrives. For example, on the keyboard number "1", according to the 8-bit extended ASCII encoding, will send "00110001", at the same time need to precede 8 bits with a start bit, followed by a stop bit.

The bit groupings for synchronous transmissions are much larger. Instead of sending each character independently, each character has its own start and stop bits, but it is combined to send them together. We refer to these combinations as data frames, or simply frames.

The first part of the data frame contains a set of synchronization characters, it is a unique bit combination, similar to the starting bit mentioned earlier, used to notify the receiver that a frame has arrived, but it also ensures that the receiver's sampling speed is consistent with the arrival speed of the bit, allowing both the sender and receiver to go into sync.

The last part of the frame is a frame end tag. Like a synchronous character, it is also a unique bit string, similar to the stop bit mentioned earlier, to indicate that there is no data to be reached before the next frame starts.

Synchronous transmissions are usually much faster than asynchronous transmissions. The receiver does not have to start and stop operations on each character. Once the frame sync character is detected, it receives them when the next data arrives. In addition, the cost of synchronous transmission is relatively low. For example, a typical frame might have 500 bytes (or 4000 bits) of data, which might contain only 100 bits of overhead. At this point, the increased bits increase the total number of bits transmitted by 2.5%, which is much smaller than the 25 increment in the asynchronous transmission. As the actual data bits in the data frame increase, the percentage of the cost bits will decrease correspondingly. However, the longer the data bit bit, the larger the buffer needed to cache the data, which limits the size of a frame. In addition, the larger the frame, the longer it occupies the continuous media. In extreme cases, this will cause other users to wait too long.

An hour, in this 10 hours of water is not completely broken, but the flow is much smaller than the original, in 10 hours after normal flow, then, if you are you will choose which way? Obviously the latter.

4, Ajax included in the technology

We all know that Ajax is not a new technology, but a combination of several original technologies. It is a combination of the following technologies.

1. Use CSS and XHTML for presentation.

2. Use the DOM model for interactive and dynamic display.

3. Use XMLHttpRequest to communicate with the server asynchronously.

4. Use JavaScript to bind and invoke.

In the above technologies, all other technologies, except XMLHttpRequest objects, are based on web standards and have been widely used, and xmlhttprequest, though not yet accepted by the consortium, is a fact standard, Because almost all of the mainstream browsers now support it.

5. Ajax Principles and XMLHttpRequest objects

The principle of Ajax is simply to send an asynchronous request to the server via the XMLHttpRequest object, get the data from the server, and then use JavaScript to manipulate the DOM and update the page. One of the most critical steps is getting the request data from the server. To understand this process and principle, we must have an understanding of XMLHttpRequest.

XMLHttpRequest is the core mechanism of Ajax, which is introduced first in IE5 and is a technology that supports asynchronous requests. Simply put, JavaScript is the time to request and process responses to the server without blocking the user. No refreshing effect is achieved.

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

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

Its properties are:

onReadyStateChange the event handler for the event that triggers each state change.

ResponseText A string form that returns data from a server process.

Responsexml a DOM-compliant document data object returned from a server process.

Status number code returned from the server, such as common 404 (not Found) and 200 (ready)

Status text string information accompanying the status code

ReadyState Object State Value

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

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

2 (send data) The Send method has been invoked, but the current state and HTTP headers are unknown

3 (data transfer) has received part of the data, because the response and HTTP headers are incomplete, then get some data through Responsebody and ResponseText error,

4 (complete) data received, at this time through Responsexml and responsetext to obtain complete response data

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. The following is a relatively standard method for creating XMLHttpRequest objects.

function Createxmlhttp ()
{
//non-IE browser creates XMLHttpRequest object
if window. XMLHttpRequest)
{
xmlhttp=new xmlhttprequest ();
}
IE browser creates the XMLHttpRequest object
if (window). ActiveXObject)
{
try
{
xmlhttp=new activexobject ("Microsoft.XMLHTTP");
}
catch (E)
{
try{
xmlhttp=new activexobject ("MSXML2. XMLHTTP ");
}
catch (ex) {}}}}
function Testajax ()
{
var data=document.getelementbyidx (" 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.getelementbyidx ("user1"). Innerhtml= "Data is loading ...";
if (xmlhttp.status==200)
{
document.write (xmlhttp.responsetext);
}
}} Xmlhttp.send ();
}

As shown above, the function first checks the overall state of the xmlhttprequest and guarantees that it is complete (readystatus=4), that is, the data has been sent. Then ask for the status of the request based on the server's settings, and if everything is ready (status=200), do what you need to do 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 to synchronous, true to asynchronous. The default is true. In the case of asynchronous communication (true), the client does not wait for a response from the server; if it is synchronous (false), the client waits until the server returns the message before performing another operation. We need to specify the synchronization according to the actual needs, in some pages, may issue multiple requests, even organized and planned to have a large scale of the high intensity request, the latter will cover the previous one, this time of course to specify the synchronization mode.

The Send method is used for sending requests.

Knowing the XMLHttpRequest workflow, we can see that XMLHttpRequest is completely used to send 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, Make a request and respond to a request. And it's completely a client-side technology. And XMLHttpRequest is to handle the server-side and client communication issues so it is so important.

Now, we can probably get an idea of the fundamentals of Ajax. We can think of the server side as a data interface, it returns a plain text stream, of course, this text stream can be an XML format, can be HTML, can be JavaScript code, can be just a string. At this time, XMLHttpRequest to the server to request this page, the server side will write the results of the text to the page, which is the same as the normal web development process, the difference is that the client after the result is asynchronous, not directly displayed in the page, but first by JavaScript to deal with, And then display it on the page. As for the many Ajax controls that are popular today, such as Magicajax, you can return other data types such as datasets, just encapsulate the results of the process, and they don't make much difference in nature.

6, the advantages of Ajax

The advantages that Ajax brings to us are basically deeply appreciated, and here I just briefly say a few things:

1, the biggest point is the page does not refresh, in the page with the server communication, to the user experience is very good.

2, the use of asynchronous way to communicate with the server, do not need to interrupt the user's operation, with more rapid response capabilities.

3, can put some of the previous server burden to the client, the use of idle client capacity to deal with, reduce the burden of server and bandwidth, save space and broadband rental costs. and reduce the burden on the server, the principle of Ajax is "on-demand data", can minimize redundant requests, and respond to the burden on the server.

4, based on standardized and widely supported technology, do not need to download plug-ins or small programs.

7, the disadvantages of Ajax

Here's what I'll focus on about Ajax flaws, because most of our attention is about the benefits that Ajax brings to us, such as the improvement of the user experience. And the drawbacks of Ajax are overlooked.

The Ajax flaws described below are inherent in this.

1, Ajax killed the back button, that is, the browser backward mechanism of the damage. The Back button is an important feature of a standard web site, but it does not work well with JS. This is a more serious problem with Ajax, because users often want to be able to undo the previous operation by backing back. So is there a way to do that? The answer is yes, Gmail to know that the following Ajax technology to solve this problem, under Gmail can be backward, but it does not change the AJAX mechanism, it is only a more stupid but effective way, that is, when the user clicks the Back button to access the history To reproduce changes on the page by creating or using a hidden iframe. (for example, when a user clicks back in Google Maps, it searches in a hidden iframe and then reflects the search results onto AJAX elements to restore the application state to its current state.) ）

But while this problem can be solved, the cost of development is very high, contrary to the rapid development required by the AJAX framework. This is a very serious problem brought by Ajax.

2, security issues

Technology also poses a new security threat to IT companies, and Ajax technology is like establishing a direct channel for enterprise data. This allows developers to inadvertently expose more data and server logic than before. Ajax logic can hide the security scanning technology of the client, allowing the hacker to create new attacks from the remote server. Ajax also makes it difficult to avoid some known security vulnerabilities, such as cross-site attacks, SQL injection attacks, and credentials vulnerabilities.

3, the search engine support is weaker.

4, the failure of the program's abnormal mechanism. At least for now, these Ajax frameworks, like Ajax.dll,ajaxpro.dll, can disrupt the program's exception mechanism. On this issue, I have encountered in the development process, but looked up the Internet almost no relevant introduction. Then I did a test myself, using Ajax and the traditional form submission model to delete a piece of data ... To our debugging has brought a lot of difficulties.

5, in addition, some other problems, such as the violation of the URL and resource positioning of the original intention. For example, I give you a URL address, if you use Ajax technology, perhaps you see below the URL address and I see under this URL address is different. This is a departure from the original purpose of resource orientation.

6, some handheld devices (such as mobile phones, PDAs, etc.) are not good enough to support Ajax, such as our mobile browser to open the use of AJAX technology site, it is currently not supported, of course, this problem and we do not have much relationship.

8. Several Ajax frameworks

The more Ajax frameworks we use today are mainly Ajax.dll,ajaxpro.dll,magicajax.dll and Microsoft's Atlas framework. Ajax.dll and Ajaxpro.dll These two frameworks are not very different, and Magicajax.dll is only encapsulated more powerful, for example, it can directly return dataset dataset, as we have said before, Ajax return is a string, magicajax just encapsulation it. But it's this feature can bring us a lot of convenience, for example, our page has a list, and the list of data is constantly changing, then we can use Magicajax to handle, the operation is very simple, add magicajax after, The list control to be updated is placed within the Magicajax control, and then the time to define the update interval in pageload is OK, and Atlas is the same principle as magicajax. However, one problem to note is that these frameworks only support IE, do not handle browser compatibility, and use the Decompile tool to see their code.

In addition to these kinds of frameworks, we usually use a lot of ways to create the XMLHttpRequest object ourselves, this way is more flexible than the previous several frameworks. In addition, here also mention aspnet2.0 of the asynchronous callback interface, it and Ajax can also achieve local no refresh, but its implementation is actually based on the XMLHttpRequest object, but also only support IE, of course, this is a Microsoft competition strategy.

9.ajax Application Examples

The above content is reproduced high man wrote the material, below I will I in the project actual application gives an example, this example is this: I am involved in a project on the Duty scheduling module, select the person on duty, pop-up is a contact tree treeview structure, click on which department, and then the Department of the contact started, So, after choosing some contacts, the day or night on duty person is such a format "small A, small B", but now requires such a format "small a" (department one), small B (Department II), which assumes that small a belongs to the department one, the small B belongs to the department two. Since selecting a contact person is a pure foreground JavaScript operation, this is done by using the Department ID in the contact userlist table to get the name of the department, which is the background data from the foreground, which I also explained in series five, which is given in the following code:

var param= "date=<%=stryear%>/<%=strmonth%>/" + x <%=stryear%><%=strmonth%> + "&type=" + Type + "&other=" + eval_r ("Formdata.rbother" +x+ ". Value") + "&zbry=" + eval_r ("Formdata.rbzbry" +x+ ". Value") + " &zbryid= "+ eval_r (" Formdata.rbzbryid "+x+". Value ") +" &demo= "+ eval_r (" Formdata.rbdemo "+x+". Value ") +" & Id= "+ eval_r (" Formdata.rbzbid "+x+". Value ");//passed parameter var retVal = window.showModalDialog (" Chooseusers.asp? " +param,this, "dialogwidth=280px; dialogheight=500px; Help=no; Status=no; Scroll=no; Resizable=yes;
");
Pop-up dialog box get contact//ajax Call server-side method fetch to Department name if (retVal [' UserIDs ']!= ' "&& retVal [' UserIDs ']!=null)]//Contact ID collection format 1,2,3,4 { var posturl= ". /.. /.. /application/callboard/getdepartmentbyuid.aspx?userids= "+objretval[' UserIDs ']+";//Background processing page URL xmlHttp = new
ActiveXObject ("Microsoft.XMLHTTP");/create a new XMLHttpRequest object Xmlhttp.open ("POST", PostURL, false);
Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Xmlhttp.send (""); var buIlder= Xmlhttp.responsetext; The value is passed back, spelled into the new format eval_r ("Formdata.rbzbry" +x+ ". Value = '" +builder+ "");//Formdata.rbzbry is a text control, the new format for on-duty staff will be displayed}}

The above is a small set to introduce the principles of Ajax and advantages and disadvantages, I hope to help you!