Shulou(Shulou.com)06/03 Report--

This article mainly introduces "Ajax technology how to achieve WEB non-refresh data submission function". In daily operation, I believe many people have doubts about how to achieve WEB non-refresh data submission function in Ajax technology. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "Ajax technology how to achieve WEB non-refresh data submission function". Next, please follow the editor to study!

Ajax internal communication documents I. the main reasons for using Ajax

1. Achieve a better user experience through appropriate Ajax applications

2. Transfer some of the previous work from the server to the client, which is conducive to the idle processing capacity of the client to deal with, and reduce the burden of the server and bandwidth, so as to achieve the purpose of saving ISP space and bandwidth rental cost.

II. Citation

Jesse James Garrett, who first proposed the concept of Ajax, believes that:

Ajax is the abbreviation of Asynchronous JavaScript and XML.

Ajax is not a new language or technology, it is actually a combination of several technologies in a certain way to play their respective roles in common cooperation, it includes

Standardize rendering using XHTML and CSS

Using DOM to realize dynamic display and interaction

Using XML and XSLT for data exchange and processing

Using XMLHttpRequest for asynchronous data reading

Finally, all data is bound and processed with JavaScript.

The working principle of Ajax is equivalent to adding an intermediate layer between the user and the server to asynchronize the user's operation and the server's response.

Not all user requests are submitted to the server, for example, some data validation and data processing are done by the Ajax engine itself.

The Ajax engine submits the request to the server only when it is determined that new data needs to be read from the server.

III. Overview

Although Garrent lists seven technologies that make up Ajax, I personally think that the core of the so-called Ajax is only JavaScript, XMLHTTPRequest and DOM.

If the data format is XML, you can also add XML (the data returned by Ajax from the server can be in XML format or other formats such as text).

In the old interaction, the user triggered a HTTP request to the server, which was processed by the server and then returned a new HTHL page to the client

Whenever the server processes a request submitted by the client, the client can only wait idle, and even if it is only a small interaction,

As long as you get a very simple data from the server, you have to return a complete HTML page, and users waste time and bandwidth to re-read the entire page every time.

After using Ajax, users feel that almost all actions will quickly respond to waiting without page reloading (white screen).

1 、 XMLHTTPRequest

One of the biggest features of Ajax is that it can transfer or read and write data to the server without refreshing the page (also known as no refresh update page).

This feature is mainly due to the XMLHTTP component XMLHTTPRequest object. In this way, the resend desktop application can only exchange data with the server.

Instead of refreshing the interface every time, and submitting the data processing work to the server every time.

This not only reduces the burden of the server, but also speeds up the response speed and shortens the user waiting time.

Microsoft was the first to apply XMLHTTP. IE (above IE5) extends its functions by allowing developers to use XMLHTTP ActiveX components within Web pages.

Developers can transfer data directly to or fetch data from the server without navigating from the current Web page.

This feature is important because it helps reduce the pain of stateless connections, and it also eliminates the need to download redundant HTML, thereby speeding up the process.

Mozilla (above Mozilla1.0 and above NetScape7) responded by creating its own inherited XML proxy class:

The XMLHttpRequest class. Konqueror (and Safari v1.2, which is also a KHTML-based browser) also supports XMLHttpRequest objects

Opera will also support XMLHttpRequest objects in later versions of v7.6x+. For the most part,

XMLHttpRequest objects are similar to XMLHTTP components, and so are methods and properties, except that a small number of properties are not supported.

Application of XMLHttpRequest:

/ / IE support

If (window.ActiveXObject & &! window.XMLHttpRequest) {

Window.XMLHttpRequest = function () {

Return new ActiveXObject ((navigator.userAgent.toLowerCase (). IndexOf ('msie 5')! =-1)? 'Microsoft.XMLHTTP':' Msxml2.XMLHTTP')

}

}

Text processing of data returned by server process

GET Requests

Example:

Var req = new XMLHttpRequest ()

If (req) {

Req.onreadystatechange = function () {

If (req.readyState = = 4 & & req.status = = 200) {

Alert (req.responseText)

}

}

Req.open ('GET',' pageurl.html')

Req.send (null)

}

POST Requests

Example:

Var req = new XMLHttpRequest ()

If (req) {

Req.onreadystatechange = function () {

If (req.readyState = = 4 & & req.status = = 200) {

Alert (req.responseText)

}

}

Req.open ('POST',' scripturl.cgi')

Req.setRequestHeader ('Content-Type',' application/x-www-form-urlencoded')

Req.send ('var1=data1&var2=data2')

}

Description of XMLHttpRequest object method

Abort () stops the current request

GetAllResponseHeaders () as a string to ask the complete headers

GetResponseHeader ("headerLabel") as a string to ask a single header tag

Open ("method", "URL" [, asyncFlag [, "userName" [, "password"]) sets the target URL, method, and other parameters for pending requests

Send (content) sends a request (param must be sent this way, because hidden params is not available at the backend)

SetRequestHeader ("label", "value") sets the header and sends it with the request ('post' method must)

XMLHttpRequest object property description

Event trigger for onreadystatechange state change (req.open ('POST',' servlet') or req.open ('POST',' servlet',true) for asynchronous processing)

ReadyState object status (integer):

0 = uninitialized

1 = reading

2 = read

3 = interacting

4 = complete

The text version of the data returned by the responseText server process

DOM-compatible XML document object for data returned by the responseXML server process

Topics returned by the responseBody server (in non-text format)

Data flow returned by the responseStream server

The status code returned by the status server, such as: 404 = "end of file found", 200 = "successful"

Status text information returned by the statusText server

2 、 JavaScript

JavaScript is a programming language that is widely used in browsers, and it has been downgraded to a bad language (he is really boring in using it).

It is often used to show off gadgets and pranks or monotonous form verification. But the truth is, he's a real programming language.

It has its own standard and is widely supported in various browsers.

3 、 DOM

Document Object Model .

DOM is a set of API for HTML and XML files. It provides a structural representation of the document so that you can change the content and visibility in it.

Its essence is to establish a bridge between web pages and Script or programming language.

All properties, methods, and events that can be manipulated and created by WEB developers are represented as objects (for example, document represents the object of the file itself)

The table object represents the table object of HTML, and so on. These objects can be accessed by most browsers today in Script.

A web page built with HTML or XHTML can also be thought of as a set of structured data, which is sealed in DOM (Document Object Model)

DOM provides support for reading and writing individual objects in the web page.

Function loadCnt () {

Var req=new XMLHttpRequest ()

If (req) {

Req.onreadystatechange=function () {

If (req.readyState==4 & & req.status==200) {

If (req.responseTextconversation copyright 1) {

Nodes=req.responseXML.documentElement.childNodes

Browse_cnt.innerText=nodes.item (0). Text

Comment_cnt.innerText=nodes.item (1). Text

Score_cnt.innerText=nodes.item (2). Text

}

}

}

Req.open ('POST',' $path/AjaxCntCtrl')

Req.setRequestHeader ('Content-Type',' application/x-www-form-urlencoded')

Req.send ("photo_id=" + document.form1.photo_id.value)

}

}

/ / responseXML.documentElement.getAttribute ('stat') = =' ok'

/ / responseXML.documentElement.getElementsByTagName ('title') [0] .firstChild.data

4 、 XML

Extensible markup language (Extensible Markup Language) has an open, extensible, and self-describing language structure.

It has become the standard of data and document transmission on the Internet. It is a language used to describe data structures, just like his name.

He makes it easier to define some structured data and can exchange data with other applications.

5. Synthesis

The Ajax engine mentioned by Jesse James Garrett is actually a more complex JavaScript application that handles user requests.

Read and write the server and change the DOM content.

JavaScript's Ajax engine reads information and interactively rewrites DOM, which enables seamless refactoring of web pages

That is, to change the content of the page after the page has been downloaded, which is a method that we have been widely used through JavaScript and DOM.

But in order to make the web page really dynamic, we need not only internal interaction, but also data from the outside.

We let users enter data and change the content of the web page through DOM, but now, XMLHTTPRequest

It allows us to read and write data on the server without reloading the page, minimizing user input.

XML-based network communication is not new. In fact, both FLASH and JAVA Applet have performed well, and now this rich interaction is also available on web pages.

Based on standardization and widely supported and technology, and does not require plug-ins or download Mini Program.

Ajax is a transformation of traditional WEB applications. It used to be that the server generated a HTML page every time and returned it to the client (browser).

In most websites, at least 90% of many pages are the same, such as structure, format, header, footer, advertisement, etc.

The difference is only a small part of the content, but each time the server will generate all the pages and return them to the client, which is an invisible waste.

Whether it is for the time, bandwidth, CPU consumption of users, or for the high-priced bandwidth and space leased by ISP. If you calculate it on one page,

Only a few kilos or dozens of kilos may not be noticeable, but for example, SINA generates millions of pages of large ISP every day, it can be said to be a huge loss.

On the other hand, AJAX can be the middle layer between the client and the server to process the client's request and send the request to the server as needed.

If you take what you use and take as much as you use, there will be no redundancy and waste of data, and the total amount of data download will be reduced.

And when updating the page, there is no need to reload all the content, only the part that needs to be updated can be updated, which shortens the user waiting time compared with pure background processing and reloading.

It also minimizes the waste of resources, is based on standardization and is widely supported and technology, and does not require plug-ins or download Mini Program

So Ajax is a win-win for users and ISP.

Ajax separates the interface from the application in WEB (or data from presentation), but in the past there was no clear boundary between the two.

The separation of data and presentation is conducive to division of labor, reduction of WEB application errors caused by page modifications made by non-technical personnel, and improvement of efficiency.

It is also more suitable for the current publishing system. It can also transfer some of the previous work borne by the server to the client, which is conducive to the idle processing capacity of the client.

IV. Application

The emergence of the concept of Ajax has opened the prelude to the era of no refresh update pages, and has a trend to replace the traditional web development in using form (form) submission to update web pages.

It can be regarded as a milestone. But Ajax is not applicable everywhere, and its scope of application is determined by its features.

An example of an application is the unilateral Ajax application of cascading dishes.

Our previous treatment of cascading menus was as follows:

In order to avoid overloading the page caused by each operation on the menu, the method of calling the background each time is not used.

Instead, all the data of the cascading menu is read out and written into the array at one time, and then JavaScript is used to control the rendering of its subset items according to the user's operation.

Although this solves the problems of operation response speed, not reloading the page and avoiding frequently sending requests to the server

But if the user does not operate on the menu or only operates on a portion of the menu

Then some of the read data will become redundant data and waste the user's resources, especially when the menu structure is complex and the amount of data is large.

(for example, there are many levels of menus, and there are hundreds of items at each level.) this malpractice is even more prominent.

If you apply Ajax in this case, the result will change:

When initializing the page, we only read out all the data at its first level and display it, when the user operates one of the first-level menu items

All the data of the second-level submenu to which the current first-level project belongs will be requested from the background through Ajax. If you continue to request one of the second-level menus that have already been presented,

Then request all the data of all the three-level menus corresponding to the second-level menu items, and so on. In this way, you can take what you use and how much you use.

There will be no redundancy and waste of data, reducing the total amount of data downloads, and updating the page without reloading all the content, only the parts that need to be updated.

Compared with background processing and reloading, it shortens the waiting time of users and minimizes the waste of resources.

In addition, because Ajax can call external data, it can also achieve the function of data aggregation (of course, it must be authorized accordingly).

For example, Microsoft just released the BETA version of the online RSS reader on March 15; it can also facilitate some open data and develop some of its own applications.

For example, some novel book search applications using Amazon data.

In a word, Ajax is suitable for WEB applications with more interaction, frequent data reading and good data classification.

5. Advantages of Ajax

1. Lighten the burden on the server. Because the fundamental idea of Ajax is to "fetch data on demand", it is most likely to reduce the burden of redundant requests and shadows on the server

2. No refresh update page to reduce the actual and psychological waiting time of users.

First of all, the mode of "fetching data on demand" reduces the actual amount of data read, using a very vivid example.

If the way of overloading is to go from one end point to the origin and then to another end point, then Ajax is based on one end point to another.

Second, even if you want to read a relatively large amount of data, you don't have to have a blank screen like RELOAD, because Ajax uses XMLHTTP to send requests to get server response data.

Use Javascript to manipulate DOM to finally update the page without reloading the entire page, so in the process of reading the data

Users are not faced with a blank screen, but the original page state (or you can add a LOADING prompt box to let the user know the status of data reading)

The corresponding part of the content is updated only when all the data is received, and the update is instantaneous and can hardly be felt by the user. In short, the user is very sensitive.

They can feel your thoughtfulness to them, although it is unlikely to have an immediate effect, but it will accumulate their dependence on the site bit by bit in the hearts of users.

3. Better user experience

4. You can also transfer some of the previous work borne by the server to the client, which is conducive to the idle processing capacity of the client.

Reduce the burden of servers and bandwidth, save space and bandwidth rental costs

5. Ajax can call external data

6. Based on standardization and widely supported and technology, and does not require plug-ins or download Mini Program

7. Ajax separates the interface from the application in WEB (it can also be said to separate data from presentation)

8. It is both profitable for users and ISP.

VI. The problem of Ajax

1. Some handheld devices (such as mobile phones, PDA, etc.) do not support Ajax well at present.

2. Using JavaScript to make Ajax engine, JavaScript compatibility and DeBug are all headaches.

3. No refresh overload of Ajax, because the change of the page is not as obvious as refresh overload.

Therefore, it is easy to cause trouble to users-users are not sure whether the current data is new or updated; the existing solutions are:

The design is more obvious in the relevant location prompt, the area of data update, the prompt to the user after the data update, and so on.

4. The support of streaming media is not as good as FLASH and Java Applet.

VII. Concluding remarks

Better Ajax applications require more client development, thinking about current WEB application concepts, and a good user experience.

It comes from the idea of thinking for users everywhere, not just some kind of technology.

At this point, the study on "Ajax technology how to achieve WEB non-refresh data submission function" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.