Introduction to AJAX Experience 1--ajax

Source: Internet
Author: User
Tags http request object model

1.ajax Overview

The correct pronunciation is: e:j^ks, but most people are accustomed to call it: A:j^ks. Ajax is "asynchronous JavaScript and XML" (asynchronous Javascriptxml), AJAX is not an acronym, but a noun created by Jesse James Gaiiett, is a Web development technology that creates interactive Web applications. Technologies that allow browsers to communicate with the server without refreshing the current page are called Ajax.

The name "Ajax" was in February 2005, and Adaptivepath's Jesse James Garrett was created in his article ajax:anew approach to WEB application. And Ajax is the technology that Google labs Google to publish Google Maps and Google suggest after the real people know.

2. Synchronous and asynchronous interactions

For example: Common B/S mode (synchronous), Ajax Technology (asynchronous)

Sync: Submit Request-> wait for server processing-> processing completed returns this period the client browser cannot do anything.

Asynchronous: Request to trigger-> server processing via event (the browser can still do other things)-> processing completed

Synchronization refers to the way in which the next packet is communicated after the sender sends the data and the receiver sends back the response.
Asynchronous refers to the way in which the sender sends the data, waits for the receiver to send back the response, and then sends the next packet's communication.

Easy to understand:

Asynchronous Transmission: You transfer, I go to do my thing, the transmission is over to tell me; Synchronous transmission: You're transmitting now, and I want to see you transmit it, before you do anything else.

3. The way to communicate with the server without refreshing the entire page:

Flash

Java Applet

• Framework: If you use a set of frames to construct a Web page, you can update only one of the frames without disturbing the entire page

• Hidden iframe

XMLHttpRequest: This object is an extension of JavaScript that enables Web pages to communicate with the server. is the best choice for creating Ajax applications. in fact, Ajax is often used as a synonym for XMLHttpRequest objects.

4. The working principle of Ajax

The core of Ajax is JavaScript object XMLHttpRequest.

This object was first introduced in the Internet Explorer5, a technology that supports asynchronous requests . In short, XMLHttpRequest allows you to use JavaScript to make requests to the server and process the response without blocking the user.

Ajax uses an asynchronous interaction process. Ajax introduces an intermediary between the user and the server, eliminating the latency of processing during network interactions.

The user's browser loads the Ajax engine when performing a task. Ajax engines are written in JavaScript language and are usually hidden in a hidden frame. It is responsible for compiling the user interface and interacting with the server. The AJAX engine allows the user to interact with the application in an asynchronous process, independent of the communication between the user and the network server . Now you can invoke Ajax engines with JavaScript instead of creating an HTTP user action, in-memory data editing, page navigation, data validation, and the need to reload the entire page can be done by Ajax.

L use Ajax to bring visibility and convenience to JSPs, developers, and end users.

5.ajax Tool Pack

Ajax is not a new technology, it's actually a few technologies, each of which is doing its job and aggregating in a whole new way.

server-side language : The server needs to have the ability to send specific information to the browser. Ajax has nothing to do with server-side languages .

XML (extensible Markup Language, Extensible Markup Language) is a format for describing data. XML is one of the options for AAJX programs that require some form of formatting to pass information between the server and the client .

XHTML(eXtended hypertext Markup Language, using extended hyper-media markup language) and CSS(cascading style Sheet, cascading style sheets) to standardize presentation;

• The DOM(Document Object model, documentation objects models) enables dynamic display and interaction;

asynchronous data reads using the XMLHTTP component XMLHttpRequest Object

• Use JavaScript to bind and process all data

6. Ajax is not the perfect technology. There are also defects:

1 Ajax uses JavaScript and AJAX engines heavily, depending on the browser's support. IE5.0 and above, Mozilla1.0, NetScape7 and above support, Mozilla although also support Ajax, but the way to provide XMLHttpRequest is not the same. Therefore, programs that use AJAX must test compatibility for individual browsers.

2 Ajax Update page content does not refresh the entire page, therefore, the back of the page function is invalid ; some users often do not know whether the current data is old or has been updated. This requires a clear location to alert the user to "data has been updated."

3 Streaming media support without flash, Java applet good.

4 some handheld devices (such as mobile phones, PDAs, etc.) are not good enough to support Ajax. 7. Synchronization of Browsers 1.1 Description

1, this is a very typical browser synchronization interaction diagram

2. The steps are as follows:

1, the customer issued an HTTP request

2. The server accepts the customer's request and processes the customer's request

3, the server corresponding customer's request, returns the customer needs the page

3. Disadvantages:

1. Every time a customer submits a request, the entire page is submitted. That is, regardless of the size of the data on this page, it will be transmitted through the network. This creates data pressure on the network.

2, every time the customer submits a request, because to submit the entire data, so you have to brush the heart of the entire page. This is bad for the user's interactivity. Because the user's current page becomes the day shift after submission, the user can only wait and wait for the job.

3, in each submission request, the user may let the server processing of the data is very small, such as 163 mail system Landing, server-side actually only need user name and password on it, there is no need to transfer other data to the server. But synchronization can't do that.

4, especially in the management system, these systems for the customer interface of the friendly requirements is relatively high, and synchronous interaction is not satisfied with this feature. 8. The asynchronous interaction of the browser 2.1 Description

1, this is a very typical browser asynchronous interaction diagram

2, as can be seen from the diagram, the client did not send HTTP requests, but instead use JavaScript to call an AJAX engine to send data, so do not submit the entire page.

3, from the return view, return is no longer the customer needs of the page, but the customer needs data

4. Advantages:

1, do not submit the entire page, but the use of JavaScript to submit specific data, so that some do not need to transfer data on the network without transmission.

2, because only submits the data, therefore submits the request every day the database is not very big, thus may reduce the network to transmit the data the pressure.

3, because do not need to refresh the entire page, so even after the submission, the display in front of the customer page will not disappear, so for the customer interaction is particularly good.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.