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

This article mainly introduces "what is the definition of Ajax". In daily operation, I believe many people have doubts about the definition of Ajax. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "what is the definition of Ajax?" Next, please follow the editor to study!

Introduction to Ajax

Ajax consists of HTML, JavaScript ™technology, DHTML, and DOM, an excellent way to transform a clumsy Web interface into an interactive Ajax application. It is a powerful way to build a website.

Ajax attempts to build a bridge between the functionality and interactivity of desktop applications and the constantly updated Web applications. You can use dynamic user interfaces and beautiful controls like those common in desktop applications, but in Web applications.

Basic technologies used in Ajax applications:

1. HTML is used to create Web forms and to determine which fields are used by other parts of the application.

2. JavaScript code is the core code for running Ajax applications, which helps to improve communication with server applications.

3. DHTML or Dynamic HTML, which is used to update forms dynamically. We will mark HTML with div, span, and other dynamic HTML elements.

4. The document object model DOM is used (through JavaScript code) to handle the HTML structure and (in some cases) the XML returned by the server.

Definition of Ajax

Ajax= Asynchronous JavaScript and XML (and DHTML, etc.) Asynchronous asynchronous JS and XML.

XMLHttpRequest this is a JavaScript object; it is an object that handles all server communication, and it is easy to create it, as shown in listing 1.

Listing 1. Create a new XMLHttpRequest object

Var xmlHttp = new XMLHttpRequest (); it is the JavaScript technology that talks to the server through the XMLHttpRequest object. This is no ordinary application flow, which is precisely the source of the power of Ajax.

Ajax basically puts JavaScript technology and XMLHttpRequest objects between the Web form and the server.

Once you have the handle to XMLHttpRequest, use the JavaScript code to complete the following tasks:

1. Get form data: JavaScript code can easily extract data from an HTML form and send it to the server.

2. Modify the data on the form: updating the form is also easy, from setting field values to quickly replacing images.

3. Parse HTML and XML: manipulate DOM using JavaScript code (see the next section) to deal with the structure of XML data returned by the HTML form server

For the first two points, you need to be very familiar with the getElementById () method, as shown in listing 2.

Listing 2. Capture and set field values with JavaScript code

/ / capture field value: / / get the value of the field "phone" and use it to create a variable phonevar phone = document.getElementById ("phone") .value;// set the field value: / / get the value from the array of response and write it to the label document.getElementById ("order"). Value = response [0]; document.getElementById ("address"). Value = response [1]; the function of DOM

When you need to pass XML and change the HTML form between the JavaScript code and the server, let's take a closer look at DOM.

Get Request object

XMLHttpRequest is the core of Ajax applications.

Var xmlhttp;if (window.XMLHttpRequest) {/ / get XMLHttpRequest object xmlhttp=new XMLHttpRequest () from IE7+, Firefox, Chrome, Opera, Safari;} else {/ / get XMLHttpRequest object xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP") from IE6, IE5;}

Listing 4. Create XMLHttpRequest objects in a way that supports multiple browsers

/ * Create a new XMLHttpRequest object to talk to the Web server * / var xmlHttp = false;/*@cc_on @ * / / * @ if (@ _ jscript_version > = 5) try {xmlHttp = new ActiveXObject ("Msxml2.XMLHTTP");} catch (e) {try {xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");} catch (e2) {xmlHttp = false;} @ end @ * / if (! xmlHttp & & typeof XMLHttpRequest! = 'undefined') {xmlHttp = new XMLHttpRequest ();}

The core of this code is divided into three steps:

1. Create a variable xmlHttp to refer to the XMLHttpRequest object you are about to create.

2. Try to create the object in the Microsoft browser: 1) try to create it using the Msxml2.XMLHTTP object. If it fails, try the Microsoft.XMLHTTP object again.

3. If the xmlHttp is still not established, create the object in a non-Microsoft way. Finally, xmlHttp should reference a valid XMLHttpRequest object, no matter what browser you are running.

Request / response of Ajax

Dealing with the Web application on the server is JavaScript technology, not the HTML form submitted directly to that application. How do I use the XMLHttpRequest object to make a request? First-you need a Web page that can call the JavaScript method. Then there is the process that is basically the same in all Ajax applications:

1. Get the required data from the Web form. 2. Establish the URL to be connected. Open the connection to the server. 4. Set the function that the server will run after it is finished. 5. Send request.

The example Ajax methods in listing 5 are organized in this order:

Listing 5. Issue an Ajax request

Function callServer () {/ / get the values of city and state var city = document.getElementById ("city"). Value; var state = document.getElementById ("state") .value; / / end JS if ((city = = null) if either of their values do not exist | (city = ")) return; if ((state = null) | | (state =") return / / create a connected URL object var url = "/ scripts/getZipCode.php?city=" + escape (city) + "& state=" + escape (state); / / Open a connection xmlHttp.open ("GET", url, true) to the server; / / set a method that is called xmlHttp.onreadystatechange = updatePage when the request returns / / xmlhttp.onreadystatechange=function () / / {/ / if (xmlhttp.readyState==4 & & xmlhttp.status==200) / / {/ / document.getElementById ("myDiv") [xss_clean] = xmlhttp.responseText; / /} / / xmlHttp.send (null);}

The initial code uses basic JavaScript code to get the values of several form fields. Then set a PHP script as the target of the link. Note how the script URL is specified, with city and state (from the form) appended to the URL using simple GET parameters. If the last parameter is set to true, an asynchronous connection will be requested (which is where Ajax comes from). If you use false, the code waits for a response from the server after making the request. If set to true, the user can still use the form (or even call other JavaScript methods) when the server processes the request in the background. The onreadystatechange property tells the server what to do after the run is complete. Because the code is not waiting for the server, you must let the server know what to do so that you can respond. In this example, if the server finishes processing the request, a special method called updatePage () will be triggered. Finally, send () is called with the value null. Because the data to be sent to the server (city and state) has been added to the request URL, no data needs to be sent in the request. The request is made and the server works according to your requirements.

Process the response

1. Do nothing until the value of the xmlHttp.readyState property equals 4.

two。 The server will populate the response into the xmlHttp.responseText property.

The first of these is the ready state; second, you use the xmlHttp.responseText property to get a response from the server, and the sample method in listing 6 is available for the server to call based on the data sent in listing 5.

Listing 6. Processing server responses

Function updatePage () {if (xmlHttp.readyState = = 4) {var response = xmlHttp.responseText; document.getElementById ("zipCode"). Value = response;}}

It waits for the server to call and, if it is ready, sets the value of another form field with the value returned by the server (in this case, the ZIP code for the city and state entered by the user). Once the server returns the ZIP code, the updatePage () method sets the value of that field with the city / state ZIP code, and the user can overwrite the value. There are two reasons for this:

Keep the example simple, showing that sometimes you may want the user to be able to modify the data returned by the server.

Keep these two points in mind, they are important for good user interface design.

Connect to the Web form

One JavaScript method captures the information that the user enters the form and sends it to the server, while the other JavaScript method listens and processes the response and sets the value of the field when the response returns. All of this actually depends on calling the first JavaScript method, which starts the whole process. Update the form using JavaScript technology.

Listing 7. Start an Ajax process

City:

State:

Zip Code:

At this point, the study of "what is the definition of Ajax" is over. I hope to be able to solve your 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.