AJAX development brief (Part I)

Posted by john
2/4/2007
Related Tags:

  In the use of the browser for browsing the web, when pages refresh time is slow, your browser do?    Your screen is what?    Yes, you wait for the browser refresh, and your screen is a blank, and you wait for the screen before the hard browser response.    Developer To overcome such an embarrassing situation, and each one had to wait for the response time may be necessary to add pages a DIV, telling users "system is processing your request, please wait……." 

  Now, there is a growing popularity of the "old" technologies that can completely change this distress situation.    That is AJAX.    Now, with Gmail, Google-maps of the various applications and the support of the browser, AJAX is gradually attracting the attention of the world. 

  1, AJAX definition of AJAX (Asynchronous JavaScript and XML) is a comprehensive variety of technologies, including Javascript, XHTML and CSS, DOM, XML and XSTL, XMLHttpRequest.    Of which: 

  The use of standardized showed XHTML and CSS, DOM use of dynamic Display and interaction, the use of XML and XSTL data exchange and processing, use XMLHttpRequest object to asynchronous data access, the use of Javascript bundled and processing of all data. 

  AJAX raised before in the industry for this technology are just the use alone, without the integrated use, but also because of the technology needs before the decision.    With the extensive application, AJAX has become a Xiangbobo. 

  Second, the status quo and the need to address the issue of traditional Web applications using synchronous interactive process, in which case, users first to trigger an HTTP server acts or request cry.    Conversely, the server to perform certain tasks, a request issued to the user returns an html page.    This is not a consistent user experience, the server in the handling of the request, most of the time users are waiting for the state, is a blank screen content.    Following plans: 

  Since the adoption of the Web hypertext transmission and after the show, so we are using a transfer.    When the load is relatively small, and that it would not reflect what is wrong with.    But when relatively large load, response time is very long, one minute, two minutes…… a few minutes of, it's not wait for the 275.    Serious, more than the response time, the server simply tell you pages can not be used.    In addition, certain times, I just want to change a small portion of pages of data, why do I have to reload the entire page?    !    When the software design increasingly emphasize the humanity of the time, so the user experience is simply bad and runs counter to this principle.    Why always waiting for the server to let users take data?    At the very least, we should reduce the waiting time for customers.    Now, in addition to program design, coding and server tuning optimization, it also can be used AJAX. 

  Third, why use AJAX 
  With the traditional Web Application different AJAX using asynchronous interaction process.    AJAX server between the user and the introduction of an intermediate media, thereby eliminating the network interaction in the process of dealing with - wait - processing - waiting for shortcomings.    A user's browser in the implementation of a mandate that is loading AJAX engine.    AJAX engine prepared by the JavaScript language, usually hidden in a hidden framework.    It is responsible for compiler and the user interface and interaction between the server.    AJAX engine allows users and applications is the interaction between the asynchronous process, independent of the user and the network server exchanges.    Now, Javascript can be used to replace the call AJAX engine produced an HTTP user moves the data in the memory editorial page navigation, check these data do not reload the entire page needs to be AJAX to implement. 

  Use AJAX, for the ISP, developers, end users convenient foreseeable: 

  •   Reduce the burden on the server.    AJAX is the principle of "on-demand from data" can be the greatest degree of redundancy reduction request, and response to the financial burden on the server. 
  •   No Refresh to update pages, psychological and actual users reduce the waiting time.    In particular, when a large amount of data to the reader, not as a black and white as the Reload, AJAX use XMLHTTP object request and sent by the server response, and without reloading the entire page with the circumstances Javascript DOM final operation update pages.    So in the process of reading data, users face is not black and white, is the original page content (You can also add a Loading of the boxes that allow users read data in the process), only when the data only after receiving complete update the corresponding part of the content.    This is an instant update, users almost no feeling. 
  •   Will enhance the user experience. 
  •   Some of the previous server can be the work of the burden shifted to the client, the client use idle capacity to deal with and reduce the burden on the server and bandwidth, space-saving and broadband rental costs. 
  •   Can call external data. 
  •   Based on the widely supported by the standardization of technology, do not need to download plug-ins or applets. 
  •   Further promote and display pages from the data. 
  Fourth, who is using AJAX 
  AJAX development in the application of the above, Google is doing my part and set an example.    Orkut, Gmail, Google Groups, Google Maps, Google Suggest have applied this technology.    Amazon's A9.com search engine also adopts similar technology. 

  Microsoft is also actively developing more sophisticated AJAX applications: it will be introduced, code-named Atlas AJAX tools.    Atlas AJAX functionality beyond itself, including the integration of Visual Studio debugging.    In addition, the new controls will allow ASP.NET controls and client server-side code bundled much easier.    Atlas framework, the script (Atlas Clent Script Framework) also associated with the website and interactive projects more convenient.    Visual Studio 2005, but does not include this feature. 

  Microsoft recently announced Atlas framework, the script will contain the following elements (For more detailed information please visit the Atlas website): 

  Typical, Microsoft will AJAX technology applications in MSN Space above.    Many people have been on the MS Space Services am very surprised, when submitted replies to the future, the browser will be temporarily pause, and then a set of circumstances to comment on my show.    AJAX this is the effect of the application.    Just think, if we should add a comment reload the entire page, it can be really cumbersome. 

  At present, AJAX applications is the most common areas of GIS-Map regard.    GIS search stressed that the regional rapid response, AJAX fits well with the characteristics of this demand. 

  5. Use AJAX to improve your design can be achieved without AJAX Although refresh updates page content, but is not what can be used, mainly in interactive applications more frequently read data, data classification good Web applications.    Now, let us cite two examples to see how to improve your design AJAX. 

  Example 1: Data validation 
  Content in the form of the input form, we often need to ensure the uniqueness of the data.    Therefore, often in the pages provide a "uniqueness of the check" button allows users to click open a small window check or submitted to the form, such as server-side, judging from the server after returning to the corresponding calibration information.    The former, window.open operation itself is relatively resource-consuming, usually by the window. ShowModalDialog substitute, even if this should pop up a dialog box; the latter, the need to submit the pages to the server by server judgement check, the process is not only a long time and increase the burden on the server.    And the use of AJAX, the check request can be issued by the XMLHttpRequest object, the whole process does not require a new pop-up window, the whole page does not need to be submitted to the server, the server quickly without increasing the burden.    Example 2: from on-demand data - Cascade menu 
  Previously, in order to avoid the operation of each of the menu caused by heavy load pages, do not use the Background of each call, but one-time menu will cascade all the data read from and write full array, and then depending on the user's operation JavaScript used to control the subset of the presentation of the project, so that solved the response speed operation, as well as to avoid heavy load pages sent to the server frequent requests, but if the user does not operate or menu in the menu only on the part of operation, then read the data will become part of redundant data users waste of resources, particularly in the complex menu structure, a large quantity of data circumstances (such as menu-there are many, and each has a dish on the 100 projects), the more prominent such defects. 

  AJAX application now in the initial pages, we simply read out its first-class and all the data shows that in the operation of a user of a menu, Ajax will be passed to the current request a background of the two projects are - sub-menu of all data, if the request has been presented to two of a menu, after the request to the two operated by the corresponding menu item menu all three of all data, and so this…… with What to take what, how much to take the number, there will be no data redundancy and waste, reduce the total data download and updated pages not override all, only need to update the update can be part of that phase For background processing and heavy-duty way to shorten the waiting time for customers, but also to the waste of resources to a minimum. 

  Example 3: Read external data 
  AJAX can call external data, therefore, some data such as the development of XML documents, RSS files for secondary processing, data integration or application development.    6. AJAX defects 

  AJAX is not a perfect technology.    Use AJAX, some of its shortcomings to weigh: 




Related articles:

From another perspective: div + css layout entry
  You are learning CSS layout?    Is it still can not fully grasp pure CSS layout?    There are usually two circumstances hinder your learning:    The first possibility is that you have not understood the principles of pages dealing with CSS.    In the ...
CSS Tutorial 14, CSS page layout Page Layout [Translation Htmldog]
  CSS layout is very simple to use, if you get used to the layout tables may be a bit difficult at the beginning, but is actually very easy, in fact the concept is different.    You need each part of the web site as an independent block, you can block absolute or relative position.&...
Upcoming "AJAX and Web development" training - study
  Coming soon after the Spring Festival this "AJAX and WEB" development of the training, teachers and lecturers Hai-Tao Sun has a knowledge point of order, would like to see the outline of this system and the training content of interest to users make more valuable advice, thank you ...
Fireworks website sections explain Application
  We said here biopsy (Slice) will be a big image is divided into a number of small slice images, and then page through the width and spacing did not re-form these small images not seamless stitching together as a complete images.    This can reduce the size of images, reducing page d...
Common HTML skills
  How to click hyperlinks, indicate confirmation window:    1. In "head> </ head> add the following code.  <script>   Function winconfirm ()    (Question = confirm ( "indeed to enter?")    If (question! = "0")...