Easy understanding of AJAX (jquery) asynchronous communication

I talked about Ajax in my previous blog. Next I will talk about its advantages and disadvantages. We know that no matter what technology is used, it is generally because of its advantages. That is, they all have advantages, there is an old saying that "three drugs are used for medicine". The same is true for technology. What kind of technology generally has its own defects. In a project, as long as it has advantages over its disadvantages, we will use it. The disadvantage of AJAX is basically negligible relative to its advantages, because its advantages are really excellent.

Ajax advantages:

1. Use asynchronous mode to communicate with the server, without interrupting users' ongoing operations and providing more rapid response capabilities.

2. Data can be maintained without updating the entire page (without refreshing the page), which gives a great user experience. This is also its biggest advantage.

3. The principle of AJAX is to "retrieve data on demand", which can minimize redundant requests, make full use of the idle processing capability of the client, and reduce the load on the server.

Ajax disadvantages:

1. Destroy the normal behavior of the browser's back button. After a page is dynamically updated, the user cannot return to the status of the previous page, because the browser can only record the static page in the history.

2. Use JavaScript as the Ajax engine. Special attention should be paid to JavaScript compatibility and debug.

Ajax enriches user pages and enhances user experience. Ajax is also a required course for all web development. Although Ajax technology is not complex, its implementation methods may vary with developers. Looking at it so well, does it feel that it is not easy to use, not easy to control and worried? Don't worry. Next we will introduce another technology that makes it easier for Ajax asynchronous communication technology to be applied to our program, that is, jquery.

Jquery provides a series of Ajax functions to help us unify this difference and make it easier to call Ajax. jquery provides several functions for sending Ajax requests. among them, the core and most complex is jquery. ajax (), all other Ajax functions are a simplified call of it. this method can be used when we want to fully control Ajax. Otherwise, it is more convenient to use simplified methods such as get, post, and load. Next we will understand these methods one by one:

1. Load (URL, [data], [callback])

The code of the remote HTML file is loaded and inserted into the Dom. By default, the get method is used for transmission, and the parameter is automatically converted to the POST method when additional parameters are added. In jquery 1.2, you can specify a selector to filter loaded HTML documents. In Dom, only filtered HTML code is inserted. The syntax is like "url # Some> selector ".

Parameters:

URL	HTML webpage URL to be loaded
Data (optional) map, string	Key/value data sent to the server. In jquery 1.3, you can also accept a string.
Callback (optional) callback	Callback function when loading is successful.

Example:

Description: loads the content of the feeds.html file.

Jquery code:

 $("#feeds").load("feeds.html");

2. jquery. Get (URL, [data], [callback], [type])

Load information through remote http get requests. This is a simple GET request function to replace complex $. Ajax. You can call the callback function when the request is successful. To execute a function when an error occurs, use $. Ajax.

Parameter: for the preceding explanation, see 1.

Type(Optional)String

The returned content format is XML, HTML, script, JSON, text, and _ default.

Example:

Description: displays the test. php return value (HTML or XML, depending on the return value ).

Jquery code:

$.get("test.php",function(data){  alert("Data Loaded: " + data);});

Description: displays the return value of test. cgi (HTML or XML, depending on the returned value), and adds a set of request parameters.

Jquery code:

$.get("test.cgi",{ name: "John", time: "2pm" },  function(data){    alert("Data Loaded: " + data);  });

3. jquery. getjson (URL, [data], [callback])

Http get requests are used to load JSON data. In jquery 1.2, you can use a callback function in the form of jsonp to load JSON data for other domains, such as "myurl? Callback =? ". Will jquery be replaced automatically? For the correct function name to execute the callback function. Note: The Code after this row will be executed before the callback function is executed.

Parameters: For more information, see 1.

Example:

Description: loads JSON data from test. JS, and attaches parameters to display a Name field in JSON data.

Jquery code:

$.getJSON("test.js",{ name: "John", time: "2pm" }, function(json){  alert("JSON Data: " +json.users[3].name);});

4. jquery. getscript (URL, [callback])

Load and execute a Javascript file through an http get request. Before jquery 1.2, getscript can only call JS files in the same domain. 1.2, you can call JavaScript files across domains. Note: Safari 2 or earlier versions cannot execute scripts simultaneously in the global scope. If you use getscript to add a script, add the latency function.

Parameters: see 1

Example:

Description: load and execute test. js. Information is displayed after successful execution.

Jquery code:

$.getScript("test.js",function(){  alert("Script loaded andexecuted.");});

5. jquery. Post (URL, [data], [callback], [type])

Load information through remote http post requests. This is a simple POST Request function to replace complex $. Ajax. You can call the callback function when the request is successful. To execute a function when an error occurs, use $. Ajax.

Parameters: see 2

Example:

Description 1: Request the test. php webpage and ignore the returned value.

Jquery code:

$.post("test.php");

Description 2: Request the test. PHP page and send some additional data together (the returned values are still ignored)

Jquery code:

$.post("test.php",{ name: "John", time: "2pm" } );

Description 3: output results from test. php on the request page (HTML or XML, depending on the returned content)

Jquery code:

$.post("test.php",function(data){   alert("Data Loaded: " + data); });

6. jquery. Ajax (options)

Load remote data using HTTP requests. Jquery underlying Ajax implementation. For easy-to-use high-level implementation, see $. Get, $. Post, and so on. $. Ajax () returns the created XMLHTTPRequest object. In most cases, you do not need to directly operate on this function unless you need to operate on uncommon options for more flexibility.

In the simplest case, $. Ajax () can be directly used without any parameters.

Note: All options can be set globally using the $. ajaxsetup () function.

For some parameter descriptions, see:

Http://www.cnblogs.com/zengen/archive/2011/03/25/1995761.html

Jquery. Ajax ):

Http://baike.baidu.com/view/6278307.htm

 

Summary:

The implementation of various functions will become more and more simple as technology continues to innovate. We only need to master the basic principles and learning methods of some mainstream technologies and have a complete set of ideas, the same technology is used to learn. Sometimes we can understand the framework of a new technology in two or three days. You can apply it to our project by referring to the instructions.