How Ajax works and the common AJAX framework

1, about synchronous and asynchronous

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

Ajax can improve the user experience by taking advantage of asynchronous requests . For example, if your home is now in the community because of some situation and water, now the relevant departments announced two programs, one is completely water off 8 hours, in this 8 hours completely water, 8 hours after the return to normal. Two is not completely water off 10 hours, in this 10 hours of water is not completely broken, but the flow is much smaller than the original, after 10 hours to return to normal flow, then, if it is you you will choose which way? Obviously the latter.

2. The technology that Ajax contains

1. Use CSS and XHTML to represent.

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.

3, Ajax principle and XMLHttpRequest object

Ajax principle: Through the XMLHttpRequest object to send an asynchronous request to the server to obtain data , 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.

< Span lang= "en-US" >  Xmlhttprequest Ajax asynchronously requests . Simply put, that is javascript can without blocking the user. Reached No effect of refreshing .

< Span lang= "en-US" >

< Span lang= "en-US" > onreadystatechange 

< Span lang= "en-US" >  Responsetext    

Responsexml a DOM- compatible document data object that is returned from the server process.

Status number codes returned from the server, such as Common 404(Not found) and (Ready)

readyState Object state Value

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

　　　1 (Initialize) object has been established, the Send method has not been called

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

　　　　3 (data transfer) received part of the data, because the response and HTTP header is not complete, then through the responsebody and responsetext to obtain some of the data will be error

　　　4 (complete) The data is received, at which time the complete response data can be obtained by Responsexml and ResponseText

function Createxmlhttp () {//non-IE browser creates XMLHttpRequest object    if(window. XMLHttpRequest) {XMLHTTP=NewXMLHttpRequest (); }    //IE Browser creates XMLHttpRequest object    if(window. ActiveXObject) {Try{XMLHTTP=NewActiveXObject ("Microsoft.XMLHTTP"); }        Catch(e) {Try{XMLHTTP=NewActiveXObject ("MSXML2. XMLHTTP"); }            Catch(ex) {}
}}}function Ustbwuyi () {
    vardata = document.getElementById ("username"). Value;    Createxmlhttp (); if(!XMLHTTP) {Alert ("Create XMLHTTP Object Exception! "); return false; } xmlhttp.open ("POST"Urlfalse); Xmlhttp.onreadystatechange=function () {if(Xmlhttp.readystate = =4) {document.getElementById ("User1"). InnerHTML ="Data Loading ..."; if(Xmlhttp.status = = $) {document.write (xmlhttp.responsetext); }}} xmlhttp.send ();}

As shown above, the function first checks the overall state of the XMLHttpRequest and ensures that it has been completed (readystatus=4), that is, the data has been sent. The request status is then queried based on the server's settings, and if everything is ready (status=200), perform the actions required below.

For XMLHttpRequest two methods,open and send, where the Open method specifies:

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

B, the requested URL address and the passed parameters.

C, transmission mode, false is synchronous, true is asynchronous. The default is true. In the case of asynchronous communication (true), the client does not wait for the server to respond, and if it is synchronous (false), the client waits until the server returns the message before performing other operations. We need to specify the synchronization according to the actual needs, in some pages, may make multiple requests, even the organization has a plan to form a large-scale high-intensity request, the next one will overwrite the previous one, this time of course to specify the synchronization mode.

The Send method is used to send the request.

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

Now, we probably have an understanding of the principles of Ajax. We can think of the server as a data interface, which returns a plain text stream, of course, the text stream can be in XML format, can be HTML, can be JavaScript code, can be just a string. At this time, XMLHttpRequest request this page to the server side , the server side writes the result of the text to the page, which is the same as the normal web development process, and the difference is that the client asynchronously obtains this result, is not directly displayed in the page, Instead, it is processed by JavaScript before it is displayed on the page . As for many of the Ajax controls that are now popular, such as Magicajax , you can return other data types such as datasets, but only encapsulate the results of this process, and they are not much different in nature.

4, the advantages of Ajax

1, the page does not refresh , enhance the user experience .

2, asynchronous communication , does not need to interrupt the user's operation , the rapid response ability .

3, theprinciple of Ajax is "on-demand data", can minimize the redundancy request and response to the server burden .

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

5, the shortcomings of Ajax

The drawbacks of Ajax described below are inherently generated.

1,Ajax killed the back button, that is, the browser fallback mechanism of destruction. the Back button is an important feature of a standard web site, but it does not work well with JS. This is a serious problem with Ajax, because users often want to be able to undo the previous operation by going backwards. So is there any way to do this question? The answer is yes, using Gmail know, Gmail under the Ajax technology to solve the problem, in Gmail can be back, but it does not change the mechanism of Ajax, it is only a relatively stupid but effective way, that is, the user click the Back button to access the history To reproduce the 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 on an AJAX element to restore the application state to its current state.) ）

However, although this problem can be solved, but the development cost of it is very high, and the AJAX framework required by the rapid development is a divergence. This is a very serious problem caused by Ajax.

2, security issues

Technology also poses new security threats to IT companies, and Ajax technology is just like building a direct channel to 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 create new attacks from remote servers. And Ajax also makes it difficult to avoid some known security weaknesses, such as cross-site footstep attacks, SQL injection attacks, and credentials-based security vulnerabilities .

3, the support of the search engine is relatively weak .

4. the abnormal mechanism of the program is destroyed . 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 at the Internet almost no relevant introduction. Then I did a test by myself, using Ajax and the traditional form submission mode to delete a piece of data ... It has brought us a lot of difficulties in debugging.

5, in addition, like some other aspects of the problem, such as violating 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 what I see under this URL is different. This is contrary to the original intention of resource positioning.

6, some handheld devices (such as mobile phones, PDAs, etc.) are not very good to support Ajax, for example, we open the browser on the mobile phone using AJAX technology site, it is currently not supported, of course, this problem and we do not have much to do with.

6. Several frameworks of Ajax

The more Ajax frameworks we currently employ are Ajax.dll,ajaxpro.dll,magicajax.dll , and Microsoft's Atlas framework . Ajax.dll and Ajaxpro.dll the two frameworks are not very different, and Magicajax.dll is just a bit more encapsulated, for example, it can directly return the dataset DataSet, as we have said, Ajax is returning strings, Magicajax just encapsulated it. But 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 deal with, the operation is very simple, after adding Magicajax, The list control to be updated is placed within the Magicajax control, and the time to define the update interval within the pageload is OK, and the principle of Atlas is similar to Magicajax. However, one of the problems to be aware of is that these frameworks only support IE, do not do browser-compatible aspects of the processing, with the anti-compilation tools to see their code can be known.

In addition to these frameworks, the more common way we use them is to create XMLHttpRequest objects ourselves , which is more flexible than the previous frameworks. In addition, here also mention the aspnet2.0 of the asynchronous callback interface, it can also be implemented as Ajax partial non-flush, but its implementation is actually based on the XMLHttpRequest object, but also only support IE, of course, this is Microsoft's competitive strategy.

How Ajax works and the common AJAX framework