1. Background of AJAX
Recently, friends who care about web development often hear the Ajax buzzword on the Internet. Using Google search, you will find countless examples that claim to be Ajax. The authors of these examples proudly show the Hello world they wrote after learning XMLHTTP, and think they are proficient in Ajax. So what is Ajax? Is it equivalent to XMLHTTP? Let's start with the source. The inventor of AJAX is Jesse James Garnett, who found the word Ajax in this article:
Ajax: A New Approach to Web Applications
Click to view this article published on March 13, February 18, 2005. Maybe many of my friends have not read this article. Let me introduce it.
Ajax is short for Asynchronous JavaScript + XML. The main technologies used include:
Display Based on XHTML/CSS standards
Use dom for Dynamic Display and Interaction
Data exchange and processing using XML and XSLT
Use XMLHttpRequest to obtain asynchronous data
Javascript binds everything together. The Ajax interaction model is very different from the traditional HTML form-based interaction model.
The following figure compares the traditional interaction mode with the Ajax interaction mode.
We can see that in the traditional interaction mode, the client does not represent the execution of logic, the server executes all the representation logic, and then transmits html/CSS to the client, the client only performs simple presentation.
The biggest problem with the traditional interaction mode is that any small interaction behavior needs to go to the server side, resulting in a large amount of latency that makes users feel uncomfortable, it also reduces the user's work efficiency. Maybe a large number of web users are used to waiting for a page to refresh, but this cannot be an excuse for our developers to shirk their responsibilities to improve interaction behavior. Suppose that the user has used the C/S application before using the B/S application. Is there such a funny thing in the C/S application? What is the solution? Let's take a look at the Ajax interaction mode.
An Ajax engine is added to the client, and the server sends XML data to the client instead of HTML/CSS. The client sends requests to the server through XMLHTTP. All the representation logic is executed on the client through the JS script, and then displayed by modifying the Dom. With the middle layer of the client, you can put a lot of interaction work that must be done on the server end on the client side, while the Ajax engine of the client responds instantly, therefore, the user interaction experience has been greatly improved. We can use the figure below to compare the time allocation in two interactive modes. We can see that in the traditional HTML form-based interaction mode, a large amount of time is wasted on waiting. The biggest advantage of this new interaction mode is that it improves the user experience. In addition, there are many other advantages, such as the absence of page refresh, the reduction of server processing burden, and the reduction of the amount of data exchanged. Is Ajax a magical new technology? None at all. From the above core technologies used by Ajax, any technology has been mature for many years. As far as I know, in 2001, all these technologies have matured and entered the practical stage. Therefore, I only regard Ajax as the revival of traditional development based on XHTML, CSS, and Js. In fact, my company has been using this architecture for web development for three years. We have completely abandoned HTML form. So when I saw this article, I thought that if we had a word early, this new web development model may not be called Ajax. However, this proves that the decision we made a few years ago is still insightful.
Although a large number of developers have adopted this development mode many years ago, the term has played a role in standardized terms. When I gave a lecture on XMLHTTP development at the javaeye event last year, I felt quite a different person, because there were not many J2EE developers interested in JS at that time. Now, Ajax is becoming more and more popular in J2EE Web development and will maintain its vitality for a long time. At the end of September May, I heard a speech from the bear festival at the javaeye event. I didn't remember anything. I only remember one word: It's ancient. In fact, Ajax is also ancient. Ajax is just a new bottle of old wine, but it uses these technologies independently by the artist (so far there are still a large number of J2EE developers who think that writing Javascript is a task of the artist) the perfect combination has produced great value. Ajax is a new interaction mode or development mode, rather than a ready-made framework. Applications developed based on AJAX can be called Ajax applications. Ajax repackaging the client technologies that traditional J2EE developers do not care much about, which brings great value to enterprise applications. We know that presentation layer development has always been of great significance and takes up almost half of the workload of development projects. Users often look at your interface and interaction, so this part cannot be sloppy. You can be a little sloppy about the architecture, and the difference is not much worse Based on spring/hibernate. However, interfaces and interactions are what users can feel immediately and cannot be sloppy. At present, Google has made a huge investment in Ajax technology. Some applications launched by Google over the past two years, such as Gmail, Google groups, Google suggest, and Google Maps, all adopt Ajax technology. Google map is the most eye-catching and complex application. Below I will introduce Google maps as a typical Ajax application. 2. Ajax instance application-Google Maps
Before giving this speech, I made some hack work on Google maps by referring to some materials on the Internet. Currently, all the data except map images that need to be requested from Google is running locally.
However, the front-end code of Google Maps is large and confusing. Therefore, it takes a lot of effort to sort out the code. At present, this work has not been fully completed. Therefore, the following content is only based on my current achievements. What technologies does Google maps use? The technologies used by Google maps are basically those mentioned in Ajax.
1. Standards-based presentation using XHTML and CSS;
2. Dynamic Display and Interaction Using the Document Object Model;
3. Data Interchange and manipulation using XML and XSLT;
4. Asynchronous Data Retrieval Using XMLHttpRequest;
5. and JavaScript binding everything together. The homepage of Google Maps is
Http://maps.google.com
The request method for each map of Google Maps is:
Http://maps.google.com/maps? LL = 49.29,-123.12 & SPN = 0.017998, 0.027586 & Z = 3 & HL = en
We can see that each map has four parameters. The value is actually six.
LL: The accuracy and latitude of the map center
SPNs: MAP range (span, horizontal and vertical)
Z: Map scaling level
Hl: the map language Google Maps. Each large map is actually a lot of small GIF images. The size of each small image on a common map is 128x128 pixels, and that on a satellite map is 256x256 pixels. Each small image has its own independent URL in the format:
Http://mt.google.com/mt? V =. 1 & X = 50 & Y = 20 & zoom = 4
These parameters include:
V: current version number .. 1 is estimated to be version 0.1
X: X index of the image
Y: Y index of the image
Zoom: the zoom level of the image. Which textures are required for each map using a fixed algorithm. Then, the server automatically requests these textures. When a map changes (for example, drag, move, scale, and so on), it will automatically request the desired image like the image on the server. For example, we can see that when a map moves, the image will automatically fill in a new display area. All of these calculations and processing are completed on the browser side using Js. Because the browser has the image caching function, if you often view a map in the same region, over time, the browser caches a large number of images, in this way, the performance of Google Maps is getting better and better. Google maps also provides powerful search functions. I recorded a simple demonstration here.
Google Maps can also perform complex searches, such as searching hotels in the lax location. The result is:
Click the hotel entry on the right of the map to display the description of the hotel on the map. This instruction is produced using XSLT technology.
You can also search for paths between two points. For example, if you search for JFK to 350 5th Ave and New York, the result is a map with a path between two points. The path here is drawn using VML on IE, while the transparent PNG Image geographic map image automatically generated in the background is superimposed on other browsers. Because IE is completely completed on the client, the IE performance will be better. In addition, Google Maps maps can be loaded in either a div or an IFRAME. Friends familiar with XMLHTTP know that when XMLHTTP appears, there are very few scenarios where data needs to be obtained from the server through hidden IFRAME. However, IFRAME has some other functions. One advantage of IFRAME over XMLHTTP is that IFRAME can be combined with the browser's historical records, but XMLHTTP cannot. That is to say, if the data comes from an IFRAME, you can use the browser's back and forward functions in the future to bring users a better interactive experience. For example, the user we saw just now searches Boston and may want to look at the map of New York. He can simply use the back button of the browser, instead of entering New York again. If he still wants to see Boston's map, use the forward button. The data returned by Google maps to the front-end is in XML format and is parsed by the front-end JS script for processing.
Here is an example of an XML file. In fact, only the center and span are required. The client script automatically requests the corresponding image through the central point position and map span.
<? XML version = "1.0"?>
<Page>
<Center lat = "49.29" lng = "-123.12"/>
<Span lat = "0.017998" lng = "0.027586"/>
</Page> the above are the main functions of Google Maps. I will introduce the functions provided by the server from the client perspective. The server is mainly used to store data. According to the current 15 scaling levels, each level requires a large number of texture files to be retained. Some people have calculated that even if a map is not needed in many areas of the country or wasteland, transparent images can be used instead, the total data volume in North America is about dozens of terabytes. Google has a Linux cluster consisting of the world's most powerful low-cost PC servers. There is no problem in storing the data and providing good performance. Can other companies and individuals use Google Maps technology?
Other companies and individuals can use Google Maps services. Currently, Google does not charge for this service. Therefore, you can request images from Google servers and display them to customers on your servers. The demo I just made is completely run locally, and all XML data and JS scripts are all locally. It is just that the textures come from Google's server. Google's Js scripts are copyrighted. I just downloaded the scripts to the local for the purpose of research and made some modifications to facilitate research. For commercial applications, you may not be able to do this. You can directly use scripts on the Google server on the page. Therefore, Google Maps is used to generate custom map data on your server, send an XMLHTTP request to the client, use the Google Maps script for parsing, and then request texture data from Google. In addition to your own map data, you can also obtain map data from other servers, such as Google servers. However, because XMLHTTP can only obtain data from the local domain, in order to obtain data from other domains, you need to use servlet to implement a proxy on the server side, this servlet obtains the map data from other domains and returns it to the client. Such a servlet is very simple to write and requires only a few lines of code. At the same time, the client needs to wrap the XMLHTTP object so that the new object can request data from different domains. Google maps can be customized. Google provides a lot of convenience for the custom Maps service. The custom method is to provide custom map data files. In this file, overlay is the content customized by developers. Two vertices are customized. When you click these two points, the instructions for these two locations will appear. XSLT technology is used to generate instructions. For example, if I create a map of all Chinese restaurants in New York, I can add the telephone numbers, contact names, and other information of each restaurant to it. Google Maps provides these interfaces to allow developers to work with them to develop map services for different fields and groups. It is a smart business that expands its influence by selling a portion of its profits. Highlights of Google Maps:
1. Complete functions with functions available for regular map services.
2. excellent performance. Users almost never need to wait for a long time.
3. multiple browsers are supported. Currently, Google Maps supports the following browsers:
IE 5.5 + (Windows)
Firefox 0.8 + (Windows, Mac, Linux)
Safari 1.2.4 + (MAC)
Netscape 7.1 + (Windows, Mac, Linux)
Mozilla 1.4 + (Windows, Mac, Linux)
Opera 7.5 + (Windows, Mac, Linux)
All mainstream browsers are included.
Google Maps encapsulates the difference between IE and other browsers through a self-developed component library. Major differences include the creation Syntax of XMLHTTP and xmldom objects, as well as the differences in event processing mechanisms. In addition, Google Maps uses Web-compliant technologies to minimize the number of branch codes developed for different browsers.
4. By using a large number of client technologies, the traditional HTML form-based interaction mode is abandoned, so that users can have a better interaction experience.
5. Complete componentization and object-oriented development.
Google Maps components and object-oriented design are very high. All major controls are encapsulated as objects and operated in an object-oriented manner. Because XMLHTTP can only obtain data files in the current domain, in order to obtain data files from other places, you can implement a proxy on the server side. Simply put, a servlet is implemented to obtain data files from other domains through this servlet and then return them to the client.
Therefore, we need to wrap the XMLHTTP object. Let's take a look at the specific packaging technology. I have not finished sorting out the Google Maps client scripts yet, so today's code is less detailed. This article mainly introduces the functions and core technologies of Google maps from a major perspective. Next time, I will give you a detailed analysis of the Google Maps front-end code. Of course, this requires a considerable understanding of XHTML, CSS, JavaScript, XSLT, XMLHTTP, and other technologies. Today, I first introduced the origin and connotation of Ajax. Then, using Google maps as an example, we can fully feel the advantages of Ajax technology. Currently, Ajax has become increasingly popular and has entered the mainstream J2EE development field. Not only are small companies interested in Ajax, but large companies are increasingly interested in Ajax. One of my friends who developed Oracle the day before yesterday said that their company is also very interested in Ajax and is organizing relevant knowledge. We will also consider building our own Ajax Component Library and development tools. Their company has used many applications using applet before, but applet is obviously outdated and will certainly be replaced by Java Web Start in the future. JWS also has some problems. So I think Ajax should be a better choice for them. Although I have done a lot of Javascript development, I like this language very much. However, JavaScript still has some problems, which hinders large-scale componentization development. Currently, I think there are two main problems:
1. javascirpt does not have the concept of package or C # namespace like Java, so classes and functions can be easily renamed. This problem cannot be solved simply by naming conventions.
2. Inheritance in javascirpt is not a real inheritance. It is only that all subclass objects share a parent class object. This parent class object is equivalent to a Singleton, so it must be stateless, you cannot keep your own attributes. This problem makes it difficult for JavaScript to support multi-layer inheritance and to construct a large inheritance system. Currently, ecmascript4 is under development. One of the main objectives is to provide real Object-Oriented Programming capabilities for JavaScript. This standard has been introduced for a long time to support it by major browsers. There are some temporary solutions to solve these two problems in the current phase. I will not discuss them carefully due to time reasons. Fortunately, the size of client component development is much smaller than that of the server, so the current JavaScript capability is sufficient in most cases. Currently, various mainstream browsers support web standards. The web standards I mentioned here refer to technologies like XHTML/CSS/ecmascript/DOM/XSLT. XMLHTTP will also be squeezed into the standard in the future, and the work on XMLHTTP standardization is currently in progress. Currently, Development Based on Web standards has become the mainstream idea of WEB presentation layer development. It is time to completely abandon the use of private technology and develop a browser only. I am not a standards-only commentator. I have always considered issues from the perspective of practical developers. I also used to develop only for IE browsers. But today, I found that standard-based development does not bring additional costs (there is almost no need to write code points for different browsers ), when it brings great value to backward compatibility, I did not hesitate to embrace web standards. I also recommend that you use standard-compliant methods for development in the future. If you encounter any specific difficulties, contact me directly. I will certainly contribute my own experience. We can continue to discuss what is a standard-compliant development method and best practices in future activities. This is what I want to talk about today. If you are interested in Google Maps, you can contact me directly. The source code of the Google maps I 've compiled will be published as appropriate. Thank you for your participation today!
