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

Editor to share with you how to achieve asynchronous loading Ajax, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

AJAX (Asynchronous JavaScript and XML, asynchronous JavaScript and XML). It is not a new programming language, but a new way to use existing standards, the art of exchanging data with the server and updating parts of the page without reloading the entire page.

Basic grammar

Before learning Ajax, we should be clear about our needs, that is, to interact with the server asynchronously and update the page information without refreshing the page. Using Ajax is actually very simple, we just need to follow certain steps.

Create an Ajax object (natively need to determine the type of the current browser)

Set the callback function (the function triggered after the interaction with the server is completed)

Open the request and send it. (code writing varies slightly depending on the way the request is made.)

The client gets feedback data and updates the page

Get Ajax object

Different browsers have different support for Ajax, so we should treat it differently.

Set callback function

The purpose of setting the callback function is to add the acquired data information to the page after the Ajax has finished interacting with the server.

Usually we specify the onreadystatechange function as our callback handler.

With regard to the interaction between Ajax and the server, there is the following status information for our reference in the coding process.

.readystate

There are several common values about the loading state:

0: request is not initialized

1: the server connection has been established

2: the request has been received

3: request processing

4: the request has been completed and the response is ready

.status

The status information of the loading result is as follows:

"OK"

404: "this page not found"

Turn on interaction

When it comes to interaction, it is both sides that come to mind. That is, the interaction between our ajax client and server. So we need to make it clear where the request data is on the server.

Open (method,url,async)

It is important to be aware that the use of url will vary from method to method. As for the parameter asynchronous, generally speaking, false can be used for requests with a small amount of data, but it is recommended to use true for asynchronous loading to avoid excessive pressure on the server.

GET mode

It's just that it's easy to specify the location of the url on the server. The understanding of the red part here is very important. We must specify url as the location of the request on the server, usually using an absolute path.

/ / for Servlet, specify the location on its comments to xmlhttp.open ("GET", "/ Test/servlet/AjaxServlet?userinput=" + str.value,true); xmlhttp.send ()

POST mode

When using the POST approach, we need an extra processing. Such as the following example:

Xmlhttp.open ("POST", "ajax_test.asp", true); xmlhttp.setRequestHeader ("Content-type", "application/x-www-form-urlencoded"); / / specify the parameter information to be transferred in the send method to xmlhttp.send ("fname=Bill&lname=Gates")

Client update page

For Ajax, as the name implies. Data is transmitted in the form of xml. But for now, this is no longer the only form. So how do we update the obtained data to the web page? There are two ways.

If the response from the server is not XML, use the responseText property.

Document.getElementById ("myDiv") [xss_clean] = xmlhttp.responseText

If the response from the server is XML and needs to be resolved as a XML object, use the responseXML property:

XmlDoc=xmlhttp.responseXML;txt= "; x=xmlDoc.getElementsByTagName (" ARTIST "); for (iTuno)

GetResult = function (str) {var httpxml; if (0 = = str.value.length) {document.getElementById ("ajax_result") [xss_clean] = "Nothing";} if (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest ();} else {xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP") } xmlhttp.onreadystatechange = function () {if (4 = = xmlhttp.readyState & & 200 = = xmlhttp.status) {document.getElementById ("ajax_result") [xss_clean] = xmlhttp.responseText;}} / / xmlhttp.open ("GET", "/ Test/servlet/AjaxServlet?userinput=" + str.value,true); xmlhttp.open ("GET", "receiveParams.jsp?userinput=" + str.value,true); xmlhttp.send ();}

The effect is consistent.

Ajax in JQuery

The previous introduction is the native implementation of Ajax, we still need to do a lot of work, and JQuery helps us to complete the platform-independent work, we only need to focus on the development of business logic. It is more convenient and simple to directly use the .post or .get or .ajax methods of jquery. The js code is as follows:

.post mode

$.post (". / newProject", {newProjectName:project_name}, function (data,status) {/ / alert ("data:" + data + "status:" + status); if (status = = "success") {var nodes = data.getElementsByTagName ("project"); / / alert (nodes [0] .getAttribute ("name")); for (var I = 0scape I < nodes.length) I + +) {$("# project_items") .append ("" + Nodes.getAttribute ("name") + ");})

.ajax mode

Execute $("# testAjax") .click when the function () {/ / button is clicked (function () {/ / Ajax call processes $.ajax ({type: "POST", url: "test.php", data: "name=garfield&age=18", success: function (data) {$("# myDiv"). Html (''+ data+'');})

.get mode

$(document) .ready (function () {$("# bt") .click (function () {$.get ("mytest/demo/antzone.txt", function (data,status) {alert ("Data:" + data+ "\ nStatus:" + status);})}) these are all the contents of the article "how to load Ajax asynchronously". 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.