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

This article mainly shows you "how to achieve AJAX asynchronous call and local refresh", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to achieve AJAX asynchronous call and local refresh" this article.

Introduction

To fully implement an AJAX asynchronous call and local refresh, you usually need the following steps:

(1) create a XMLHttpRequest object, that is, create an asynchronous invocation object.

(2) create a new HTTP request and specify the method, URL and authentication information of the HTTP request.

(3) set the function that responds to the state change of the HTTP request.

(4) send HTTP request.

(5) get the data returned by the asynchronous call.

(6) use JavaScript and DOM to realize local refresh.

1. Create a XMLHttpRequest object

Different browsers use different asynchronous invocation objects. Asynchronous invocation uses XMLHttpRequest objects in XMLHTTP components in IE browsers, while XMLHttpRequest components are directly used in Netscape and Firefox browsers. As a result, XMLHttpRequest objects are created differently in different browsers.

The way to create XMLHttpRequest objects in an IE browser is as follows:

Var xmlHttpRequest = new ActiveXObject ("Microsoft.XMLHTTP")

The way to create XMLHttpRequest objects in a Netscape browser is as follows:

Var xmlHttpRequest = new XMLHttpRequest ()

Since it is impossible to determine which browser the user is using, it is best to add both of the above methods when creating XMLHttpRequest objects. As shown in the following code:

Create the XMLHttpRequest object createXMLHttpRequst (); / / call the method of creating the object

"if (window.ActiveXObject)" is used to determine whether or not to use an IE browser. ActiveXOject is not a standard property of Windows object, but a special property in IE browser, which can be used to judge whether the browser supports ActiveX control. Usually only IE browsers or browsers with IE browsers as the core can support Active controls.

Else if (window.XMLHttpRequest) is a judgment made to prevent some browsers from supporting neither ActiveX nor XMLHttpRequest components. XMLHttpRequest is not a standard attribute of window object, but it can be used to judge whether browsers support XMLHttpRequest components.

If the browser supports neither ActiveX nor XMLHttpRequest components, then the xmlHttpRequest variable will not be assigned a value.

2. Create a HTTP request

After you create the XMLHttpRequest object, you must create a HTTP request for the XMLHttpRequest object, indicating where the XMLHttpRequest object gets the data. It can usually be data from a website or from other files locally.

To create a HTTP request, you can use the open () method of the XMLHttpRequest object, whose syntax code is as follows:

XMLHttpRequest.open (method,URL,flag,name,password)

The parameters in the code are explained as follows:

Method: this parameter is used to specify the request method of HTTP. There are five methods: get, post, head, put and delete. The commonly used methods are get and post.

URL: this parameter is used to specify the URL address of the HTTP request, either absolute URL or relative URL.

Flag: this parameter is optional and the parameter value is Boolean. This parameter is used to specify whether to use asynchronous mode. True represents asynchronous mode, false represents synchronous mode, and the default is true.

Name: this parameter is optional and is used to enter a user name. This parameter must be used if the server requires authentication.

Password: this parameter is optional and is used to enter a password. This parameter must be used if the server requires authentication. You can usually use the following code to access the contents of a Web site file.

XmlHttpRequest.open ("get", "http://www.aspxfans.com/BookSupport/JavaScript/ajax.htm",true);"

Or use the following code to access the contents of a local file:

XmlHttpRequest.open ("get", "ajax.htm", true)

Note: if the HTML file is placed on the Web server, the JavaScript security mechanism in the Netscape browser does not allow you to communicate with hosts other than this machine. That is, using the open () method can only open files that are on the same server as the HTML file. There is no such restriction in IE browsers (although you can open files on other servers, there is also a warning prompt).

3. Set the function that responds to the status change of the HTTP request

After you have created the HTTP request, you should be able to send the HTTP request to the Web server. However, the purpose of sending an HTTP request is to receive data returned from the server. From the creation of the XMLHttpRequest object, to sending data, receiving data, and XMLHttpRequest objects will experience a total of the following 5 states.

⑴ uninitialized state. When the XMLHttpRequest object is created, it is in an uninitialized state, and the readyState property value of the XMLHttpRequest object is 0.

⑵ initialization status. When the HTTP request is created using the open () method after the XMLHttpRequest object is created, the object is in an initialized state. The value of the readyState property of the XMLHttpRequest object is 1.

⑶ sends data status. After initializing the XMLHttpRequest object, when sending data using the send () method, the object is in the send data state, and the readyState property value of the XMLHttpRequest object is 2.

⑷ receives data status. After the data is received and processed by the Web server, the returned result is transmitted to the client. At this point, the XMLHttpRequest object is in the state of receiving data, and the readyState property value of the XMLHttpRequest object is 3.

⑸ completion status. After the XMLHttpRequest object has finished receiving the data, it enters the completion state, where the readyState property value of the XMLHttpRequest object is 4. At this point, the received data is stored in the memory of the client computer, and you can use the responseText property or the responseXml property to get the data.

The data returned from the server can be obtained only after the XMLHttpRequest object has completed the above five steps. Therefore, if you want to get the data returned from the server, you must first determine the state of the XMLHttpRequest object.

The XMLHttpRequest object can respond to the readystatechange event, which fires when the state of the XMLHttpRequest object changes (that is, when the value of the readyState property changes). Therefore, you can call a function through this event and determine the value of the readyState property of the XMLHttpRequest object in that function. If the readyState property value is 4, use the responseText property or the responseXml property to get the data. The specific code is as follows:

/ / set the function to be called when the state of the XMLHttpRequest object changes. Do not add parentheses xmlHttpRequest.onreadystatechange = getData after the function name. / / define the function function getData () {/ / determine whether the readyState attribute value of the XMLHttpRequest object is 4 If 4 means that the asynchronous call completes the if (xmlHttpRequest.readyState = = 4) {/ / set the statement} 4 to get the data, set the statement to get the data returned by the server

If the value of the readyState property of the XMLHttpRequest object is equal to 4, the asynchronous invocation process is complete, and the data can be obtained through the responseText property or the responseXml property of the XMLHttpRequest object.

However, the completion of the asynchronous call process does not mean that the asynchronous call is successful. If you want to determine whether the asynchronous call is successful, you should also judge the status property value of the XMLHttpRequest object. Only if the attribute value is 200, the asynchronous call is successful. Therefore, to get the statement that the server returns data, you must also determine whether the status attribute value of the XMLHttpRequest object is equal to 200, as shown in the following code:

If (xmlHttpRequst.status = = 200) {/ / output the returned result as a string [xss_clean] (xmlHttpRequest.responseText) using the following statement; / / or output the returned result as XML / / [xss_clean] (xmlHttpRequest.responseXML) using the following statement;}

Note: if the HTML file is not running on the Web server, but locally, the return value of xmlHttpRequest.status is 0. Therefore, if the file is running locally, you should add the judgment of xmlHttpRequest.status = = 0.

The above code is usually placed inside the function that responds to the state change of the HTTP request, as shown in the following code:

/ / set the function to be called when the state of the XMLHttpRequest object changes. Do not add parentheses xmlHttpRequest.onreadystatechange = getData after the function name. / / define the function function getData () {/ / determine whether the readyState attribute value of the XMLHttpRequest object is 4 If 4 means that the asynchronous call completes if (xmlHttpRequest.readyState==4) {/ / sets the statement if (xmlHttpRequest.status = = 200 | | xmlHttpRequest.status = = 0) {/ / use the following statement Output the returned result as a string [xss_clean] (xmlHttpRequest.responseText) / / or use the following statement to output the returned result in the form of XML / / docunment.write (xmlHttpRequest.responseXML);} 5. Send HTTP request

After setting up the above steps, you can send the HTTP request to the Web server. To send a HTTP request, you can use the send () method of the XMLHttpRequest object, whose syntax code is as follows:

XMLHttpRequest.send (data)

Where data is an optional parameter, if the requested data does not require a parameter, you can use null instead. The format of the data parameter is similar to that passed in URL, and the following code is an example of the data parameter in the send () method:

Name=myName&value=myValue

It is only after using the send () method that the value of the readyState property of the XMLHttpRequest object starts to change, the readystatechange event is fired, and the function is called.

6. Local updates

After the server-side data is obtained through the asynchronous call of Ajax, you can use JavaScript or DOM to partially update the data in the web page. There are three common ways to update locally:

Data updates for ⑴ form objects

To update the data of a form object, you usually only need to change the value of the value property of the form object, and the syntax code is as follows:

FormObject.value = "New value"

An example of a data update for a form object is shown in the following code:

Local update

Update of text between tags in ⑵ IE browser

In HTML code, there are many other elements in addition to form elements, and there is often a little text between the opening and closing tags of these elements (as shown in the following code), and updates to these text are part of the local update.

Words

Text

In IE browsers, the innerText or innerHTML attribute can be used to change the content of the text between tags. Where the innerText attribute is used to change the plain text content between the opening and closing tags, and the innerHTML attribute is used to change the HTML content. As shown in the following code:

Update the original data locally

Local Refresh of ⑶ DOM Technology

The innerText and innerHTML properties are both properties in IE browsers and are not supported in Netscape browsers. But DOM is supported by both IE and Netscape browsers. In DOM, you can modify the text content between tags.

In DOM, each pair of opening and closing tags in an HTML document is treated as a node. For example, if there is a tag in the HTML document as shown below, the tag is called a "node" in DOM.

Original data

Using the getElementById () method in DOM, you can find the tag (or node) by the value of the id attribute, as shown in the following statement:

Var node = document.getElementById ("myDiv")

Note: in an HTML document, the value of the id attribute in each tag cannot be repeated. Therefore, the node obtained using the getElementById () method is unique.

In DOM, the text between the start tag and the end tag is considered to be a child of that node, while the firstChild attribute can get the first child node under a node. For example, the following code can get the first child node under the node, that is, the text node between the label and the label.

Node.firstChild

Note that the above code gets the text node, not the text content. If you want to get the text content of a node, use the nodeValue attribute of the node. You can change the text content of the text node by setting the value of the nodeValue property. The complete code is as follows:

Local update

Note: at present, mainstream browsers support local refresh of DOM technology.

7 、 Complete original data of AJAX instance AJAX instance These are all the contents of the article "how to implement AJAX asynchronous calls and local refreshes" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.