Basic Introduction
AJAX refers to asynchronous JavaScript and XML (asynchronous JavaScript and XML).
Domestic translation is often the same as "Ajax" and the Ajax football team. Web App interactions such as Flickr,backpack and Google have made a qualitative leap in this regard. The term derives from the transformation that describes a Web-based application to a data-based application. In data-based applications, data such as user needs, such as contact lists, can be obtained from the server independent of the actual Web page and can be dynamically written to the Web page, rendering the slow Web application experience like a desktop application.
The core of Ajax is the JavaScript object XMLHttpRequest. This object was first introduced in Internet Explorer 5, which is a technique that supports asynchronous requests. In short, XMLHttpRequest allows you to use JavaScript to make requests to the server and handle the response without blocking the user.
Ajax does not require a server, it can be a Java EE application. NET applications and other types of application services. With Ajax, you can write JavaScript code to improve HTML and create a rich interactive user experience.
Foldededit this paragraph development mode
Many important technologies and Ajax development patterns can be obtained from existing knowledge. For example, in an app that sends a request to the server, it must contain the order of requests, priority, timeout response, error handling, and callbacks, many of which are already included in the Web service, just like today's SOA. Ajax developers have a complete knowledge of the system architecture. At the same time, as technology matures there are many areas that need to be improved, especially the ease of use of UI parts.
Ajax development differs greatly from the traditional CS development. These differences introduce new programming problems, the biggest problem is ease of use. Because Ajax relies on browser-based JavaScript and XML, browser compatibility and support standards have become as important as JavaScript's runtime performance. Most of these problems come from a combination of browsers, servers, and technologies, so you must understand how best to use these technologies.
Ajax presents a new way to develop a variety of technologies and a highly-coupled customer-service environment. Ajax developers must understand the traditional MVC architecture, which limits the boundaries between application hierarchies. At the same time, developers need to consider the external of the CS environment and use AJAX techniques to re-stereotype MVC boundaries. Most importantly, AJAX developers must disallow Web applications as a collection of pages and need to consider them as a single page. Once the scope between the UI design and the service architecture is strictly differentiated, developers need to update and change the technology collection.
Foldededit this paragraph development Framework
As Ajax quickly rose to the limelight, I think developers ' expectations of this technology have also increased rapidly. Like any new technology, the boom in Ajax requires an entire development tool/programming language and associated technology systems to support it.
FoldedThe main technologies involved
The representation of the base Web Standard (standards-based presentation) xhtml+css;
Use the DOM (Document Object Model) for dynamic display and interaction;
Using XML and XSLT for data exchange and related operations;
Using XMLHttpRequest to query and retrieve asynchronous data;
Use JavaScript to bind everything together. In English see the author of Ajax, the original text of Jesse James Garrett, the original topic (Ajax:a New approach to WEB applications).
Similar to DHTML or Lamp,ajax does not refer to a single technique, but rather organically utilizes a range of related technologies. In fact, some Ajax-based "derivation/composition" (derivative/composite) technologies are emerging, such as "Aflax".
Ajax applications use a Web browser that supports the above technologies as a running platform. These browsers currently include:
Google Chrome, Mozilla, Firefox, Internet Explorer, Opera, Konqueror, and Safari. However, Opera does not support XSL format objects, nor does it support XSLT.
FoldedJavaScript
As the name suggests, the most important and most overlooked part of the Ajax concept is that it is also a JavaScript programming language. JavaScript is an adhesive that integrates parts of an AJAX application. For most of the time, JavaScript is often used by server developers as a way to avoid things that an enterprise application doesn't need to use. This view comes from the previous experience of writing JavaScript code: a complex and error-prone language. Similarly, it is considered that the application logic is arbitrarily scattered across the server and the client, making the problem difficult to find and the code difficult to reuse. In Ajax, JavaScript is used primarily to pass data on the user interface to the server and return the results. The XMLHttpRequest object is used to respond to data passed through HTTP, and once the data is returned to the client, it is immediately possible to use the DOM to put the data on the network surface.
FoldedXMLHttpRequest
The XMLHttpRequest object has been implemented on most browsers and has a simple interface that allows data to be passed from the client to the server, but does not interrupt the user's current operation. Data transmitted using XMLHttpRequest can be in any format, although it is suggested that the data is in XML format from the name.
Developers should already be familiar with many other XML-related technologies. XPath can access the data in an XML document, but understanding the XML DOM is a must. Similarly, XSLT is the simplest and fastest way to generate HTML or XML from XML data. Many developers are already familiar with XPath and XSLT, so it makes sense for Ajax to choose XML as the data Interchange format. XSLT can be used on both the client and the server side, which can reduce the number of application logic written in JavaScript.
FoldedCSS
To properly navigate AJAX applications, CSS is an important weapon that Ajax developers need. CSS provides a mechanism for separating application styles and designs from content. While CSS plays a critical role in AJAX applications, it is also a major impediment to building cross-browser applications because different browser vendors support a variety of CSS levels.
FoldedServer-Side
But unlike on the client side, the AJAX application on the server is still used based on such as Java. NET and PHP languages, and does not change the main way in this field.
That being the case, our interest in the Ruby on Rails framework has increased rapidly. More than a year ago, Ruby on Rails has attracted a lot of developers to build web and Ajax applications based on their powerful capabilities. While there are many rapid application development tools present, Ruby O-N rails seems to have stockpiled the ability to simplify building AJAX applications.
Foldededit this paragraph pros and cons analysis FoldedBenefits: Faster response times
Traditional web apps allow users to fill out forms (form) and send a request to the Web server when the form is submitted. The server receives and processes the form, and then returns a new page. This approach wastes a lot of bandwidth because most of the HTML code in the last two pages is often the same. Because each application interaction requires a request to the server, the response time of the application depends on the response time of the server. This causes the user interface to respond much more slowly than the local application.
Unlike this, an AJAX application can send and retrieve only the necessary data to the server, using SOAP or some other XML-based Web service interface, and using JavaScript on the client to process the response from the server. As a result, the amount of data exchanged between the server and the browser is reduced so that we can see more responsive applications. At the same time, a lot of processing can be done on the client machine making the request, so the processing time of the Web server is also reduced.
The biggest advantage of using AJAX is the ability to maintain data without updating the entire page. This allows the Web application to respond more quickly to user actions and avoids sending information that has not changed on the network.
Ajax does not require any browser plugins, but requires the user to allow JavaScript to be executed on the browser. Like the DHTML application, AJAX applications have to undergo rigorous testing on many different browsers and platforms. With the maturation of Ajax, a number of libraries that simplify the use of Ajax have been introduced. Similarly, there is another assistive programming technique that provides alternative functionality for users who do not support JavaScript.
Foldedsolutions to the shortcomings and some of these problems
The main criticism of applying Ajax is that it can disrupt the normal behavior of browser back buttons. In the case of dynamically updating the page, the user cannot go back to the previous page state because the browser can only record static pages in the history. The difference between a fully read page and a page that has been dynamically modified is very subtle; users often want to click the Back button to cancel their previous operation, but in an AJAX application it is not possible to do so. But developers have come up with ways to solve this problem, most of which is to reproduce changes on the page by creating or using a hidden iframe when the user clicks the Back button to access the history. (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.) )
A related view is that using dynamic page updates makes it difficult for users to save a particular state to a collection. The solution for this problem has also occurred, with most of the URL fragment identifiers (often referred to as anchors, which are the parts of the # URL) to keep track of, allowing the user to return to the specified application state. (many browsers allow JavaScript to dynamically update the anchor point, which allows an AJAX application to update the anchor point while updating the display.) These solutions also address many of the arguments that do not support back buttons.
With Ajax development, network latency-that is, the interval between a user sending a request to a server to make a response-requires careful consideration. Not giving users a clear response, without proper pre-reading data, or improper handling of XMLHttpRequest, will make users feel delayed, which is not what users want to see, but they do not understand. A common solution is to use a visual component to tell the user that the system is in the background and is reading data and content.
Some handheld devices (such as mobile phones, PDAs, etc.) are not yet well-supported Ajax;
JavaScript ajax engine, JavaScript compatibility and debug is a headache;
Ajax non-refresh overload, because the page changes do not refresh the overload so obvious, so easy to bring trouble to users-users are not very clear whether the current data is new or has been updated, the existing solution is: in the relevant location hints, data Update area design is more obvious, the data updated to the user prompt;
Support for streaming media is not as good as Flash or Java applet;
Foldededit this paragraph program schema Folded1 Pure javascript: Application Framework
1.1 Bindows (since 2003)
It can generate highly interactive Internet applications through powerful syndication of DHTML,JAVASCRIPT,CSS and XML technologies-a powerful opponent of modern desktop applications. The Bindows application does not require a download and does not need to be installed on the client-only one browser (and no need for Java,flash or ActiveX) is required. Bindows is likely to lead the platform for object-oriented development of AJAX applications.
1.2 Backbase (since 2003)
The URL is:, is a comprehensive browser-side framework that supports rich browser functionality as well as with. NET and Java integration.
• Commercialized, from Backbase B.V (headquartered in Amsterdam, founded in 2003).
1.3 DOJO (in development; since September 2004)
The URL is:/, provides full window widgets and browser-server messaging support.
• Provides framework support for creating custom JavaScript widget widgets.
1.4 Open Rico (in development; since May 2005; based on the early private framework)
The URL is a multi-purpose framework that supports AJAX infrastructure and user interaction.
1.5 Qooxdoo (in development; since May 2005)
The URL is another ambitious framework that provides a wide range of UI support and infrastructure features under development.
1.6 Tibet (in development; since June 2005)
The URL is:, the goal is to provide a highly portable and comprehensive JavaScript API, as a result, a large number of client code may be generated automatically. Claiming to be "enterprise-Class Ajax".
Folded2 Pure javascript: Infrastructure Framework
2.1 Ajaxcaller (alpha version; since May 2005)
The URL is: a basic thread-safe XMLHttpRequest wrapper, primarily for Ajax novices, still in the original Alpha development phase,
2.2 Flash JavaScript Integration pack
The URL is:, allows the integration of JavaScript and Flash content
2.3 Google Ajaxslt (released on June 2005)
The URL is: a JavaScript framework for performing XSLT transformations and XPath queries.
2.4 Htmlhttprequest (beta version; started in 2005)
Htmlhttprequest (), which uses XMLHttpRequest and iframes for improved compatibility.
2.5 Interactive website Framework (since May 2005)
The interactive site framework, which is a project, is designed to support multiple aspects of the AJAX infrastructure from the browser side. Self-described as "using Javascript,css,xml, and HTML to create a highly interactive Web site framework." Includes a custom XML parser for highly readable JavaScript. Essentially, it's the foundation of building AJAX-based Web sites, and there are other generic scripts. "
2.6 Libxmlhttprequest (released in June 2003)
/connector?file=reference/2003/06/17/libxmlrequest.html), is a thin wrapper for XMLHttpRequest.
2.7 Rslite (x)
The website is: http/rs/main.htm, is a thin wrapper for XMLHttpRequest.
2.8 Sack (in development, since May 2005)
The website is:/2005/05/sack-of-ajax/, is a thin wrapper for XMLHttpRequest.
2.9 Sarissa (released in 2003, February)
The Web site is: http, a JavaScript API that encapsulates the ability to invoke XML independently on the browser side.
2.10 Xhconn (released since 2005, April)
The website is:/javascript/xhconn/, is a thin wrapper on the XMLHttpRequest.
2.11 Jquery
Concise idea: Almost all operations start with selecting DOM elements (with powerful selector) and then manipulating them (chaining and other features).
Folded3 server-side: multiple languages
3.1 Cross-platform Asynchronous Interface Toolkit (May 2005)
Cpaint: is a real AJAX implementation that supports PHP and Asp/vbscript and JSRs (JavaScript remote scripting) implementation. Cpaint provides you with the code needed to implement Ajax and JSRs in the background, while the returned data is manipulated in the foreground, formatted and displayed in JavaScript form. This allows you to create Web applications that provide near real-time feedback to users.
3.2 SAJAX (available, but not version 1.0; since March 2005)
The website is: http:///sajax/, send the call directly from JavaScript to your server-side language and return again.
3.3 Javascipt Object Flags (JSON) and JSON-RPC
JSON (http/index.html), is a "Fat free XML choice", while JSON-RPC (/) is a remote process protocol, similar to XML-RPC, which strongly supports JavaScript customers.
3.4 JavaScript remote scripting (JSRS) (since 2000)
The URL is: http/test.htm, send the call directly from JavaScript to your server-side language and return again.
Folded4 server side: Java
4.1 WebORB for Java (since August 2005)
URL: http://weborb/aboutWeborb.htm, is a platform that supports the development of Ajax and Flash-based rich client applications and can tie them to Java objects and XML Web services. Online Example (HTTP)
4.2 Echo 2 (since March 2005)
The URL is: http:///, which allows you to write AJAX applications (example (Http://demo./ia)) in plain Java code.
4.3 Direct Web Remoting (DWR) (2005)
The URL is: http/, a framework for invoking Java methods directly from JavaScript code.
4.4 Swato (2005)
The URL is/, a reusable and well-integrated Java/javascript library that implements an easier way to change the interaction of your Web application, which is implemented in an AJAX way.
Folded5 server-side: Lisp
5.1 Cl-ajax
URL, implementing JavaScript directly calls the server-side Lisp function.
Folded6 server side:. NET
6.1 WebORB (since August 2005)
URL:/aboutweborb.htm, is a platform for developing Ajax and Flash-based rich client applications and connecting them to. NET objects and XML Web services. (online example (HTTP//))
6.2 (since March 2005)
The URL is: http/, a library that implements access from JavaScript to server-side. Net.
Folded7 server-side: PHP
7.1 Ajaxac (since April 2005)
The URL is:/, encapsulates the complete application with a single PHP class.
7.2 Jpspan
The URL is: HTTP, which directly passes the JavaScript call to the PHP function.
7.3 Xajax
The URL is: HTTP, which directly passes the JavaScript call to the PHP function.
Folded8 Server side: Ruby
Ruby on rails/) is a typically powerful AJAX-enabled web framework:
Foldededit this section debugging compatibility FoldedDebugging Issues
In actually building AJAX applications, you need more than just a text editor. Since JavaScript is non-compiled, it can be easily written and run in a browser. However, many tools provide useful extensions such as syntax highlighting and smart completion.
Different ides provide different levels of support for JavaScript. IntelliJ idea from JetBrains is a better IDE for JavaScript development, although many developers like Microsoft's Visual Studio products (promising to improve AJAX support in the latest version). Eclipse contains two free JavaScript editor plugins and a commercially available Komodo IDE from Activestat.
Another problem with JavaScript and Ajax development is the difficulty of debugging. Different browsers provide different, often hidden, runtime error messages, and JavaScript flaws such as double-variable assignments (usually due to missing data types) make debugging more difficult. In the development of Ajax, debugging is more complicated, because it needs to identify whether it is a client or a server-generated error. In the past, JavaScript debugging was done by deleting all the code and then adding a line of rows until the error occurred. Now, more developers are back to Microsoft Script Debugger for IE and Venkman for Mozilla Browser.
FoldedBrowser Compatibility
The biggest problem with JavaScript programming comes from the different browsers ' support for various technologies and standards. Building a run in a different browser (ie and Firefox) is a difficult task. So several Ajax JavaScript frameworks either generate JavaScript based on a server-side logic or tag library, or provide a client JavaScript library that conforms to cross-browser Ajax development. Some popular frameworks include the following: Jquery,backbase,bitkraft,django,dojo,dwr,mochikit,prototype,rico,sajax,sarissa,and Script.
These frameworks give developers more space so they don't have to worry about cross-browser issues. While these frameworks enhance the developer's ability to build applications, there are other factors that need to be considered in the Ajax component market because vendors have developed a packaged component solution for a more detailed user interface. For example, components that provide a common user interface, such as combo boxes and several vendors of data rasters, can be used to create good experiences in applications that view and edit data in a way that resembles a spreadsheet. These components, however, not only encapsulate the user interface of the component, but also include ways to communicate with the server-side data, which are typically implemented using markup-based methods such as or JSF controls.
Foldedediting the main issue of this paragraphFoldedBrowser compatibility issues
Ajax is essentially a browser-side technology, and the first unavoidable problem is the compatibility of browsers. Each browser's support for JAVASCRIPT/DOM/CSS is partially different or has bugs, and even support for javascript/dom/css between versions of the same browser may be partially different. This causes programmers to spend most of their time writing AJAX applications in debugging browser compatibility rather than in the application itself. As a result, most of the Ajax link libraries or development frameworks currently exist in the form of JS link libraries to define higher-order JavaScript APIs, JavaScript objects (templates), or JavaScript widgets to address this problem. such as Prototype.js.
FoldedBusiness logic Dispersion
The main purpose of Ajax technology is to partially exchange data between client and server. As with the traditional master-slave architecture, inevitably there will be part of the business logic that will be implemented on the client, or partly in the client part on the server. Because the business logic may be scattered across clients and servers and implemented in different programming languages, this makes Ajax applications extremely difficult to maintain. With the need for user interface or business logic changes, coupled with the compatibility of the previous JAVASCRIPT/DOM/CSS, Ajax applications tend to become programmers ' nightmares. The AJAX development framework can be broadly divided into two categories for the problem of business logic dispersion:
[1] Put the business logic and presentation layer in the browser, the data layer placed on the server: Because all the programs in JavaScript execution on the client, only need the data to the server to request service, this method is also known as the Fat Client (FAT) architecture. The server is typically used only to provide and store data in this architecture. The advantage of this approach is that programmers can leverage JavaScript with business logic to make special user interfaces to meet end-user requirements. But there are a lot of problems, because at first, the ability of the JavaScript language itself may not be enough to handle complex business logic. Second, JavaScript has always been ineffective in its execution. Third, JavaScript accesses server data and still requires proper server-side program coordination. The problem of browser compatibility appears again. Some AJAX development frameworks such as DWR attempt to automatically generate JavaScript to avoid compatibility problems, and open channels allow JavaScript to directly invoke the server-side Java program to simplify data access. But the first and 22 questions remain, and programmers must be able to meet the specifications of the application or may not meet the requirements at all.
[2] The presentation layer, the business logic, and the data layer are placed on the server, the browser only has the user interface engine (users Interface engine); This method is also known as the Thin Client (thin) architecture, or the central server (server-centric) architecture. The browser's user interface engine is used only to reflect the performance layer of the server and to convey the user's input back to the server's presentation layer. Events triggered by the browser are also sent back to the server for processing, updating the presentation layer according to the business logic, and then reflecting back to the browser. Because all applications are completely server-executed, with direct access to the data and presentation layers, programmers simply use a relatively mature programming language (such as the Java language) on the server side, without needing to learn javascript/dom/css, and are relatively easy to develop applications. The disadvantage is that the user interface engine and the presentation layer usually exist in the form of standard components, such as the need for special components (user interfaces), often to be provided by the original framework developers, Huanbujiji. such as the open source Code AJAX development Framework ZK currently supports XUL and XHTML components, there is no XAML support.
Foldedmulti-process or multi-threading competition issues
Ajax is the asynchronous way to submit requirements to the server. For the server, it is not different from the traditional submission form requirements, and because it is submitted asynchronously, if there are multiple Ajax requirements and form submission requirements, there will be no guarantee that the need to get the server's response first. This results in a typical multi-process (process) or multi-threaded (thread) contention (racing) problem for the application. Programmers therefore have to deal with them on their own or in JavaScript to avoid this kind of competition problem (such as Ajax needs not responding before the first disable Send button), which unnecessarily increases the burden of the programmer. There seems to be only ZK for the development framework that is known to automatically handle this problem.
FoldedEdit the basic application of this paragraphFoldedTo Create a XMLHttpRequest method
The XMLHttpRequest class is first introduced by Internet Explorer as an ActiveX object, known as XMLHTTP. Later, Mozilla﹑netscape﹑safari and other browsers also provided XMLHttpRequest classes, but they did not create xmlhttprequest classes in different ways.
For Internet Explorer browsers:
Xmlhttp_request = new ActiveXObject ("msxml2.xmlhttp.3.0"); 3.0 or 4.0,5.0
Xmlhttp_request = new ActiveXObject ("Msxml2.xmlhttp");
Xmlhttp_request = new ActiveXObject ("Microsoft.XMLHTTP");
Because XMLHTTP versions may not be consistent in different Internet Explorer browsers, in order to be better compatible with different versions of Internet Explorer browsers, we need to vary the version of the Internet Explorer browser to create the XMLHttpRequest class, the above code is the method of creating the XMLHttpRequest class based on the different Internet Explorer browsers.
For browsers such as Mozilla﹑netscape﹑safari
The XMLHttpRequest method is created as follows: Xmlhttp_request = new XMLHttpRequest ();
Some Mozilla browsers may not work correctly if the server's response does not have an XML Mime-type header. To solve this problem, if the server response header is not text/xml, you can call other methods to modify the header.
Xmlhttp_request = new XMLHttpRequest ();
Xmlhttp_request.overridemimetype (' Text/xml ');
In practice, in order to be compatible with many different versions of browsers, the method of creating the XMLHttpRequest class is generally written in the following form:
try{
if (window. ActiveXObject) {
for (var i = 5; i; i--) {
try{
if (i = = 2) {
Xmlhttp_request = new ActiveXObject ("Microsoft.XMLHTTP"); }
else{
Xmlhttp_request = new ActiveXObject ("msxml2.xmlhttp." + i + ". 0");
Xmlhttp_request.setrequestheader ("Content-type", "Text/xml");
Xmlhttp_request.setrequestheader ("Charset", "gb2312"); }
break;}
catch (e) {
Xmlhttp_request = false; } } }
else if (window. XMLHttpRequest)
{xmlhttp_request = new XMLHttpRequest ();
if (Xmlhttp_request.overridemimetype)
{xmlhttp_request.overridemimetype (' text/xml ');} } }
catch (e) {xmlhttp_request = false;}
FoldedSend Request
You can invoke the open () and send () methods of the HTTP request class as follows:
Xmlhttp_request.open (' GET ', url,true);
Xmlhttp_request.send (NULL);
The first parameter of open () is the way HTTP is requested by-get,post or any server that you want to invoke. This parameter is capitalized according to the HTTP specification, otherwise some browsers, such as Firefox, may not be able to process the request.
The second parameter is the URL of the requested page.
The third parameter sets whether the request is asynchronous mode. If the True,javascript function continues execution, it does not wait for the server to respond. This is the "a" in "AJAX".
Foldedresponse of the server
This requires telling the HTTP request object which JavaScript function to use to handle the response. You can set the object's onReadyStateChange property to the function name of the JavaScript that you want to use, as follows:
Xmlhttp_request.onreadystatechange =functionname;
FunctionName is a function name created with JavaScript, be careful not to write functionname (), and of course we can create JavaScript code directly after onreadystatechange, for example:
Xmlhttp_request.onreadystatechange = function () {
JavaScript Code Snippets
};
The first thing to check is the status of the request. The function can handle the response only if a full server response has been received. XMLHttpRequest provides the ReadyState property to judge the server response.
The values of the readystate are as follows:
0 (uninitialized)
1 (loading)
2 (Loading complete)
3 (in interactive)
4 (complete)
So only when readystate=4, a full server response has been received, can the function handle the response. The specific code is as follows:
if (http_request.readystate = = 4) {//Receive full server response}
else {//did not receive the full server response}
When readystate=4, a full server response has been received, and then the function checks the status value of the HTTP server response. The full status value can be found in the documentation. When the HTTP server responds with a value of 200, it indicates that the status is OK.
Foldedprocessing data from the server
There are two ways to get this data:
(1) Return the response of the server as a text string
(2) Return response as XmlDocument object
Foldededit this section of the application case
The technology was applied around the 1998. The first component that allows client script to send HTTP requests (XMLHTTP) is written by the Outlook Web Access team. The component was originally owned by Microsoft Exchange Server and quickly became part of Internet Explorer 4.0. Some observers believe that Outlook Web access is the first successful business application that has AJAX technology applied and is the leader of many products, including Oddpost's webmail products. However, at the beginning of 2005, many events made Ajax accepted by the public. Google uses asynchronous communications in its famous interactive apps, such as Google discussion groups, Google Maps, Google search suggestions, Gmail, and more. The word Ajax was created by the ajax:a New approach to WEB applications, and the rapid spread of the article increased the awareness of people using the technology. In addition, support for Mozilla/gecko has made the technology more sophisticated and easier to use.
The Ajax outlook is very optimistic and can improve system performance and optimize the user interface. Ajax existing Direct frame Ajaxpro, can introduce Ajaxpro.2.dll file, can directly in the foreground page JS call back Page method. However, this framework is in conflict with the form validation. In addition, Microsoft introduced the AJAX components, you need to add the AjaxControlToolkit.dll file, you can appear in the control list of related controls.
Introduction to Ajax